@pingux/astro 2.36.0-alpha.0 → 2.36.0-alpha.2

package/lib/cjs/components/Button/Button.stories.d.ts

@@ -28,9 +28,51 @@ export declare const Default: {
         };
     };
 };
-export declare const Disabled: () => React.JSX.Element;
-export declare const TextIconButton: () => React.JSX.Element;
-export declare const InlineButton: () => React.JSX.Element;
+export declare const Primary: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Critical: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const InlineButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const TextIconButton: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const Disabled: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const ColorBlockButton: {
     (args: any): React.JSX.Element;
     argTypes: {
@@ -41,6 +83,10 @@ export declare const ColorBlockButton: {
             defaultValue: boolean;
         };
     };
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };
-export declare const Critical: () => React.JSX.Element;
-export declare const Primary: () => React.JSX.Element;

package/lib/cjs/components/Button/Button.stories.js

@@ -60,71 +60,114 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.button["default"]
   }
 };
-var Disabled = function Disabled() {
+var Primary = function Primary() {
   return (0, _react2.jsx)(_index.Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-exports.Disabled = Disabled;
-var TextIconButton = function TextIconButton() {
+exports.Primary = Primary;
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.primary
+  }
+};
+var Critical = function Critical() {
   return (0, _react2.jsx)(_index.Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+exports.Critical = Critical;
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.critical
+  }
+};
+var InlineButton = function InlineButton() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), (0, _react2.jsx)(_index.Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+exports.InlineButton = InlineButton;
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.inlineButton
+  }
+};
+var TextIconButton = function TextIconButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    width: 20
+  }, (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "withIcon"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-exports.TextIconButton = TextIconButton;
-var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), (0, _react2.jsx)(_index.Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), (0, _react2.jsx)(_index.Button, {
+  }), "Button Text"), (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+exports.TextIconButton = TextIconButton;
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.textIconButton
+  }
+};
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_index.Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.disabled
+  }
 };
-exports.InlineButton = InlineButton;
 var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = (0, _objectWithoutProperties2["default"])(args, _excluded);
-  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
@@ -136,7 +179,19 @@ var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 exports.ColorBlockButton = ColorBlockButton;
 ColorBlockButton.argTypes = {
@@ -147,15 +202,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-var Critical = function Critical() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-exports.Critical = Critical;
-var Primary = function Primary() {
-  return (0, _react2.jsx)(_index.Button, {
-    variant: "primary"
-  }, "Button Text");
-};
-exports.Primary = Primary;
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.button.colorBlockButton
+  }
+};

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -564,6 +564,77 @@ declare const _default: {
             borderColor: string;
         };
     };
+    colorBlockPrimary: {
+        '& span': {
+            color: string;
+            textAlign: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            bg: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+        borderRadius: number;
+        outline: string;
+        cursor: string;
+        width: number;
+        height: string;
+        p: string;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&>div': {
+            alignItems: string;
+        };
+        '&>svg': {
+            color: string;
+            fill: string;
+        };
+        '&.is-configured': {
+            bg: string;
+            borderColor: string;
+            '& span': {
+                color: string;
+            };
+            '&>svg': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&.is-configured.is-hovered': {
+            bg: string;
+            borderColor: string;
+        };
+        '&.is-configured.is-pressed': {
+            bg: string;
+            borderColor: string;
+        };
+    };
     exampleText: {
         '&.is-hovered': {
             textDecoration: string;
@@ -600,6 +671,7 @@ declare const _default: {
         bg: string;
         border: string;
         borderColor: string;
+        display: string;
         '&.is-hovered': {
             bg: string;
             border: string;
@@ -625,7 +697,6 @@ declare const _default: {
         fontWeight: number;
         color: string;
         fontFamily: string;
-        display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -82,10 +82,11 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var withIcon = _objectSpread(_objectSpread({}, base), {}, {
-  padding: '8.5px 15px 8.5px 10px',
+  padding: '10px 15px 10px 10px',
   bg: 'white',
   border: '1px solid',
   borderColor: 'active',
+  display: 'inline-flex',
   '&.is-hovered': _objectSpread({}, defaultHover),
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -247,6 +248,21 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var colorBlockPrimary = _objectSpread(_objectSpread(_objectSpread({}, colorBlock), defaultActive), {}, {
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
 var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   backgroundColor: 'white',
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
@@ -286,6 +302,7 @@ var _default = {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -34,7 +34,13 @@ var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',

package/lib/components/Button/Button.stories.js

@@ -51,68 +51,109 @@ Default.parameters = {
     url: FIGMA_LINKS.button["default"]
   }
 };
-export var Disabled = function Disabled() {
+export var Primary = function Primary() {
   return ___EmotionJSX(Button, {
-    isDisabled: true
+    variant: "primary"
   }, "Button Text");
 };
-export var TextIconButton = function TextIconButton() {
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.primary
+  }
+};
+export var Critical = function Critical() {
   return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+Critical.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.critical
+  }
+};
+export var InlineButton = function InlineButton() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Button Text"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Button Text"));
+};
+InlineButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.inlineButton
+  }
+};
+export var TextIconButton = function TextIconButton() {
+  return ___EmotionJSX(Box, {
+    width: 20
+  }, ___EmotionJSX(Button, {
     mb: "sm",
     variant: "withIcon"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 20,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Add a Form"));
-};
-export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inline"
-  }, "Inline"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline with icon"), ___EmotionJSX(Button, {
-    mb: "sm",
-    mr: "auto",
-    variant: "inlinePrimary"
-  }, "Inline primary"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
-    color: "active",
+    color: "accent.30",
     size: 15,
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Inline primary with icon"));
+  }), "Button Text"));
+};
+TextIconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.textIconButton
+  }
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.disabled
+  }
 };
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
     props = _objectWithoutProperties(args, _excluded);
-  return ___EmotionJSX(Button, _extends({}, props, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({
+    mb: "sm"
+  }, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
@@ -124,7 +165,19 @@ export var ColorBlockButton = function ColorBlockButton(args) {
     title: {
       name: 'Create Icon'
     }
-  }));
+  })), ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlockPrimary",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  })));
 };
 ColorBlockButton.argTypes = {
   isConfigured: {
@@ -134,13 +187,9 @@ ColorBlockButton.argTypes = {
     defaultValue: false
   }
 };
-export var Critical = function Critical() {
-  return ___EmotionJSX(Button, {
-    variant: "critical"
-  }, "Button Text");
-};
-export var Primary = function Primary() {
-  return ___EmotionJSX(Button, {
-    variant: "primary"
-  }, "Button Text");
+ColorBlockButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.button.colorBlockButton
+  }
 };

package/lib/components/Button/Buttons.styles.js

@@ -72,10 +72,11 @@ var primary = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 var withIcon = _objectSpread(_objectSpread({}, base), {}, {
-  padding: '8.5px 15px 8.5px 10px',
+  padding: '10px 15px 10px 10px',
   bg: 'white',
   border: '1px solid',
   borderColor: 'active',
+  display: 'inline-flex',
   '&.is-hovered': _objectSpread({}, defaultHover),
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -234,6 +235,21 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+var colorBlockPrimary = _objectSpread(_objectSpread(_objectSpread({}, colorBlock), defaultActive), {}, {
+  '& span': {
+    color: 'white',
+    textAlign: 'left'
+  },
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
 var headerBar = _objectSpread(_objectSpread({}, base), {}, {
   backgroundColor: 'white',
   '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
@@ -273,6 +289,7 @@ export default {
   quiet: quiet,
   success: success,
   colorBlock: colorBlock,
+  colorBlockPrimary: colorBlockPrimary,
   exampleText: exampleText,
   withIcon: withIcon,
   inlineWithIcon: inlineWithIcon,

package/lib/utils/designUtils/figmaLinks.js

@@ -27,7 +27,13 @@ export var FIGMA_LINKS = {
     overflowing: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45064-7148&mode=design&t=0RGDgLyKBzT6bOXO-0'
   },
   button: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47047&mode=dev',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54887&mode=dev',
+    textIconButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=45003%3A54941&mode=dev',
+    inlineButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47247&mode=dev',
+    colorBlockButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47405&mode=dev',
+    critical: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47237&mode=dev',
+    primary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44916%3A47151&mode=dev'
   },
   buttonBar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.36.0-alpha.0",
+  "version": "2.36.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",