@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/components/SelectField/SelectField.stories.js

@@ -122,9 +122,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SelectFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['OverlayProvider', 'Icon', 'Item', 'Section', 'SelectField']
       }
     }
   },
@@ -216,11 +218,11 @@ export var WithCustomHeight = function WithCustomHeight(args) {
     }, item.name);
   }));
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(SelectField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     labelMode: "float"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -228,6 +230,16 @@ export var FloatLabel = function FloatLabel() {
     key: "yellow"
   }, "Yellow"));
 };
+FloatLabel.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var Controlled = function Controlled() {
   var _useState = useState('yellow'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -248,10 +260,10 @@ export var Controlled = function Controlled() {
     key: "yellow"
   }, "Yellow"));
 };
-export var WithNoneOption = function WithNoneOption() {
-  return ___EmotionJSX(SelectField, {
+export var WithNoneOption = function WithNoneOption(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "none"
   }, "None")), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "red"
@@ -289,11 +301,11 @@ export var WithSlots = function WithSlots() {
     key: "customRange"
   }, "Custom Range"));
 };
-export var DisabledField = function DisabledField() {
-  return ___EmotionJSX(SelectField, {
+export var DisabledField = function DisabledField(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     isDisabled: true
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -301,11 +313,11 @@ export var DisabledField = function DisabledField() {
     key: "yellow"
   }, "Yellow"));
 };
-export var DisabledOptions = function DisabledOptions() {
-  return ___EmotionJSX(SelectField, {
+export var DisabledOptions = function DisabledOptions(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     disabledKeys: ['blue']
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -313,18 +325,18 @@ export var DisabledOptions = function DisabledOptions() {
     key: "yellow"
   }, "Yellow"));
 };
-export var NoOptionsAvailable = function NoOptionsAvailable() {
-  return ___EmotionJSX(SelectField, {
+export var NoOptionsAvailable = function NoOptionsAvailable(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "Select an option...",
     placeholder: "No options available"
-  });
+  }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(SelectField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -332,6 +344,16 @@ export var HelperText = function HelperText() {
     key: "yellow"
   }, "Yellow"));
 };
+HelperText.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var options = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(400)).call(_context2, {
   key: 'string',
   name: 'string'
@@ -408,11 +430,11 @@ export var AsyncLoading = function AsyncLoading() {
     }, item.name);
   }));
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(SelectField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     hasNoStatusIndicator: true
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "none"
   }, "None"), ___EmotionJSX(Item, {
     key: "red"
@@ -422,12 +444,12 @@ export var WithoutStatusIndicator = function WithoutStatusIndicator() {
     key: "yellow"
   }, "Yellow"));
 };
-export var WithHelpHint = function WithHelpHint() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, args, {
     width: "100%",
     hintText: "Example Hint",
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"

package/lib/components/Separator/Separator.stories.js

@@ -35,20 +35,21 @@ Default.parameters = {
     url: FIGMA_LINKS.separator["default"]
   }
 };
-export var verticalSeparator = function verticalSeparator() {
+export var verticalSeparator = function verticalSeparator(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(Box, {
     height: "50px",
     flexDirection: "row",
     alignItems: "center"
-  }, "Lorem ipsum", ___EmotionJSX(Separator, {
+  }, "Lorem ipsum", ___EmotionJSX(Separator, _extends({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum", ___EmotionJSX(Separator, {
+  })), "Lorem ipsum", ___EmotionJSX(Separator, _extends({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum");
+  })), "Lorem ipsum");
 };

package/lib/components/Skeleton/Skeleton.stories.js

@@ -16,6 +16,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SkeletonReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Avatar', 'Box', 'Skeleton', 'Text']
+      }
     }
   },
   argTypes: {
@@ -45,8 +50,8 @@ export var Default = function Default(_ref) {
     mt: "sm"
   }, args)));
 };
-export var inferringDimensions = function inferringDimensions() {
-  var isLoaded = true;
+export var inferringDimensions = function inferringDimensions(args) {
+  var isLoading = true;
   return ___EmotionJSX(Box, {
     width: "200px"
   }, ___EmotionJSX(Box, {
@@ -54,21 +59,21 @@ export var inferringDimensions = function inferringDimensions() {
     isRow: true,
     alignItems: "center",
     gap: "md"
-  }, isLoaded && ___EmotionJSX(Skeleton, {
+  }, isLoading && ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "circular"
-  }, ___EmotionJSX(Avatar, {
+  }), ___EmotionJSX(Avatar, {
     src: pingImg
   })), ___EmotionJSX(Box, {
     flex: "1 1 0"
-  }, ___EmotionJSX(Skeleton, {
+  }, ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "text"
-  }, isLoaded && ___EmotionJSX(Text, {
+  }), isLoading && ___EmotionJSX(Text, {
     variant: "h1"
   }, ".")))), ___EmotionJSX(Box, {
     mb: "sm"
-  }, ___EmotionJSX(Skeleton, {
+  }, ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "rounded"
-  }, isLoaded && ___EmotionJSX(Box, {
+  }), isLoading && ___EmotionJSX(Box, {
     height: 100
   }))));
 };

package/lib/components/SliderField/SliderField.stories.js

@@ -83,21 +83,21 @@ export var Controlled = function Controlled(_ref2) {
     label: loremText
   }));
 };
-export var Vertical = function Vertical() {
-  return ___EmotionJSX(SliderField, {
+export var Vertical = function Vertical(args) {
+  return ___EmotionJSX(SliderField, _extends({}, args, {
     label: loremText,
     orientation: "vertical",
     size: "150px"
-  });
+  }));
 };
-export var MultiThumb = function MultiThumb() {
-  return ___EmotionJSX(SliderField, {
+export var MultiThumb = function MultiThumb(args) {
+  return ___EmotionJSX(SliderField, _extends({}, args, {
     label: loremText,
     isMultiThumb: true,
     defaultValue: [100, 180],
     maxValue: 540,
     minValue: 40
-  });
+  }));
 };
 export var ControlledMultiThumb = function ControlledMultiThumb() {
   var _useState3 = useState([0, 50]),

package/lib/components/Stepper/Stepper.stories.js

@@ -1,12 +1,11 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useRef, useState } from 'react';
-import { Item } from 'react-stately';
 import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
-import { Box, Button, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
+import { Box, Button, Item, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -51,9 +50,12 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(StepperReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'OverlayPanel', 'OverlayProvider', 'PanelHeader', 'PanelHeaderCloseButton', 'Stepper', 'Text', 'Item'],
+        '@pingux/mdi-react/CreationOutlineIcon': 'CreationOutlineIcon'
       }
     }
   }
@@ -226,6 +228,9 @@ export var ControlledStepper = function ControlledStepper() {
     }, item.children)));
   });
 };
+ControlledStepper.parameters = {
+  codesandbox: false
+};
 export var Panel = function Panel() {
   var _useState3 = useState(1),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -278,4 +283,7 @@ export var Panel = function Panel() {
       }, item.children)));
     })))
   );
+};
+Panel.parameters = {
+  codesandbox: false
 };

package/lib/components/SwitchField/SwitchField.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,9 +28,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -53,32 +51,32 @@ export var Controlled = function Controlled() {
     value: "my-switch"
   });
 };
-export var DefaultSelected = function DefaultSelected() {
-  return ___EmotionJSX(SwitchField, {
+export var DefaultSelected = function DefaultSelected(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isDefaultSelected: true,
     label: "Default selected",
     value: "my-switch"
-  });
+  }));
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(SwitchField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isDisabled: true,
     label: "Disabled",
     value: "my-switch"
-  });
+  }));
 };
-export var NoVisibleLabel = function NoVisibleLabel() {
-  return ___EmotionJSX(SwitchField, {
+export var NoVisibleLabel = function NoVisibleLabel(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     "aria-label": "my-label",
     value: "my-switch"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(SwitchField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isRequired: true,
     label: "Required",
     value: "my-switch"
-  });
+  }));
 };
 export var WithTooltip = function WithTooltip() {
   var tooltipTrigger = useRef(null);

package/lib/components/Table/Table.stories.js

@@ -13,7 +13,18 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Table', 'TableBody', 'TableCaption', 'TableCell', 'TableHead', 'TableRow', 'Text']
+      }
+    },
+    controls: {
+      include: ['id']
     }
+  },
+  args: {
+    id: 'table'
   }
 };
 var caption = 'Lorem Ipsum';
@@ -34,8 +45,8 @@ var objects = [{
   additional_grant: '+25,000',
   total_grant: '75,000'
 }];
-export var Default = function Default() {
-  return ___EmotionJSX(Table, null, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
+export var Default = function Default(args) {
+  return ___EmotionJSX(Table, args, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
     fontWeight: 3,
     fontSize: "lg"
   }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {

package/lib/components/Tabs/Tabs.stories.js

@@ -40,9 +40,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TabsReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'Icon', 'Tab', 'Tabs', 'Text']
       }
     }
   }
@@ -85,6 +87,9 @@ export var Controlled = function Controlled() {
     }, item.children);
   });
 };
+Controlled.parameters = {
+  codesandbox: false
+};
 export var Centered = function Centered() {
   return ___EmotionJSX(Tabs, {
     tabListProps: {
@@ -98,6 +103,9 @@ export var Centered = function Centered() {
     }, item.children);
   });
 };
+Centered.parameters = {
+  codesandbox: false
+};
 export var DisabledSingleTab = function DisabledSingleTab() {
   return ___EmotionJSX(Tabs, {
     items: tabs,
@@ -109,6 +117,9 @@ export var DisabledSingleTab = function DisabledSingleTab() {
     }, item.children);
   });
 };
+DisabledSingleTab.parameters = {
+  codesandbox: false
+};
 export var DisabledAllTabs = function DisabledAllTabs() {
   return ___EmotionJSX(Tabs, {
     isDisabled: true,
@@ -120,6 +131,9 @@ export var DisabledAllTabs = function DisabledAllTabs() {
     }, item.children);
   });
 };
+DisabledAllTabs.parameters = {
+  codesandbox: false
+};
 export var ContentSlots = function ContentSlots() {
   var beforeTabNode = ___EmotionJSX(Icon, {
     icon: LockIcon,
@@ -165,6 +179,9 @@ export var ContentSlots = function ContentSlots() {
     }
   }, ___EmotionJSX(Text, null, "Users Matched"))));
 };
+ContentSlots.parameters = {
+  codesandbox: false
+};
 export var WithList = function WithList() {
   var _context;
   var allTabs = _concatInstanceProperty(_context = []).call(_context, tabs, [{
@@ -193,6 +210,9 @@ export var WithList = function WithList() {
     }, item), item.children);
   });
 };
+WithList.parameters = {
+  codesandbox: false
+};
 export var CustomTabLine = function CustomTabLine() {
   return ___EmotionJSX(Tabs, {
     items: tabs
@@ -206,6 +226,9 @@ export var CustomTabLine = function CustomTabLine() {
     }, item.children);
   });
 };
+CustomTabLine.parameters = {
+  codesandbox: false
+};
 export var CustomPanelProps = function CustomPanelProps() {
   return ___EmotionJSX(Tabs, {
     tabPanelProps: {
@@ -220,4 +243,7 @@ export var CustomPanelProps = function CustomPanelProps() {
       "data-testid": "testing-".concat(item.name)
     }, item.children);
   });
+};
+CustomPanelProps.parameters = {
+  codesandbox: false
 };

package/lib/components/Text/Text.stories.js

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Separator, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import TextReadme from './Text.mdx';
@@ -9,36 +11,42 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Text',
   component: Text,
+  decorators: [withDesign],
   parameters: {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Text', 'Separator']
+      }
     }
   },
   argTypes: {
+    as: {
+      control: false
+    },
+    role: {
+      control: false
+    },
     variant: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text variant.'
     },
     children: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text value.'
     },
     color: {
       control: {
-        type: 'none'
+        type: 'text'
       },
       description: 'Text color.'
     },
     bg: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Background color.'
     }
   }
@@ -416,14 +424,17 @@ export var Default = function Default() {
     });
   }))));
 };
-export var CustomWidth = function CustomWidth() {
+Default.parameters = {
+  codesandbox: false
+};
+export var CustomWidth = function CustomWidth(args) {
   return ___EmotionJSX(Box, {
     width: 200
-  }, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, _extends({
     p: "xl"
-  }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
+  }, args), "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
-export var CustomStyle = function CustomStyle() {
+export var CustomStyle = function CustomStyle(args) {
   var textProps = {
     fontFamily: 'times',
     fontSize: 'md',
@@ -437,11 +448,11 @@ export var CustomStyle = function CustomStyle() {
   return ___EmotionJSX(Box, {
     p: "xx",
     gap: "md"
-  }, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(Text, _extends({}, args, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Separator, null), ___EmotionJSX(Text, {
+  }), "The Text component allows typography style props to be passed in directly."), ___EmotionJSX(Text, textProps, loremText), ___EmotionJSX(Separator, null), ___EmotionJSX(Text, _extends({}, args, {
     variant: "title"
-  }, "Typography styles can also be passed in through the sx prop for the same result."), ___EmotionJSX(Text, {
+  }), "Typography styles can also be passed in through the sx prop for the same result."), ___EmotionJSX(Text, {
     sx: textProps
   }, loremText));
 };