@pingux/astro 2.128.1-alpha.0 → 2.129.0-alpha.1

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));
 };

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -29,9 +29,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextAreaFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -99,7 +96,7 @@ var IconSlot = ___EmotionJSX(Box, {
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
-export var WithSlots = function WithSlots(args) {
+export var WithSlots = function WithSlots() {
   return (
     // This is an example of a slot that can be passed into the component
     // const IconSlot = (
@@ -109,18 +106,18 @@ export var WithSlots = function WithSlots(args) {
     //     />
     //   </Box>
     // );
-    ___EmotionJSX(TextAreaField, _extends({}, args, {
+    ___EmotionJSX(TextAreaField, {
       slots: {
         inContainer: IconSlot
       }
-    }))
+    })
   );
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(TextAreaField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     labelMode: "float"
-  });
+  }));
 };
 export var Controlled = function Controlled() {
   var _useState = useState(),
@@ -135,54 +132,54 @@ export var Controlled = function Controlled() {
     value: value
   });
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(TextAreaField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isDisabled: true,
     label: "Example Label",
     value: "This is disabled"
-  });
+  }));
 };
-export var ReadOnly = function ReadOnly() {
-  return ___EmotionJSX(TextAreaField, {
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(TextAreaField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
-export var Rows = function Rows() {
-  return ___EmotionJSX(TextAreaField, {
+export var Rows = function Rows(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     rows: 5
-  });
+  }));
 };
-export var Unresizable = function Unresizable() {
-  return ___EmotionJSX(TextAreaField, {
+export var Unresizable = function Unresizable(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     isUnresizable: true,
     label: "Example label"
-  });
+  }));
 };
-export var Error = function Error() {
-  return ___EmotionJSX(TextAreaField, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(TextAreaField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
-export var MaxLength = function MaxLength() {
-  return ___EmotionJSX(TextAreaField, {
+export var MaxLength = function MaxLength(args) {
+  return ___EmotionJSX(TextAreaField, _extends({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };

package/lib/components/TextField/TextField.stories.js

@@ -33,9 +33,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -74,21 +71,21 @@ export var Default = function Default(_ref) {
     }
   }, args));
 };
-export var SmallVariant = function SmallVariant() {
-  return ___EmotionJSX(TextField, {
+export var SmallVariant = function SmallVariant(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
       variant: 'input.small'
     }
-  });
+  }));
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(TextField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     labelMode: "float"
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -102,18 +99,18 @@ FloatLabel.parameters = {
     }
   }
 };
-export var LeftLabel = function LeftLabel() {
+export var LeftLabel = function LeftLabel(args) {
   return ___EmotionJSX(Box, {
     gap: "xl",
     width: "100%"
-  }, ___EmotionJSX(TextField, {
+  }, ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     labelMode: "left"
-  }), ___EmotionJSX(TextField, {
+  })), ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label that is much longer than the previous one",
     labelMode: "left"
-  }), ___EmotionJSX(TextField, {
+  })), ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example label with set width",
     labelMode: "left",
     containerProps: {
@@ -121,7 +118,7 @@ export var LeftLabel = function LeftLabel() {
         gridTemplateColumns: '120px auto'
       }
     }
-  }));
+  })));
 };
 LeftLabel.parameters = {
   docs: {
@@ -143,30 +140,30 @@ export var Controlled = function Controlled() {
     value: value
   });
 };
-export var Password = function Password() {
-  return ___EmotionJSX(TextField, {
+export var Password = function Password(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     type: "password"
-  });
+  }));
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(TextField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isDisabled: true,
     label: "Example Label"
-  });
+  }));
 };
-export var ReadOnly = function ReadOnly() {
-  return ___EmotionJSX(TextField, {
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isReadOnly: true,
     label: "Example Label",
     value: "This is read only"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(TextField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     isRequired: true,
     label: "Example Label"
-  });
+  }));
 };
 export var DynamicRequired = function DynamicRequired() {
   var _useState3 = useState(''),
@@ -182,37 +179,37 @@ export var DynamicRequired = function DynamicRequired() {
     }
   });
 };
-export var Error = function Error() {
-  return ___EmotionJSX(TextField, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "error"
-  });
+  }));
 };
-export var Success = function Success() {
-  return ___EmotionJSX(TextField, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "success"
-  });
+  }));
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(TextField, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     status: "warning"
-  });
+  }));
 };
-export var WithHelpHint = function WithHelpHint() {
-  return ___EmotionJSX(TextField, {
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"
-  });
+  }));
 };
-export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
-  return ___EmotionJSX(TextField, {
+export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
@@ -220,7 +217,7 @@ export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
     helpHintProps: {
       width: '300px'
     }
-  });
+  }));
 };
 
 // Added to bypass color contrast issue
@@ -234,17 +231,17 @@ WithHelpHintCustomWidth.parameters = {
     }
   }
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(TextField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example Label",
     hasNoStatusIndicator: true
-  });
+  }));
 };
-export var MaxLength = function MaxLength() {
-  return ___EmotionJSX(TextField, {
+export var MaxLength = function MaxLength(args) {
+  return ___EmotionJSX(TextField, _extends({}, args, {
     label: "Example label",
     maxLength: 9
-  });
+  }));
 };
 export var WithSlots = function WithSlots() {
   var _useState5 = useState("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),

package/lib/components/TimeField/TimeField.stories.js

@@ -13,9 +13,6 @@ export default {
       argTypesRegex: '^on.*'
     },
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TimeFieldReadme, null), ___EmotionJSX(DocsLayout, null));
       }
@@ -42,7 +39,7 @@ export var DefaultValue = function DefaultValue(args) {
     defaultValue: "12:30"
   }));
 };
-export var Controlled = function Controlled(args) {
+export var Controlled = function Controlled() {
   var _useState = useState('12:30'),
     _useState2 = _slicedToArray(_useState, 2),
     time = _useState2[0],
@@ -50,11 +47,11 @@ export var Controlled = function Controlled(args) {
   var onChangeHandler = function onChangeHandler(value) {
     return setTime(value.toString());
   };
-  return ___EmotionJSX(TimeField, _extends({}, args, {
+  return ___EmotionJSX(TimeField, {
     "aria-label": "timefield-default",
     value: time,
     onChange: onChangeHandler
-  }));
+  });
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(TimeField, _extends({}, args, {

package/lib/components/TimeZonePicker/TimeZonePicker.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { TimeZonePicker } from '../../index';
@@ -14,17 +15,17 @@ export default {
     }
   }
 };
-export var Default = function Default() {
-  return ___EmotionJSX(TimeZonePicker, {
+export var Default = function Default(args) {
+  return ___EmotionJSX(TimeZonePicker, _extends({}, args, {
     label: "Default Example"
-  });
+  }));
 };
-export var WithCustomTimeZone = function WithCustomTimeZone() {
+export var WithCustomTimeZone = function WithCustomTimeZone(args) {
   var customTimeZone = {
     '(GMT+02:00) Africa/Juba': 'Africa/Juba'
   };
-  return ___EmotionJSX(TimeZonePicker, {
+  return ___EmotionJSX(TimeZonePicker, _extends({}, args, {
     additionalTimeZones: customTimeZone,
     label: "With Custom Time Zone (Africa/Juba)"
-  });
+  }));
 };