@storybook/addon-backgrounds - npm Package Compare versions

Comparing version 4.0.0-alpha.7 to 4.0.0-alpha.8

dist/BackgroundPanel.js

@@ -35,6 +35,2 @@ 'use strict';
 
-var _assign = require('babel-runtime/core-js/object/assign');
-
-var _assign2 = _interopRequireDefault(_assign);
-
 var _global = require('global');
@@ -54,2 +50,6 @@
 
+var _reactEmotion = require('react-emotion');
+
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
+
 var _events = require('./events');
@@ -65,9 +65,30 @@
 
+var Wrapper = (0, _reactEmotion2.default)('div')({
+  padding: 20
+});
+
+var Title = (0, _reactEmotion2.default)('h5')({
+  fontSize: 16
+});
+
+var Pre = (0, _reactEmotion2.default)('pre')({
+  padding: '30px',
+  display: 'block',
+  background: 'rgba(19,19,19,0.9)',
+  color: 'rgba(255,255,255,0.95)',
+  marginTop: '15px',
+  lineHeight: '1.75em'
+});
+
+var List = (0, _reactEmotion2.default)('div')({
+  display: 'inline-block',
+  padding: 15
+});
+var Item = (0, _reactEmotion2.default)('div')({
+  display: 'inline-block',
+  padding: 5
+});
+
 var storybookIframe = 'storybook-preview-iframe';
-
 var style = {
-  font: {
-    fontFamily: "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
-    fontSize: '14px'
-  },
   iframe: {
@@ -87,7 +108,7 @@ transition: 'background 0.25s ease-in-out'
   return _react2.default.createElement(
-    'div',
-    { style: (0, _assign2.default)({ padding: '20px' }, style.font) },
+    Wrapper,
+    null,
     _react2.default.createElement(
-      'h5',
-      { style: { fontSize: '16px' } },
+      Title,
+      null,
       'Setup Instructions'
@@ -106,13 +127,4 @@ ),
     _react2.default.createElement(
-      'pre',
-      {
-        style: {
-          padding: '30px',
-          display: 'block',
-          background: 'rgba(19,19,19,0.9)',
-          color: 'rgba(255,255,255,0.95)',
-          marginTop: '15px',
-          lineHeight: '1.75em'
-        }
-      },
+      Pre,
+      null,
       _react2.default.createElement(
@@ -215,4 +227,4 @@ 'code',
       return _react2.default.createElement(
-        'div',
-        { style: { display: 'inline-block', padding: '15px' } },
+        List,
+        null,
         backgrounds.map(function (_ref) {
@@ -222,4 +234,4 @@ var value = _ref.value,
           return _react2.default.createElement(
-            'div',
-            { key: name + ' ' + value, style: { display: 'inline-block', padding: '5px' } },
+            Item,
+            { key: name + ' ' + value },
             _react2.default.createElement(_Swatch2.default, { value: value, name: name, setBackground: _this3.setBackgroundFromSwatch })
@@ -226,0 +238,0 @@ );

dist/Swatch.js

@@ -7,6 +7,2 @@ 'use strict';
 
-var _assign = require('babel-runtime/core-js/object/assign');
-
-var _assign2 = _interopRequireDefault(_assign);
-
 var _react = require('react');
@@ -20,65 +16,67 @@
 
+var _reactEmotion = require('react-emotion');
+
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var style = {
-  swatches: {
-    backgroundColor: '#fff',
-    textAlign: 'center',
-    padding: '0',
-    border: '1px solid rgba(0,0,0,0.1)',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    display: 'inline-block',
-    width: '175px',
-    verticalAlign: 'top',
-    wordWrap: 'break-word'
-  },
-  swatch: {
-    height: '80px',
+var Button = (0, _reactEmotion2.default)('button')({
+  listStyle: 'none',
+  backgroundColor: '#fff',
+  textAlign: 'center',
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: 4,
+  cursor: 'pointer',
+  display: 'inline-block',
+  width: 175,
+  verticalAlign: 'top',
+  wordWrap: 'break-word',
+  padding: 0
+});
+var Block = (0, _reactEmotion2.default)('div')(function (_ref) {
+  var bg = _ref.bg;
+  return {
+    height: 80,
     borderRadius: '4px 4px 0 0',
     transition: 'opacity 0.25s ease-in-out',
-    borderBottom: '1px solid rgba(0,0,0,0.1)'
-  },
-  listStyle: { listStyle: 'none' },
-  pushBottom: { marginBottom: '10px' },
-  pushLeft: { marginLeft: '10px' },
-  soft: { paddingLeft: '10px', paddingRight: '10px' },
-  hard: { padding: '0' },
-  flush: { margin: '0' },
-  font: {
-    fontFamily: "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
-    fontSize: '14px',
-    wordBreak: 'break-word'
-  }
-};
+    borderBottom: '1px solid rgba(0,0,0,0.1)',
+    background: bg,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center'
+  };
+});
 
-var Swatch = function Swatch(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      setBackground = _ref.setBackground;
+var Box = (0, _reactEmotion2.default)('div')({
+  listStyle: 'none',
+  paddingLeft: 10,
+  paddingRight: 10
+});
+
+var Name = (0, _reactEmotion2.default)('h4')({
+  float: 'left',
+  fontWeight: 'bold'
+});
+var Value = (0, _reactEmotion2.default)('h4')({
+  float: 'right',
+  fontWeight: 'normal'
+});
+
+var Swatch = function Swatch(_ref2) {
+  var name = _ref2.name,
+      value = _ref2.value,
+      setBackground = _ref2.setBackground;
   return _react2.default.createElement(
-    'button',
-    {
-      style: (0, _assign2.default)({}, style.swatches, style.listStyle, style.hard),
-      onClick: function onClick() {
+    Button,
+    { onClick: function onClick() {
         return setBackground(value);
-      }
-      // Prevent focusing on mousedown
-      , onMouseDown: function onMouseDown(event) {
+      }, onMouseDown: function onMouseDown(event) {
         return event.preventDefault();
-      }
-    },
-    _react2.default.createElement('div', {
-      style: (0, _assign2.default)({}, style.swatch, {
-        background: value,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center'
-      })
-    }),
+      } },
+    _react2.default.createElement(Block, { bg: value }),
     _react2.default.createElement(
-      'div',
-      { style: (0, _assign2.default)({}, style.listStyle, style.soft) },
+      Box,
+      null,
       _react2.default.createElement(
-        'h4',
-        { style: (0, _assign2.default)({ float: 'left', fontWeight: 'bold' }, style.font) },
+        Name,
+        null,
         name,
@@ -88,4 +86,4 @@ ':'
       _react2.default.createElement(
-        'h4',
-        { style: (0, _assign2.default)({ float: 'right', fontWeight: 'normal' }, style.font) },
+        Value,
+        null,
         _react2.default.createElement(
@@ -92,0 +90,0 @@ 'em',

package.json

 {
   "name": "@storybook/addon-backgrounds",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "A storybook addon to show different backgrounds for your preview",
@@ -15,2 +15,6 @@ "keywords": [
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
   "license": "MIT",
@@ -20,6 +24,2 @@ "author": "jbaxleyiii",
   "jsnext:main": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybooks/storybook.git"
-  },
   "scripts": {
@@ -29,7 +29,9 @@ "prepare": "node ../../scripts/prepare.js"
   "dependencies": {
-    "@storybook/addons": "4.0.0-alpha.7",
-    "@storybook/core-events": "4.0.0-alpha.7",
+    "@storybook/addons": "4.0.0-alpha.8",
+    "@storybook/core-events": "4.0.0-alpha.8",
     "babel-runtime": "^6.26.0",
+    "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
+    "react-emotion": "^9.1.3",
     "util-deprecate": "^1.0.2"
@@ -36,0 +38,0 @@ },

src/__tests__/Swatch.js

@@ -24,8 +24,5 @@ import React from 'react';
   it('should render the value of the swatch and set it to be the background', () => {
-    const markup = shallow(
-      <Swatch value="bar" name="foo" setBackground={mockedSetBackround} />
-    ).html();
+    const result = shallow(<Swatch value="bar" name="foo" setBackground={mockedSetBackround} />);
 
-    expect(markup.match(/background:bar/gim)).toHaveLength(1);
-    expect(markup.match(/bar/gim)).toHaveLength(2);
+    expect(result).toMatchSnapshot();
   });
@@ -32,0 +29,0 @@

src/BackgroundPanel.js

@@ -6,13 +6,35 @@ import { document } from 'global';
 
+import styled from 'react-emotion';
+
 import Events from './events';
 import Swatch from './Swatch';
 
+const Wrapper = styled('div')({
+  padding: 20,
+});
+
+const Title = styled('h5')({
+  fontSize: 16,
+});
+
+const Pre = styled('pre')({
+  padding: '30px',
+  display: 'block',
+  background: 'rgba(19,19,19,0.9)',
+  color: 'rgba(255,255,255,0.95)',
+  marginTop: '15px',
+  lineHeight: '1.75em',
+});
+
+const List = styled('div')({
+  display: 'inline-block',
+  padding: 15,
+});
+const Item = styled('div')({
+  display: 'inline-block',
+  padding: 5,
+});
+
 const storybookIframe = 'storybook-preview-iframe';
-
 const style = {
-  font: {
-    fontFamily:
-      "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
-    fontSize: '14px',
-  },
   iframe: {
@@ -41,4 +63,4 @@ transition: 'background 0.25s ease-in-out',
 const Instructions = () => (
-  <div style={Object.assign({ padding: '20px' }, style.font)}>
-    <h5 style={{ fontSize: '16px' }}>Setup Instructions</h5>
+  <Wrapper>
+    <Title>Setup Instructions</Title>
     <p>
@@ -50,15 +72,6 @@ Please add the background decorator definition to your story. The background decorate accepts
     <p>Below is an example of how to add the background decorator to your story definition.</p>
-    <pre
-      style={{
-        padding: '30px',
-        display: 'block',
-        background: 'rgba(19,19,19,0.9)',
-        color: 'rgba(255,255,255,0.95)',
-        marginTop: '15px',
-        lineHeight: '1.75em',
-      }}
-    >
+    <Pre>
       <code>{instructionsHtml}</code>
-    </pre>
-  </div>
+    </Pre>
+  </Wrapper>
 );
@@ -131,9 +144,9 @@
     return (
-      <div style={{ display: 'inline-block', padding: '15px' }}>
+      <List>
         {backgrounds.map(({ value, name }) => (
-          <div key={`${name} ${value}`} style={{ display: 'inline-block', padding: '5px' }}>
+          <Item key={`${name} ${value}`}>
             <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
-          </div>
+          </Item>
         ))}
-      </div>
+      </List>
     );
@@ -140,0 +153,0 @@ }

src/Swatch.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const style = {
-  swatches: {
-    backgroundColor: '#fff',
-    textAlign: 'center',
-    padding: '0',
-    border: '1px solid rgba(0,0,0,0.1)',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    display: 'inline-block',
-    width: '175px',
-    verticalAlign: 'top',
-    wordWrap: 'break-word',
-  },
-  swatch: {
-    height: '80px',
-    borderRadius: '4px 4px 0 0',
-    transition: 'opacity 0.25s ease-in-out',
-    borderBottom: '1px solid rgba(0,0,0,0.1)',
-  },
-  listStyle: { listStyle: 'none' },
-  pushBottom: { marginBottom: '10px' },
-  pushLeft: { marginLeft: '10px' },
-  soft: { paddingLeft: '10px', paddingRight: '10px' },
-  hard: { padding: '0' },
-  flush: { margin: '0' },
-  font: {
-    fontFamily:
-      "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
-    fontSize: '14px',
-    wordBreak: 'break-word',
-  },
-};
+import styled from 'react-emotion';
 
+const Button = styled('button')({
+  listStyle: 'none',
+  backgroundColor: '#fff',
+  textAlign: 'center',
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: 4,
+  cursor: 'pointer',
+  display: 'inline-block',
+  width: 175,
+  verticalAlign: 'top',
+  wordWrap: 'break-word',
+  padding: 0,
+});
+const Block = styled('div')(({ bg }) => ({
+  height: 80,
+  borderRadius: '4px 4px 0 0',
+  transition: 'opacity 0.25s ease-in-out',
+  borderBottom: '1px solid rgba(0,0,0,0.1)',
+  background: bg,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+}));
+
+const Box = styled('div')({
+  listStyle: 'none',
+  paddingLeft: 10,
+  paddingRight: 10,
+});
+
+const Name = styled('h4')({
+  float: 'left',
+  fontWeight: 'bold',
+});
+const Value = styled('h4')({
+  float: 'right',
+  fontWeight: 'normal',
+});
+
 const Swatch = ({ name, value, setBackground }) => (
-  <button
-    style={Object.assign({}, style.swatches, style.listStyle, style.hard)}
-    onClick={() => setBackground(value)}
-    // Prevent focusing on mousedown
-    onMouseDown={event => event.preventDefault()}
-  >
-    <div
-      style={Object.assign({}, style.swatch, {
-        background: value,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      })}
-    />
-    <div style={Object.assign({}, style.listStyle, style.soft)}>
-      <h4 style={Object.assign({ float: 'left', fontWeight: 'bold' }, style.font)}>{name}:</h4>
-      <h4 style={Object.assign({ float: 'right', fontWeight: 'normal' }, style.font)}>
+  <Button onClick={() => setBackground(value)} onMouseDown={event => event.preventDefault()}>
+    <Block bg={value} />
+    <Box>
+      <Name>{name}:</Name>
+      <Value>
         <em>{value}</em>
-      </h4>
-    </div>
-  </button>
+      </Value>
+    </Box>
+  </Button>
 );
@@ -59,0 +55,0 @@ Swatch.propTypes = {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

21

increased by5%

Lines of code

707

increased by0.57%

Worsened metrics

Total package byte prevSize

29901

decreased by-2.57%

Dependency count

9

increased by28.57%

Dependency changes

• + Addedemotion@^9.1.3

• + Addedreact-emotion@^9.1.3

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/babel-utils@0.6.10(transitive)

• + Added@emotion/hash@0.6.6(transitive)

• + Added@emotion/is-prop-valid@0.6.8(transitive)

• + Added@emotion/memoize@0.6.6(transitive)

• + Added@emotion/serialize@0.9.1(transitive)

• + Added@emotion/stylis@0.7.1(transitive)

• + Added@emotion/unitless@0.6.7(transitive)

• + Added@emotion/utils@0.8.2(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@storybook/addons@4.0.0-alpha.8(transitive)

• + Added@storybook/channels@4.0.0-alpha.8(transitive)

• + Added@storybook/core-events@4.0.0-alpha.8(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedabbrev@1.1.1(transitive)

• + Addedbabel-plugin-emotion@9.2.11(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@9.2.12(transitive)

• + Addedcreate-emotion-styled@9.2.8(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@9.2.12(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedms@2.1.3(transitive)

• + Addednopt@1.0.10(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-emotion@9.2.12(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.70.7.4(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtouch@2.0.2(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@storybook/addons@4.0.0-alpha.7(transitive)

• - Removed@storybook/channels@4.0.0-alpha.7(transitive)

• - Removed@storybook/core-events@4.0.0-alpha.7(transitive)

• Updated@storybook/addons@4.0.0-alpha.8

• Updated@storybook/core-events@4.0.0-alpha.8