@pingux/astro 2.104.0-alpha.4 → 2.104.0-alpha.5

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

@@ -15,6 +15,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _images = require("../../utils/devUtils/constants/images");
 var _chartData = require("./controls/chart/chartData");
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem.mdx"));
@@ -59,6 +60,12 @@ var Default = function Default() {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem["default"]
+  }
+};
 var WithSubtext = function WithSubtext() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -69,6 +76,12 @@ var WithSubtext = function WithSubtext() {
   }));
 };
 exports.WithSubtext = WithSubtext;
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withSubText
+  }
+};
 var WithImage = function WithImage() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -83,13 +96,18 @@ var WithImage = function WithImage() {
   }));
 };
 exports.WithImage = WithImage;
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withImage
+  }
+};
 var WithControls = function WithControls() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
       icon: _FormSelectIcon["default"],
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, (0, _react2.jsx)(_.ListViewItemEditButton, {
     "aria-label": "edit-icon"
   }), (0, _react2.jsx)(_.ListViewItemSwitchField, {
@@ -103,6 +121,12 @@ var WithControls = function WithControls() {
   }, "Delete user"))));
 };
 exports.WithControls = WithControls;
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withControls
+  }
+};
 var WithRightOfDataSlot = function WithRightOfDataSlot() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -132,6 +156,12 @@ var WithRightOfDataSlot = function WithRightOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithRightOfDataSlot = WithRightOfDataSlot;
+WithRightOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withRightOfDataSlot
+  }
+};
 var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = (0, _react2.jsx)(_.Box, {
     mx: "sm",
@@ -161,6 +191,12 @@ var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithLeftOfDataSlot = WithLeftOfDataSlot;
+WithLeftOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withLeftOfDataSlot
+  }
+};
 var WithCharts = function WithCharts() {
   var containerRef = (0, _react.useRef)();
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
@@ -190,6 +226,12 @@ var WithCharts = function WithCharts() {
   }, "Delete user"))));
 };
 exports.WithCharts = WithCharts;
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withCharts
+  }
+};
 var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -219,4 +261,10 @@ var WithExtraLongText = function WithExtraLongText() {
     key: "delete"
   }, "Delete user"))));
 };
-exports.WithExtraLongText = WithExtraLongText;
+exports.WithExtraLongText = WithExtraLongText;
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withExtraLongText
+  }
+};

package/lib/cjs/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -24,10 +24,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * to ListItemEditButton.
 */var ListViewItemEditButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_.Box, {
-    ref: ref
+    ref: ref,
+    ml: "sm"
   }, (0, _react2.jsx)(_.IconButton, props, (0, _react2.jsx)(_.Icon, {
     icon: _CreateIcon["default"],
-    size: "sm"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;

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

@@ -209,4 +209,14 @@ export declare const FIGMA_LINKS: {
     editButton: {
         default: string;
     };
+    listViewItem: {
+        default: string;
+        withSubText: string;
+        withImage: string;
+        withControls: string;
+        withRightOfDataSlot: string;
+        withLeftOfDataSlot: string;
+        withCharts: string;
+        withExtraLongText: string;
+    };
 };

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

@@ -215,6 +215,16 @@ var FIGMA_LINKS = {
   },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
+  },
+  listViewItem: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39754&t=r7CoWppWfQQ6G2t8-4',
+    withSubText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39756&t=r7CoWppWfQQ6G2t8-4',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39794&t=r7CoWppWfQQ6G2t8-4',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39816&t=r7CoWppWfQQ6G2t8-4',
+    withRightOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39854&t=r7CoWppWfQQ6G2t8-4',
+    withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -4,6 +4,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { chartData } from './controls/chart/chartData';
 import ListViewItemReadMe from './ListViewItem.mdx';
@@ -44,6 +45,12 @@ export var Default = function Default() {
     }
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem["default"]
+  }
+};
 export var WithSubtext = function WithSubtext() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -53,6 +60,12 @@ export var WithSubtext = function WithSubtext() {
     }
   }));
 };
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withSubText
+  }
+};
 export var WithImage = function WithImage() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -66,13 +79,18 @@ export var WithImage = function WithImage() {
     }
   }));
 };
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withImage
+  }
+};
 export var WithControls = function WithControls() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
       icon: FormSelectIcon,
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, ___EmotionJSX(ListViewItemEditButton, {
     "aria-label": "edit-icon"
   }), ___EmotionJSX(ListViewItemSwitchField, {
@@ -85,6 +103,12 @@ export var WithControls = function WithControls() {
     key: "delete"
   }, "Delete user"))));
 };
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withControls
+  }
+};
 export var WithRightOfDataSlot = function WithRightOfDataSlot() {
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
@@ -113,6 +137,12 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
+WithRightOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withRightOfDataSlot
+  }
+};
 export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = ___EmotionJSX(Box, {
     mx: "sm",
@@ -141,6 +171,12 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
+WithLeftOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withLeftOfDataSlot
+  }
+};
 export var WithCharts = function WithCharts() {
   var containerRef = useRef();
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
@@ -169,6 +205,12 @@ export var WithCharts = function WithCharts() {
     key: "delete"
   }, "Delete user"))));
 };
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withCharts
+  }
+};
 export var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
@@ -197,4 +239,10 @@ export var WithExtraLongText = function WithExtraLongText() {
   }, "Disable user"), ___EmotionJSX(Item, {
     key: "delete"
   }, "Delete user"))));
+};
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem.withExtraLongText
+  }
 };

package/lib/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -13,10 +13,11 @@ import { iconButtonPropTypes } from '../../IconButton/iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListViewItemEditButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, {
-    ref: ref
+    ref: ref,
+    ml: "sm"
   }, ___EmotionJSX(IconButton, props, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: "sm"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = iconButtonPropTypes;

package/lib/utils/designUtils/figmaLinks.js

@@ -208,5 +208,15 @@ export var FIGMA_LINKS = {
   },
   editButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58623-6267&t=pXTSE3YlGbL0X49N-4'
+  },
+  listViewItem: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39754&t=r7CoWppWfQQ6G2t8-4',
+    withSubText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688-39756&t=r7CoWppWfQQ6G2t8-4',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39794&t=r7CoWppWfQQ6G2t8-4',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44691-39816&t=r7CoWppWfQQ6G2t8-4',
+    withRightOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39854&t=r7CoWppWfQQ6G2t8-4',
+    withLeftOfDataSlot: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44693-39909&t=r7CoWppWfQQ6G2t8-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-39944&t=r7CoWppWfQQ6G2t8-4',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44694-40069&t=r7CoWppWfQQ6G2t8-4'
   }
 };

package/package.json

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