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

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/index.js

@@ -10,6 +10,8 @@ export { default as AccordionGroup } from './components/AccordionGroup';
 export * from './components/AccordionGroup';
 export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
+export { default as AIPanel } from './components/AIComponents/AIPanel/AIPanel';
+export { default as AIPanelHeader } from './components/AIComponents/AIPanel/AIPanelHeader';
 export { default as Prompt } from './components/AIComponents/Prompt';
 export { default as Response } from './components/AIComponents/Response';
 export { default as ResponseAttachment } from './components/AIComponents/Response/ResponseAttachment';

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -9,5 +9,5 @@ export var componentSpecificNextGenBlacklist = {
   TextField: ['Success'],
   OverlayPanel: ['Expandable']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'Response'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/variants/button.js

@@ -153,6 +153,33 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
+  maxWidth: 'fit-content',
+  gap: 'sm',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'text.primary',
+  path: {
+    fill: 'text.primary'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: '#d5dfe8 !important',
+    path: {
+      fill: 'dark'
+    }
+  }
+});
 var baseIconButton = {
   cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
@@ -274,6 +301,7 @@ var buttons = {
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton
+  modalCloseButton: modalCloseButton,
+  aiChat: aiChat
 };
 export default buttons;

package/lib/styles/themes/next-gen/variants/text.js

@@ -48,7 +48,7 @@ var hTags = {
     fontSize: 'xs'
   }
 };
-export var text = _objectSpread({
+export var text = _objectSpread(_objectSpread({
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -58,6 +58,12 @@ export var text = _objectSpread({
     fontWeight: '1',
     letterSpacing: '1px'
   },
+  suggestion: {
+    fontSize: 'md',
+    fontFamily: 'standard',
+    color: 'text.primary',
+    lineHeight: '24px'
+  },
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -94,4 +100,11 @@ export var text = _objectSpread({
       display: 'list-item'
     }
   }
-}, hTags);
+}, hTags), {}, {
+  aiPanelHeader: {
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontSize: 'lg',
+    fontWeight: 2
+  }
+});

package/lib/styles/themes/next-gen/variants/variants.js

@@ -257,7 +257,42 @@ var dataTable = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'background.base',
+    border: 'none'
+  },
+  aiPanelContainer: {
+    backgroundColor: 'background.base',
+    border: 'none',
+    borderLeft: 'none',
+    position: 'fixed',
+    overflowY: 'scroll',
+    top: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+    display: 'flex !important',
+    opacity: 0,
+    right: '-50%',
+    transition: 'all 500ms',
+    maxWidth: '100%',
+    p: 'lg',
+    '&.is-small': {
+      width: '420px'
+    },
+    '&.is-full': {
+      width: 'container.full'
+    },
+    '&.is-open.is-transitioning': {
+      right: 0,
+      opacity: 1
+    }
+  },
+  body: {
+    gap: 'md',
+    minHeight: '100%',
+    maxWidth: '768px',
+    alignSelf: 'center'
   },
   innerPanel: {
     backgroundColor: 'background.base'

package/lib/types/aiPanel.js

@@ -0,0 +1 @@
+export {};

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.3",
+  "version": "2.104.0-alpha.5",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",