pcln-design-system - npm Package Compare versions

Comparing version 1.0.0-37 to 1.0.0-38

.storybook/Card.js

@@ -10,7 +10,8 @@ import React from 'react'
         boxShadowSize="sm"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
+        borderWidth={1}
       >
@@ -21,7 +22,8 @@ Small Shadow
         boxShadowSize="md"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
+        borderWidth={1}
       >
@@ -32,7 +34,8 @@ Medium Shadow
         boxShadowSize="lg"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
+        borderWidth={1}
       >
@@ -43,7 +46,8 @@ Large Shadow
         boxShadowSize="xl"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
+        borderWidth={1}
       >
@@ -58,6 +62,6 @@ XLarge Shadow
         boxShadowSize="sm"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
@@ -70,6 +74,6 @@ borderWidth={2}
         boxShadowSize="md"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
@@ -82,6 +86,6 @@ borderWidth={2}
         boxShadowSize="lg"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
@@ -94,6 +98,6 @@ borderWidth={2}
         boxShadowSize="xl"
-        mb={5}
-        p={3}
-        width={200}
-        color="black"
+        m={4}
+        p={4}
+        width={1 / 2}
+        color="text"
         bg="white"
@@ -110,5 +114,5 @@ borderWidth={2}
         boxShadowSize="sm"
-        mb={5}
-        p={3}
-        width={200}
+        m={4}
+        p={4}
+        width={1 / 2}
         color="black"
@@ -118,9 +122,9 @@ bg="white"
       >
-        Small Shadow
+        Small Shadow - 0px
       </Card>
       <Card
         boxShadowSize="md"
-        mb={5}
-        p={3}
-        width={200}
+        m={4}
+        p={4}
+        width={1 / 2}
         color="black"
@@ -130,9 +134,9 @@ bg="white"
       >
-        Medium Shadow
+        Medium Shadow - 10px
       </Card>
       <Card
         boxShadowSize="lg"
-        mb={5}
-        p={3}
-        width={200}
+        m={4}
+        p={4}
+        width={1 / 2}
         color="black"
@@ -142,9 +146,9 @@ bg="white"
       >
-        Large Shadow
+        Large Shadow - 20px
       </Card>
       <Card
         boxShadowSize="xl"
-        mb={5}
-        p={3}
-        width={200}
+        m={4}
+        p={4}
+        width={1 / 2}
         color="black"
@@ -154,5 +158,5 @@ bg="white"
       >
-        XLarge Shadow
+        XLarge Shadow - 30px
       </Card>
     </Box>
   ))

dist/Card.js

@@ -39,9 +39,9 @@ 'use strict';
     md: {
-      'box-shadow': props.theme.boxShadows.slice(0, 2).join(', ')
+      'box-shadow': props.theme.boxShadows[1]
     },
     lg: {
-      'box-shadow': props.theme.boxShadows.slice(0, 3).join(', ')
+      'box-shadow': props.theme.boxShadows[2]
     },
     xl: {
-      'box-shadow': props.theme.boxShadows.join(', ')
+      'box-shadow': props.theme.boxShadows[3]
     }
@@ -48,0 +48,0 @@ };

dist/theme.js

@@ -135,4 +135,4 @@ 'use strict';
 
-var shadowColor = 'rgba(0,0,0,0.08)';
-var boxShadows = exports.boxShadows = ['0 0 4px 0 ' + shadowColor, '0 8px 8px 0 ' + shadowColor, '0 16px 16px 0 ' + shadowColor, '0 32px 32px 0 ' + shadowColor];
+// boxShadows
+var boxShadows = exports.boxShadows = ['0 0 2px 0 rgba(0,0,0,.08),0 1px 4px 0 rgba(0,0,0,.16)', '0 0 2px 0 rgba(0,0,0,.08),0 2px 8px 0 rgba(0,0,0,.16)', '0 0 2px 0 rgba(0,0,0,.08),0 4px 16px 0 rgba(0,0,0,.16)', '0 0 2px 0 rgba(0,0,0,.08),0 8px 32px 0 rgba(0,0,0,.16)'];
 
@@ -139,0 +139,0 @@ var theme = {

dist/Tooltip.js

@@ -81,3 +81,3 @@ 'use strict';
   var theme = _ref.theme;
-  return theme.boxShadows.slice(0, 3).join(', ');
+  return theme.boxShadows[1];
 }, function (_ref2) {
@@ -84,0 +84,0 @@ var theme = _ref2.theme;

lab.json

 {
-  "name": "design-system",
-  "library": "styled-components",
-  "components": []
-}
+  "theme": "./src/theme.js",
+  "components": [
+    {
+      "name": "Box",
+      "path": "./src/Box.js",
+      "examples": [
+        "<Box>Box</Box>"
+      ]
+    },
+    {
+      "name": "Badge",
+      "path": "./src/Badge.js",
+      "examples": [
+        "<Badge>Badge</Badge>"
+      ]
+    },
+    {
+      "name": "Button",
+      "path": "./src/Button.js",
+      "examples": [
+        "<Button>Button</Button>"
+      ]
+    },
+    {
+      "name": "Card",
+      "path": "./src/Card.js",
+      "examples": [
+        "<Card>Card</Card>"
+      ]
+    },
+    {
+      "name": "Container",
+      "path": "./src/Container.js",
+      "examples": [
+        "<Container>Container</Container>"
+      ]
+    },
+    {
+      "name": "Divider",
+      "path": "./src/Divider.js",
+      "examples": [
+        "<Divider />"
+      ]
+    },
+    {
+      "name": "Flag",
+      "path": "./src/Flag.js",
+      "examples": [
+        "<Flag>Flag</Flag>"
+      ]
+    },
+    {
+      "name": "Flex",
+      "path": "./src/Flex.js",
+      "examples": [
+        "<Flex align='center' justify='space-around'><Box p={3} bg='blue'>Flex</Box><Box p={2}>Box</Box></Flex>"
+      ]
+    },
+    {
+      "name": "GreenButton",
+      "path": "./src/GreenButton.js",
+      "examples": [
+        "<GreenButton>GreenButton</GreenButton>"
+      ]
+    },
+    {
+      "name": "Heading",
+      "path": "./src/Heading.js",
+      "examples": [
+        "<Heading>Heading</Heading>"
+      ]
+    },
+    {
+      "name": "Icon",
+      "path": "./src/Icon.js",
+      "examples": [
+        "<Icon name='check' />"
+      ]
+    },
+    {
+      "name": "Image",
+      "path": "./src/Image.js",
+      "examples": [
+        "<Image src='http://placehold.it/256' />"
+      ]
+    },
+    {
+      "name": "Label",
+      "path": "./src/Label.js",
+      "examples": [
+        "<Label>Label</Label>"
+      ]
+    },
+    {
+      "name": "Link",
+      "path": "./src/Link.js",
+      "examples": [
+        "<Link>Link</Link>"
+      ]
+    },
+    {
+      "name": "RatingBadge",
+      "path": "./src/RatingBadge.js",
+      "examples": [
+        "<RatingBadge>9.0</RatingBadge>"
+      ]
+    },
+    {
+      "name": "RedButton",
+      "path": "./src/RedButton.js",
+      "examples": [
+        "<RedButton>RedButton</RedButton>"
+      ]
+    },
+    {
+      "name": "Text",
+      "path": "./src/Text.js",
+      "examples": [
+        "<Text>Text</Text>"
+      ]
+    }
+  ],
+  "appVersion": "0.1.0"
+}

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

993673

increased by0.25%

Lines of code

5335

increased by2.4%

No dependency changes