@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -928,8 +928,10 @@ declare const _default: {
     popoverMenu: {
         container: {
             transition: string;
-            opacity: number;
-            '&.is-mounted.is-transitioning': {
+            '&.animate': {
+                opacity: number;
+            };
+            '&.animate.is-mounted.is-transitioning': {
                 opacity: string;
             };
         };
@@ -1287,6 +1289,7 @@ declare const _default: {
             backgroundColor: string;
             borderRadius: string;
             fontSize: string;
+            fontFamily: string;
         };
     };
     footer: {

package/lib/cjs/types/tooltipTrigger.d.ts

@@ -36,4 +36,5 @@ export interface TooltipTriggerProps extends DOMAttributes, ReactAriaTooltipTrig
     /** Width applied to the wrapper of the tooltip component. */
     width?: string;
     targetRef?: RefObject<FocusableElement | HTMLElement>;
+    shouldAnimate?: boolean;
 }

package/lib/components/AIComponents/AIPanel/AIPanel.stories.js

@@ -9,7 +9,10 @@ import AIPanelHeader from './AIPanelHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   component: AIPanel,
-  title: 'AI Components/AI Panel'
+  title: 'AI Components/AI Panel',
+  parameters: {
+    codesandbox: false
+  }
 };
 var AIMenuPopover = function AIMenuPopover() {
   var _useState = useState(false),

package/lib/components/AIComponents/Prompt/Prompt.stories.js

@@ -4,7 +4,10 @@ import Prompt from './Prompt';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'AI Components/Prompt',
-  component: Prompt
+  component: Prompt,
+  parameters: {
+    codesandbox: false
+  }
 };
 export var Default = function Default() {
   return ___EmotionJSX(Prompt, null, ___EmotionJSX(Text, null, "Did my number of registrations go up or down in the last month?"));

package/lib/components/AIComponents/PromptInput/PromptInput.stories.js

@@ -25,11 +25,9 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PromptInputReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {
     isLoading: _objectSpread({}, booleanArg),

package/lib/components/AIComponents/Response/Response.stories.js

@@ -22,15 +22,13 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ResponseReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   }
 };
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
-export var Default = function Default(args) {
+export var Default = function Default() {
   var icons = [{
     title: 'Read aloud',
     icon: VolumeHighIcon

package/lib/components/AIComponents/Suggestions/Suggestions.stories.js

@@ -3,7 +3,8 @@ import { AstroWrapper, NextGenTheme, Suggestion, Suggestions } from '../../../in
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Suggestions',
-  component: Suggestions
+  component: Suggestions,
+  codesandbox: false
 };
 var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 export var Default = function Default() {

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -70,7 +70,8 @@ export default {
       mdx: AccordionGridReadme
     }, {
       label: 'Implementation'
-    }]
+    }],
+    codesandbox: false
   },
   argTypes: {
     id: {

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -1,10 +1,9 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
-import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { AccordionGroup, Badge, Box, Button, HelpHint, Text, TextField } from '../../index';
+import { AccordionGroup, Badge, Box, Button, HelpHint, Item, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup';
@@ -53,9 +52,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AccordionReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['AccordionGroup', 'Badge', 'Box', 'Button', 'HelpHint', 'Item', 'Text', 'TextField']
       }
     }
   },
@@ -122,7 +123,8 @@ DifferentLevels.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.accordionGroup.differentLevels
-  }
+  },
+  codesandbox: false
 };
 export var Multiple = function Multiple() {
   return (
@@ -151,7 +153,8 @@ Multiple.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.accordionGroup.multiple
-  }
+  },
+  codesandbox: false
 };
 export var ControlledExpanded = function ControlledExpanded() {
   var _useState = useState(['t3']),
@@ -185,6 +188,9 @@ export var ControlledExpanded = function ControlledExpanded() {
     })
   );
 };
+ControlledExpanded.parameters = {
+  codesandbox: false
+};
 export var UncontrolledExpanded = function UncontrolledExpanded() {
   return (
     /*
@@ -208,6 +214,9 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
     })
   );
 };
+UncontrolledExpanded.parameters = {
+  codesandbox: false
+};
 export var DisabledState = function DisabledState() {
   return (
     /*
@@ -235,7 +244,8 @@ DisabledState.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.accordionGroup.disabledState
-  }
+  },
+  codesandbox: false
 };
 export var CustomPresentation = function CustomPresentation() {
   return (
@@ -273,7 +283,8 @@ CustomPresentation.parameters = {
     description: {
       story: 'In addition to customizing the theme, prop objects can be passed to certain elements. This allows for simple customization in a pinch. See the source code below for an example.'
     }
-  }
+  },
+  codesandbox: false
 };
 export var LabelWithBadge = function LabelWithBadge(args) {
   return ___EmotionJSX(AccordionGroup, _extends({}, args, {
@@ -297,10 +308,10 @@ export var LabelWithBadge = function LabelWithBadge(args) {
     "data-id": "accordionItem"
   }, ___EmotionJSX(Text, null, "Render me!")));
 };
-export var AccordionWithSlot = function AccordionWithSlot(args) {
-  return ___EmotionJSX(AccordionGroup, _extends({
+export var AccordionWithSlot = function AccordionWithSlot() {
+  return ___EmotionJSX(AccordionGroup, {
     labelHeadingTag: "h3"
-  }, args), ___EmotionJSX(Item, {
+  }, ___EmotionJSX(Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -309,4 +320,7 @@ export var AccordionWithSlot = function AccordionWithSlot(args) {
       postHeading: ___EmotionJSX(HelpHint, null, " Text of the popover right here...")
     }
   }, ___EmotionJSX(Text, null, "Render me!")));
+};
+AccordionWithSlot.parameters = {
+  codesandbox: false
 };

package/lib/components/ArrayField/ArrayField.stories.js

@@ -25,15 +25,13 @@ export default {
   title: 'Form/ArrayField',
   component: ArrayField,
   parameters: {
+    codesandbox: false,
     actions: {
       argTypesRegex: '^on.*'
     },
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ArrayFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -79,8 +77,11 @@ var defaultData = [{
 }];
 export var Uncontrolled = function Uncontrolled(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return ___EmotionJSX(ArrayField, _extends({
+  return ___EmotionJSX(ArrayField, {
     defaultValue: defaultData,
+    label: "Array field label",
+    helperText: "Helper text info...",
+    addButtonLabel: "+ Add field",
     labelProps: {
       hintText: 'Example Hint',
       isRequired: true,
@@ -109,7 +110,7 @@ export var Uncontrolled = function Uncontrolled(_ref) {
     sx: {
       width: '400px'
     }
-  }, args));
+  });
 };
 export var Controlled = function Controlled(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
@@ -235,12 +236,11 @@ export var Controlled = function Controlled(_ref2) {
     sx: {
       width: '400px'
     },
-    label: args.label
+    label: "Array field label"
   });
 };
-export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
-  return ___EmotionJSX(ArrayField, _extends({
+export var WithLimitedItemsNumber = function WithLimitedItemsNumber() {
+  return ___EmotionJSX(ArrayField, {
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return ___EmotionJSX(TextField, _extends({
@@ -263,12 +263,14 @@ export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
     sx: {
       width: '400px'
     },
-    maxSize: 3
-  }, args));
+    maxSize: 3,
+    label: "Array field label",
+    helperText: "Helper text info...",
+    addButtonLabel: "+ Add field"
+  });
 };
-export var Customizations = function Customizations(_ref5) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
-  return ___EmotionJSX(ArrayField, _extends({
+export var Customizations = function Customizations() {
+  return ___EmotionJSX(ArrayField, {
     fieldControlWrapperProps: {
       overflowY: 'scroll',
       maxHeight: '150px'
@@ -303,11 +305,13 @@ export var Customizations = function Customizations(_ref5) {
           })
         }
       }, otherFieldProps)));
-    }
-  }, args));
+    },
+    label: "Array field label",
+    helperText: "Helper text info...",
+    addButtonLabel: "+ Add field"
+  });
 };
-export var WithBothSlots = function WithBothSlots(_ref6) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+export var WithBothSlots = function WithBothSlots() {
   var LeftSlot = ___EmotionJSX(Button, {
     "aria-label": "Add field",
     variant: "link",
@@ -330,7 +334,7 @@ export var WithBothSlots = function WithBothSlots(_ref6) {
     variant: "label",
     color: "active"
   }, "Right slot"));
-  return ___EmotionJSX(ArrayField, _extends({
+  return ___EmotionJSX(ArrayField, {
     defaultValue: defaultData,
     sx: {
       width: '450px'
@@ -365,6 +369,9 @@ export var WithBothSlots = function WithBothSlots(_ref6) {
           })
         }
       }, otherFieldProps)));
-    }
-  }, args));
+    },
+    label: "Array field label",
+    helperText: "Helper text info...",
+    addButtonLabel: "+ Add field"
+  });
 };

package/lib/components/AstroProvider/AstroProvider.stories.js

@@ -11,7 +11,8 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AstroProviderReadme, null), ___EmotionJSX(DocsLayout, null));
       }
-    }
+    },
+    codesandbox: false
   },
   decorators: [function (Story) {
     return ___EmotionJSX("div", null, ___EmotionJSX(Story, null));

package/lib/components/Avatar/Avatar.stories.js

@@ -1,6 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Avatar } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
@@ -9,13 +10,11 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Avatar',
   component: Avatar,
+  decorators: [withDesign],
   parameters: {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AvatarReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -24,6 +23,24 @@ export default {
       control: {
         type: 'none'
       }
+    },
+    size: {
+      control: {
+        type: 'text'
+      },
+      description: 'Size of the avatar. Can be a string. like 50px'
+    },
+    alt: {
+      control: {
+        type: 'text'
+      },
+      description: 'Alternative text for the image.'
+    },
+    defaultText: {
+      control: {
+        type: 'text'
+      },
+      description: 'Default text to be displayed when src is not available.'
     }
   },
   args: {

package/lib/components/Badge/Badge.stories.js

@@ -55,12 +55,14 @@ export default {
   },
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BadgeReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'Icon', 'IconButton']
+      }
     }
   }
 };
@@ -105,17 +107,17 @@ Default.parameters = {
     url: FIGMA_LINKS.badge["default"]
   }
 };
-export var CountBadge = function CountBadge() {
+export var CountBadge = function CountBadge(args) {
   return ___EmotionJSX(Box, {
     isRow: true,
     gap: "xs"
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Badge, _extends({}, args, {
     label: "4",
     variant: "countBadge"
-  }), ___EmotionJSX(Badge, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
     label: "4",
     variant: "countNeutral"
-  }));
+  })));
 };
 CountBadge.parameters = {
   design: {
@@ -123,12 +125,12 @@ CountBadge.parameters = {
     url: FIGMA_LINKS.badge.countBadge
   }
 };
-export var BadgeWithCustomColors = function BadgeWithCustomColors() {
-  return ___EmotionJSX(Badge, {
+export var BadgeWithCustomColors = function BadgeWithCustomColors(args) {
+  return ___EmotionJSX(Badge, _extends({}, args, {
     label: "Custom Colors",
     bg: "green",
     textColor: "#ffffff"
-  });
+  }));
 };
 export var BadgeWithIcon = function BadgeWithIcon() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
@@ -179,6 +181,9 @@ export var BadgeWithIcon = function BadgeWithIcon() {
     }
   })));
 };
+BadgeWithIcon.parameters = {
+  codesandbox: false
+};
 export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return ___EmotionJSX(Badge, {
     label: "Badge with Icon Button and Left Slot",
@@ -201,26 +206,25 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   })));
 };
+BadgeWithLeftSlotAndIcon.parameters = {
+  codesandbox: false
+};
 export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({
-    variant: "criticalStatusBadge"
-  }, args, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "criticalStatusBadge",
     label: "Critical",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "warningStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "warningStatusBadge",
     label: "Warning",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "healthyStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "healthyStatusBadge",
     label: "Healthy",
     mb: "lg"
-  })), ___EmotionJSX(Badge, _extends({
-    variant: "activeStatusBadge"
-  }, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "activeStatusBadge",
     label: "Active"
   })));
 };

package/lib/components/Box/Box.stories.js

@@ -17,9 +17,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BoxReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Image', 'Text']
       }
     }
   },
@@ -263,4 +265,7 @@ export var BoxesWithGaps = function BoxesWithGaps() {
     height: 50,
     bg: "decorativeDark.10"
   })));
+};
+BoxesWithGaps.parameters = {
+  codesandbox: false
 };

package/lib/components/Bracket/Bracket.stories.js

@@ -9,20 +9,47 @@ export default {
   component: Bracket,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BracketReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Bracket']
+      }
+    }
+  },
+  argTypes: {
+    isLast: {
+      control: {
+        type: 'boolean'
+      },
+      description: 'If true, the bracket will be displayed as the last one.'
+    },
+    color: {
+      control: {
+        type: 'text'
+      }
+    },
+    variant: {
+      control: false
+    },
+    as: {
+      control: false
+    },
+    role: {
+      control: false
+    },
+    'data-testid': {
+      control: false
     }
   }
 };
-export var Default = function Default() {
+export var Default = function Default(args) {
   return ___EmotionJSX(Box, {
     p: "md",
     ml: "sm"
-  }, ___EmotionJSX(Bracket, null));
+  }, ___EmotionJSX(Bracket, args));
 };
 Default.parameters = {
   design: {

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Item } from 'react-stately';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import { action } from '@storybook/addon-actions';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Breadcrumbs } from '../../index';
+import { Box, Breadcrumbs, Item } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,12 +14,15 @@ export default {
   decorators: [withDesign],
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BreadcrumbsReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Breadcrumbs', 'Item'],
+        '@pingux/mdi-react/ChevronRightIcon': 'ChevronRightIcon'
+      }
     }
   },
   argTypes: {
@@ -109,5 +111,6 @@ Overflowing.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };