pcln-design-system - npm Package Compare versions

Comparing version 1.0.0-11 to 1.0.0-12

.storybook/Button.js

 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { Button } from '../src'
 
 storiesOf('Button', module)
+  .add('Button component', withInfo({
+    inline: true,
+    text: 'Use the <Button /> component to render a primitive button.'
+  })(() => (
+    <Button size='large'>
+      Button
+    </Button>
+  )))
   .add('default', () => (
@@ -7,0 +16,0 @@ <Button>

.storybook/Colors.js

@@ -22,3 +22,3 @@ import React from 'react'
 const Card = props => (
-  <Box p={3} w={[1/3, 1/4, 1/5]}>
+  <Box>
     <Chip color={props.color} />
@@ -33,10 +33,13 @@ <Text f={0}>{props.name}</Text>
     {keys.map(key => (
-      <Box
-        w={[1/3, 1/4, 1/5]}
+      <Flex
         key={key}
-        mr={3}
-        mb={1}>
-        <Card name={key} color={theme.colors[key]} />
-        <Card name={key} color={legacyTheme.colors[key]} />
-      </Box>
+        w={[1, 1/2, null, 1/3, 1/4]}
+        p={3}>
+        <Box w={1/2}>
+          <Card name={key} color={theme.colors[key]} />
+        </Box>
+        <Box w={1/2}>
+          <Card name={key} color={legacyTheme.colors[key]} />
+        </Box>
+      </Flex>
     ))}
@@ -54,7 +57,8 @@ </Flex>
         {next.map(color => (
-          <Card
-            key={color.key}
-            name={color.key}
-            color={color.value}
-          />
+          <Box key={color.key} p={3} width={[1, 1/2, 1/3, 1/4, 1/5]}>
+            <Card
+              name={color.key}
+              color={color.value}
+            />
+          </Box>
         ))}
@@ -71,7 +75,8 @@ </Flex>
         {legacy.map(color => (
-          <Card
-            key={color.key}
-            name={color.key}
-            color={color.value}
-          />
+          <Box key={color.key} p={3} width={[1, 1/2, 1/3, 1/4, 1/5]}>
+            <Card
+              name={color.key}
+              color={color.value}
+            />
+          </Box>
         ))}
@@ -88,2 +93,2 @@ </Flex>
     </div>
-  ))
+  ))

dist/Button.js

@@ -19,4 +19,2 @@ 'use strict';
 
-var _ = require('../');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,3 +29,3 @@
         height: '32px',
-        fontSize: _.theme.fontSizes[0] + 'px',
+        fontSize: props.theme.fontSizes[0] + 'px',
         padding: '0 12px'
@@ -38,3 +36,3 @@ };
         height: '40px',
-        fontSize: _.theme.fontSizes[1] + 'px',
+        fontSize: props.theme.fontSizes[1] + 'px',
         padding: '0 18px'
@@ -45,3 +43,3 @@ };
         height: '48px',
-        fontSize: _.theme.fontSizes[2] + 'px',
+        fontSize: props.theme.fontSizes[2] + 'px',
         padding: '0 22px'
@@ -52,3 +50,3 @@ };
         height: '40px',
-        fontSize: _.theme.fontSizes[1] + 'px',
+        fontSize: props.theme.fontSizes[1] + 'px',
         padding: '0 18px'
@@ -55,0 +53,0 @@ };

dist/theme.js

@@ -51,4 +51,4 @@ 'use strict';
 var darkBlue = '#049';
-var lighterGray = '#f0f2f4';
-var lightGray = '#abb7c2';
+var lightGray = '#f0f2f4';
+var borderGray = '#abb7c2';
 var gray = '#687B8E'; // primary
@@ -92,4 +92,4 @@ var darkGray = '#364049';
   gray: gray,
-  lighterGray: lighterGray,
   lightGray: lightGray,
+  borderGray: borderGray,
   darkGray: darkGray,
@@ -96,0 +96,0 @@ green: green,

package.json

 {
   "name": "pcln-design-system",
-  "version": "1.0.0-11",
+  "version": "1.0.0-12",
   "description": "Priceline Design System",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

668674

increased by0.04%

Lines of code

2428

increased by0.58%

No dependency changes