@pingux/astro 2.95.0 → 2.96.0-alpha.0

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

@@ -24,6 +24,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _iconButtonAttributes = require("../IconButton/iconButtonAttributes");
 var _EditButton = require("./EditButton");
 var _EditButton2 = _interopRequireDefault(require("./EditButton.mdx"));
@@ -65,6 +66,12 @@ var Default = function Default(args) {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.editButton["default"]
+  }
+};
 var WithSizeProp = function WithSizeProp(args) {
   return (0, _react2.jsx)(_index.EditButton, (0, _extends2["default"])({}, args, {
     size: "lg",

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

@@ -4,7 +4,40 @@ import { IconButtonProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<IconButtonProps>;
-export declare const WithTooltip: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const Sizes: () => React.JSX.Element;
-export declare const CommonlyUsed: () => React.JSX.Element;
+export declare const Inverted: StoryFn<IconButtonProps>;
+export declare const WithTooltip: {
+    (): 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 Sizes: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const CommonlyUsed: {
+    (): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithTooltip = exports.Sizes = exports.Disabled = exports.Default = exports.CommonlyUsed = void 0;
+exports["default"] = exports.WithTooltip = exports.Sizes = exports.Inverted = exports.Disabled = exports.Default = exports.CommonlyUsed = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
@@ -55,6 +55,25 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.iconButton["default"]
   }
 };
+var Inverted = function Inverted(args) {
+  return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    "aria-label": "Plus icon button"
+  }, args, {
+    variant: "inverted"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    title: {
+      name: 'Plus Icon'
+    }
+  }));
+};
+exports.Inverted = Inverted;
+Inverted.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.iconButton.inverted
+  }
+};
 var WithTooltip = function WithTooltip() {
   return (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button with tooltip",
@@ -68,6 +87,12 @@ var WithTooltip = function WithTooltip() {
   }));
 };
 exports.WithTooltip = WithTooltip;
+WithTooltip.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.iconButton.withTooltip
+  }
+};
 var Disabled = function Disabled() {
   return (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "disabled icon button",
@@ -80,6 +105,12 @@ var Disabled = function Disabled() {
   }));
 };
 exports.Disabled = Disabled;
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.iconButton.disabled
+  }
+};
 var Sizes = function Sizes() {
   return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
     key: "head"
@@ -185,6 +216,12 @@ var Sizes = function Sizes() {
   }))))));
 };
 exports.Sizes = Sizes;
+Sizes.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.iconButton.sizes
+  }
+};
 var CommonlyUsed = function CommonlyUsed() {
   return (
     // please note these are intentionally not mapped for story transparency
@@ -507,4 +544,10 @@ var CommonlyUsed = function CommonlyUsed() {
     }))))
   );
 };
-exports.CommonlyUsed = CommonlyUsed;
+exports.CommonlyUsed = CommonlyUsed;
+CommonlyUsed.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.iconButton.commonlyUsed
+  }
+};

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -23,12 +23,14 @@ export declare const base: {
     };
     '&.is-hovered': {
         bg: string;
+        boxShadow: string;
     };
     '&.is-pressed': {
         path: {
             fill: string;
         };
         bg: string;
+        boxShadow: string;
     };
 };
 export declare const square: {
@@ -56,12 +58,14 @@ export declare const square: {
     };
     '&.is-hovered': {
         bg: string;
+        boxShadow: string;
     };
     '&.is-pressed': {
         path: {
             fill: string;
         };
         bg: string;
+        boxShadow: string;
     };
 };
 declare const _default: {
@@ -90,12 +94,14 @@ declare const _default: {
         };
         '&.is-hovered': {
             bg: string;
+            boxShadow: string;
         };
         '&.is-pressed': {
             path: {
                 fill: string;
             };
             bg: string;
+            boxShadow: string;
         };
     };
     bidirectional: {
@@ -262,6 +268,7 @@ declare const _default: {
             bg: string;
             borderColor: string;
             color: string;
+            boxShadow: string;
         };
         justifyContent: string;
         appearance: string;
@@ -377,12 +384,14 @@ declare const _default: {
         };
         '&.is-hovered': {
             bg: string;
+            boxShadow: string;
         };
         '&.is-pressed': {
             path: {
                 fill: string;
             };
             bg: string;
+            boxShadow: string;
         };
     };
     invertedBadgeDeleteButton: {
@@ -434,6 +443,7 @@ declare const _default: {
             bg: string;
             borderColor: string;
             color: string;
+            boxShadow: string;
         };
         justifyContent: string;
         appearance: string;
@@ -473,12 +483,14 @@ declare const _default: {
         };
         '&.is-hovered': {
             bg: string;
+            boxShadow: string;
         };
         '&.is-pressed': {
             path: {
                 fill: string;
             };
             bg: string;
+            boxShadow: string;
         };
     };
     svgIconButton: {
@@ -506,12 +518,14 @@ declare const _default: {
         };
         '&.is-hovered': {
             bg: string;
+            boxShadow: string;
         };
         '&.is-pressed': {
             path: {
                 fill: string;
             };
             bg: string;
+            boxShadow: string;
         };
     };
     toggle: {

package/lib/cjs/components/IconButton/IconButton.styles.js

@@ -45,13 +45,15 @@ var base = {
   outline: 'none',
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
   '&.is-hovered': {
-    bg: 'accent.95'
+    bg: 'accent.95',
+    boxShadow: 'standard'
   },
   '&.is-pressed': {
     'path': {
       fill: 'white'
     },
-    bg: 'active'
+    bg: 'active',
+    boxShadow: 'none'
   }
 };
 exports.base = base;
@@ -89,7 +91,8 @@ var inverted = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20',
-    color: 'white'
+    color: 'white',
+    boxShadow: 'none'
   }
 });
 var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -94,6 +94,11 @@ export declare const FIGMA_LINKS: {
     };
     iconButton: {
         default: string;
+        inverted: string;
+        withTooltip: string;
+        disabled: string;
+        sizes: string;
+        commonlyUsed: string;
     };
     inlineEditing: {
         default: string;
@@ -176,4 +181,7 @@ export declare const FIGMA_LINKS: {
         withoutButton: string;
         withoutLink: string;
     };
+    editButton: {
+        default: string;
+    };
 };

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

@@ -100,7 +100,12 @@ var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=17916-38366&t=rLZVlRDdR1JhehkH-0'
   },
   iconButton: {
-    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365-7042&t=pXTSE3YlGbL0X49N-4',
+    inverted: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6228&t=pXTSE3YlGbL0X49N-4',
+    withTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6053&t=pXTSE3YlGbL0X49N-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-5372&t=pXTSE3YlGbL0X49N-4',
+    sizes: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-5412&t=pXTSE3YlGbL0X49N-4',
+    commonlyUsed: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-6048&t=pXTSE3YlGbL0X49N-4'
   },
   inlineEditing: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
@@ -182,6 +187,9 @@ var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-11051&t=OK8Fy4P3se6BKy0F-4',
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
+  },
+  editButton: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

package/lib/components/EditButton/EditButton.stories.js

@@ -16,6 +16,7 @@ import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, EditButton, Text } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { iconButtonArgTypes } from '../IconButton/iconButtonAttributes';
 import { IconSize } from './EditButton';
 import EditButtonReadme from './EditButton.mdx';
@@ -51,6 +52,12 @@ export var Default = function Default(args) {
     "aria-label": "edit"
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.editButton["default"]
+  }
+};
 export var WithSizeProp = function WithSizeProp(args) {
   return ___EmotionJSX(EditButton, _extends({}, args, {
     size: "lg",

package/lib/components/IconButton/IconButton.stories.js

@@ -45,6 +45,24 @@ Default.parameters = {
     url: FIGMA_LINKS.iconButton["default"]
   }
 };
+export var Inverted = function Inverted(args) {
+  return ___EmotionJSX(IconButton, _extends({
+    "aria-label": "Plus icon button"
+  }, args, {
+    variant: "inverted"
+  }), ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    title: {
+      name: 'Plus Icon'
+    }
+  }));
+};
+Inverted.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.iconButton.inverted
+  }
+};
 export var WithTooltip = function WithTooltip() {
   return ___EmotionJSX(IconButton, {
     "aria-label": "icon button with tooltip",
@@ -57,6 +75,12 @@ export var WithTooltip = function WithTooltip() {
     }
   }));
 };
+WithTooltip.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.iconButton.withTooltip
+  }
+};
 export var Disabled = function Disabled() {
   return ___EmotionJSX(IconButton, {
     "aria-label": "disabled icon button",
@@ -68,6 +92,12 @@ export var Disabled = function Disabled() {
     }
   }));
 };
+Disabled.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.iconButton.disabled
+  }
+};
 export var Sizes = function Sizes() {
   return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
     key: "head"
@@ -172,6 +202,12 @@ export var Sizes = function Sizes() {
     }
   }))))));
 };
+Sizes.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.iconButton.sizes
+  }
+};
 export var CommonlyUsed = function CommonlyUsed() {
   return (
     // please note these are intentionally not mapped for story transparency
@@ -493,4 +529,10 @@ export var CommonlyUsed = function CommonlyUsed() {
       }
     }))))
   );
+};
+CommonlyUsed.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.iconButton.commonlyUsed
+  }
 };

package/lib/components/IconButton/IconButton.styles.js

@@ -38,13 +38,15 @@ export var base = {
   outline: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'accent.95'
+    bg: 'accent.95',
+    boxShadow: 'standard'
   },
   '&.is-pressed': {
     'path': {
       fill: 'white'
     },
-    bg: 'active'
+    bg: 'active',
+    boxShadow: 'none'
   }
 };
 var bidirectional = {
@@ -81,7 +83,8 @@ var inverted = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20',
-    color: 'white'
+    color: 'white',
+    boxShadow: 'none'
   }
 });
 var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {

package/lib/utils/designUtils/figmaLinks.js

@@ -93,7 +93,12 @@ export var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=17916-38366&t=rLZVlRDdR1JhehkH-0'
   },
   iconButton: {
-    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A2520&t=We3h7LaaFJQnxdSy-1'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365-7042&t=pXTSE3YlGbL0X49N-4',
+    inverted: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6228&t=pXTSE3YlGbL0X49N-4',
+    withTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6053&t=pXTSE3YlGbL0X49N-4',
+    disabled: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-5372&t=pXTSE3YlGbL0X49N-4',
+    sizes: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-5412&t=pXTSE3YlGbL0X49N-4',
+    commonlyUsed: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58748-6048&t=pXTSE3YlGbL0X49N-4'
   },
   inlineEditing: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=5244-14864&mode=design&t=1pPbrQvGkdMYBNqk-0'
@@ -175,5 +180,8 @@ export var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-11051&t=OK8Fy4P3se6BKy0F-4',
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
+  },
+  editButton: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
   }
 };

package/package.json

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