@pingux/astro 2.175.0 → 2.176.0-alpha.0

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -122,12 +122,13 @@ var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
 }, (0, _react2.jsx)(_index.Icon, {
   icon: _PlusIcon["default"],
   size: "sm"
-}))), (0, _react2.jsx)(_index.Text, {
+}))), (0, _react2.jsx)(_index.Text, null, (0, _react2.jsx)(_index.Text, {
   fontSize: "sm",
   color: "text.secondary",
   fontWeight: 0,
-  width: "800px"
-}, description, (0, _react2.jsx)(_index.Link, {
+  width: "800px",
+  display: "contents"
+}, description), (0, _react2.jsx)(_index.Link, {
   href: "https://uilibrary.ping-eng.com/",
   sx: {
     fontSize: '13px'

package/lib/cjs/recipes/ScrollableListView.stories.js

@@ -75,6 +75,7 @@ var ScrollableListView = exports.ScrollableListView = function ScrollableListVie
     filterItems(input);
   };
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
+    label: "Search",
     value: value,
     onChange: onChangeInput
   }), (0, _react2.jsx)(_index.ScrollBox, {

package/lib/cjs/styles/themeOverrides/stories/SearchField.chromatic.stories.js

@@ -18,6 +18,7 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = function Default() {
   return (0, _react2.jsx)(_index.SearchField, {
+    label: "Example",
     icon: _SearchIcon["default"],
     onSubmit: function onSubmit(text) {
       return alert(text);

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

@@ -277,7 +277,7 @@ var overlayPanel = {
   body: {
     gap: 'md',
     minHeight: '100%',
-    maxWidth: '768px',
+    maxWidth: '100%',
     alignSelf: 'center'
   },
   innerPanel: {

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

@@ -26,7 +26,9 @@ var itemArray = [{
 }, {
   key: 't3',
   label: 'Third Accordion',
-  children: ___EmotionJSX(TextField, null)
+  children: ___EmotionJSX(TextField, {
+    label: "Label"
+  })
 }];
 var itemArrayDisabled = [{
   key: 't1',

package/lib/components/SearchNav/SearchNav.chromatic.stories.js

@@ -36,7 +36,7 @@ var items = [{
   children: ___EmotionJSX(Text, null, "Integration")
 }];
 export var Default = function Default() {
-  var _items$find, _items$find2, _items$find3;
+  var _items$find;
   var _useState = useState('Access'),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKey = _useState2[0],
@@ -58,7 +58,20 @@ export var Default = function Default() {
     p: "sm"
   }, (_items$find = _findInstanceProperty(items).call(items, function (item) {
     return item.key === selectedKey;
-  })) === null || _items$find === void 0 ? void 0 : _items$find.children)), ___EmotionJSX(Box, {
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children)));
+};
+export var MediumWidth = function MediumWidth() {
+  var _items$find2;
+  var _useState3 = useState('Access'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKey = _useState4[0],
+    setSelectedKey = _useState4[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Box, {
     maxWidth: "400px"
   }, ___EmotionJSX(SearchNav, {
     items: items,
@@ -70,7 +83,20 @@ export var Default = function Default() {
     p: "sm"
   }, (_items$find2 = _findInstanceProperty(items).call(items, function (item) {
     return item.key === selectedKey;
-  })) === null || _items$find2 === void 0 ? void 0 : _items$find2.children)), ___EmotionJSX(Box, {
+  })) === null || _items$find2 === void 0 ? void 0 : _items$find2.children)));
+};
+export var SmallWidth = function SmallWidth() {
+  var _items$find3;
+  var _useState5 = useState('Access'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Box, {
     maxWidth: "200px"
   }, ___EmotionJSX(SearchNav, {
     items: items,

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

@@ -96,7 +96,7 @@ var IconSlot = ___EmotionJSX(Box, {
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
-export var WithSlots = function WithSlots() {
+export var WithSlots = function WithSlots(args) {
   return (
     // This is an example of a slot that can be passed into the component
     // const IconSlot = (
@@ -106,11 +106,11 @@ export var WithSlots = function WithSlots() {
     //     />
     //   </Box>
     // );
-    ___EmotionJSX(TextAreaField, {
+    ___EmotionJSX(TextAreaField, _extends({}, args, {
       slots: {
         inContainer: IconSlot
       }
-    })
+    }))
   );
 };
 export var FloatLabel = function FloatLabel(args) {

package/lib/recipes/ListAndPanel.stories.js

@@ -110,12 +110,13 @@ var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
 }, ___EmotionJSX(Icon, {
   icon: PlusIcon,
   size: "sm"
-}))), ___EmotionJSX(Text, {
+}))), ___EmotionJSX(Text, null, ___EmotionJSX(Text, {
   fontSize: "sm",
   color: "text.secondary",
   fontWeight: 0,
-  width: "800px"
-}, description, ___EmotionJSX(Link, {
+  width: "800px",
+  display: "contents"
+}, description), ___EmotionJSX(Link, {
   href: "https://uilibrary.ping-eng.com/",
   sx: {
     fontSize: '13px'

package/lib/recipes/ScrollableListView.stories.js

@@ -63,6 +63,7 @@ export var ScrollableListView = function ScrollableListView() {
     filterItems(input);
   };
   return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
+    label: "Search",
     value: value,
     onChange: onChangeInput
   }), ___EmotionJSX(ScrollBox, {

package/lib/styles/themeOverrides/stories/SearchField.chromatic.stories.js

@@ -10,6 +10,7 @@ export default {
 };
 export var Default = function Default() {
   return ___EmotionJSX(SearchField, {
+    label: "Example",
     icon: SearchIcon,
     onSubmit: function onSubmit(text) {
       return alert(text);

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

@@ -267,7 +267,7 @@ var overlayPanel = {
   body: {
     gap: 'md',
     minHeight: '100%',
-    maxWidth: '768px',
+    maxWidth: '100%',
     alignSelf: 'center'
   },
   innerPanel: {

package/package.json

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