@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Shelf/Shelf.story.js

@@ -4,13 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NavigationButtons = exports.DifferingAmounts = exports.Default = exports.ClientSideUpdates = void 0;
+exports.default = exports.TenItems = exports.SingleItem = exports.NoProgress = exports.NavigationHoverFocus = exports.NavigationHover = exports.NavigationFocus = exports.NavigationDisabled = exports.NavigationDefault = exports.ManyItems = exports.FewItems = exports.Default = exports.ClientSideUpdates = exports.CenterAligned = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
 var _Box = require("../Box");
 var _Text = require("../Text");
 var _Shelf = require("./Shelf");
 var _ShelfNavigation = require("./ShelfNavigation");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _excluded = ["amount"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,7 +23,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var _default = exports.default = {
-  title: "Components/Shelf"
+  component: _Shelf.Shelf,
+  title: "Components/Shelf",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A horizontal scrollable shelf container for displaying collections of items."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
 var Demo = function Demo(_ref) {
   var _ref$amount = _ref.amount,
@@ -49,76 +61,232 @@ var Demo = function Demo(_ref) {
   }));
 };
 Demo.displayName = "Demo";
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    maxWidth: 1920,
-    mx: "auto"
-  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4]
-  }, /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, null)));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic shelf component with default settings."
+      }
+    }
+  }
+};
+var CenterAligned = exports.CenterAligned = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       alignItems: "center"
-    }, {
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with items center-aligned vertically."
+      }
+    }
+  }
+};
+var NoProgress = exports.NoProgress = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       showProgress: false
-    }]
-  }, /*#__PURE__*/_react.default.createElement(Demo, null))));
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf without progress indicators."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
-var DifferingAmounts = exports.DifferingAmounts = function DifferingAmounts() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    maxWidth: 1920,
-    mx: "auto"
-  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4]
-  }, /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
+var SingleItem = exports.SingleItem = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       amount: 1
-    }, {
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with a single item."
+      }
+    }
+  }
+};
+var FewItems = exports.FewItems = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       amount: 3
-    }, {
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with few items that don't require scrolling."
+      }
+    }
+  }
+};
+var ManyItems = exports.ManyItems = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       amount: 20
-    }, {
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with many items that require horizontal scrolling."
+      }
+    }
+  }
+};
+var TenItems = exports.TenItems = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/_react.default.createElement(Demo, {
       amount: 10
-    }]
-  }, /*#__PURE__*/_react.default.createElement(Demo, null))));
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with ten items to demonstrate medium-sized collections."
+      }
+    }
+  }
 };
-DifferingAmounts.displayName = "DifferingAmounts";
-var NavigationButtons = exports.NavigationButtons = function NavigationButtons() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
+var NavigationDefault = exports.NavigationDefault = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, null);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default navigation button for shelf."
+      }
+    }
+  }
+};
+var NavigationHover = exports.NavigationHover = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, {
       hover: true
-    }, {
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in hover state."
+      }
+    }
+  }
+};
+var NavigationFocus = exports.NavigationFocus = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, {
       focus: true
-    }, {
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in focus state."
+      }
+    }
+  }
+};
+var NavigationDisabled = exports.NavigationDisabled = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, {
       disabled: true
-    }, {
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in disabled state."
+      }
+    }
+  }
+};
+var NavigationHoverFocus = exports.NavigationHoverFocus = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, {
       hover: true,
       focus: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ShelfNavigation.ShelfNext, null));
-};
-NavigationButtons.displayName = "NavigationButtons";
-var ClientSideUpdates = exports.ClientSideUpdates = function ClientSideUpdates() {
-  var _useState = (0, _react.useState)(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    amount = _useState2[0],
-    setAmount = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(function () {
-      setAmount(Math.floor(Math.random() * Math.floor(15)) + 1);
-    }, 1000);
-    return function () {
-      clearInterval(interval);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("pre", null, "Amount: ", amount), /*#__PURE__*/_react.default.createElement(Demo, {
-    amount: amount
-  }));
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button with both hover and focus states."
+      }
+    }
+  }
 };
-ClientSideUpdates.story = {
+var ClientSideUpdates = exports.ClientSideUpdates = {
+  render: function render() {
+    var _useState = (0, _react.useState)(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      amount = _useState2[0],
+      setAmount = _useState2[1];
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(function () {
+        setAmount(Math.floor(Math.random() * Math.floor(15)) + 1);
+      }, 1000);
+      return function () {
+        clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("pre", null, "Amount: ", amount), /*#__PURE__*/_react.default.createElement(Demo, {
+      amount: amount
+    }));
+  },
   parameters: {
     chromatic: {
       disable: true
+    },
+    docs: {
+      description: {
+        story: "Shelf with client-side updates to demonstrate dynamic content changes."
+      }
     }
   }
 };

package/dist/elements/Shelf/Shelf.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shelf.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_Box","_Text","_Shelf","_ShelfNavigation","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_default","exports","title","Demo","_ref","_ref$amount","amount","rest","createElement","Shelf","map","_","height","j","Box","width","bg","border","borderColor","p","display","alignItems","justifyContent","Text","variant","displayName","Default","maxWidth","mx","States","states","showProgress","DifferingAmounts","NavigationButtons","hover","focus","disabled","ShelfNext","ClientSideUpdates","_useState","useState","_useState2","setAmount","useEffect","interval","setInterval","Math","floor","random","clearInterval","Fragment","story","parameters","chromatic","disable"],"sources":["../../../src/elements/Shelf/Shelf.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Shelf, ShelfProps } from \"./Shelf\"\nimport { ShelfNavigationProps, ShelfNext } from \"./ShelfNavigation\"\n\nexport default {\n  title: \"Components/Shelf\",\n}\n\nconst Demo = ({\n  amount = 25,\n  ...rest\n}: Partial<ShelfProps> & { amount?: number }) => {\n  return (\n    <Shelf {...rest}>\n      {Array.from(Array(amount))\n        .map((_, i) => [300, 250, 200, 333, 400][i % 5])\n        .map((height, j) => (\n          <Box\n            key={j}\n            width={300}\n            height={height}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Text variant=\"sm-display\">{j + 1}</Text>\n          </Box>\n        ))}\n    </Shelf>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps>>\n          states={[{}, { alignItems: \"center\" }, { showProgress: false }]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const DifferingAmounts = () => {\n  return (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <States<Partial<ShelfProps> & { amount: number }>\n          states={[\n            { amount: 1 },\n            { amount: 3 },\n            { amount: 20 },\n            { amount: 10 },\n          ]}\n        >\n          <Demo />\n        </States>\n      </Box>\n    </Box>\n  )\n}\n\nexport const NavigationButtons = () => {\n  return (\n    <States<ShelfNavigationProps>\n      states={[\n        {},\n        { hover: true },\n        { focus: true },\n        { disabled: true },\n        { hover: true, focus: true },\n      ]}\n    >\n      <ShelfNext />\n    </States>\n  )\n}\n\nexport const ClientSideUpdates = () => {\n  const [amount, setAmount] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setAmount(Math.floor(Math.random() * Math.floor(15)) + 1)\n    }, 1000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n\n  return (\n    <>\n      <pre>Amount: {amount}</pre>\n      <Demo amount={amount} />\n    </>\n  )\n}\n\nClientSideUpdates.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Shelf.story.js","names":["_react","_interopRequireWildcard","require","_Box","_Text","_Shelf","_ShelfNavigation","_storybookBlocklist","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_default","exports","component","Shelf","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Demo","_ref","_ref$amount","amount","rest","createElement","map","_","height","j","Box","width","bg","border","borderColor","p","display","alignItems","justifyContent","Text","variant","displayName","Default","render","maxWidth","mx","story","CenterAligned","NoProgress","showProgress","SingleItem","FewItems","ManyItems","TenItems","NavigationDefault","ShelfNext","NavigationHover","hover","NavigationFocus","focus","NavigationDisabled","disabled","NavigationHoverFocus","ClientSideUpdates","_useState","useState","_useState2","setAmount","useEffect","interval","setInterval","Math","floor","random","clearInterval","Fragment","chromatic","disable"],"sources":["../../../src/elements/Shelf/Shelf.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Shelf } from \"./Shelf\"\nimport { ShelfNext } from \"./ShelfNavigation\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Shelf,\n  title: \"Components/Shelf\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A horizontal scrollable shelf container for displaying collections of items.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst Demo = ({ amount = 25, ...rest }: { amount?: number } & any) => {\n  return (\n    <Shelf {...rest}>\n      {Array.from(Array(amount))\n        .map((_, i) => [300, 250, 200, 333, 400][i % 5])\n        .map((height, j) => (\n          <Box\n            key={j}\n            width={300}\n            height={height}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Text variant=\"sm-display\">{j + 1}</Text>\n          </Box>\n        ))}\n    </Shelf>\n  )\n}\n\nexport const Default = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic shelf component with default settings.\",\n      },\n    },\n  },\n}\n\nexport const CenterAligned = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo alignItems=\"center\" />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with items center-aligned vertically.\",\n      },\n    },\n  },\n}\n\nexport const NoProgress = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo showProgress={false} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf without progress indicators.\",\n      },\n    },\n  },\n}\n\nexport const SingleItem = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={1} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with a single item.\",\n      },\n    },\n  },\n}\n\nexport const FewItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={3} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with few items that don't require scrolling.\",\n      },\n    },\n  },\n}\n\nexport const ManyItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={20} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with many items that require horizontal scrolling.\",\n      },\n    },\n  },\n}\n\nexport const TenItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={10} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with ten items to demonstrate medium-sized collections.\",\n      },\n    },\n  },\n}\n\nexport const NavigationDefault = {\n  render: () => <ShelfNext />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default navigation button for shelf.\",\n      },\n    },\n  },\n}\n\nexport const NavigationHover = {\n  render: () => <ShelfNext hover={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in hover state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationFocus = {\n  render: () => <ShelfNext focus={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in focus state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationDisabled = {\n  render: () => <ShelfNext disabled={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in disabled state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationHoverFocus = {\n  render: () => <ShelfNext hover={true} focus={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button with both hover and focus states.\",\n      },\n    },\n  },\n}\n\nexport const ClientSideUpdates = {\n  render: () => {\n    const [amount, setAmount] = useState(1)\n\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setAmount(Math.floor(Math.random() * Math.floor(15)) + 1)\n      }, 1000)\n      return () => {\n        clearInterval(interval)\n      }\n    }, [])\n\n    return (\n      <>\n        <pre>Amount: {amount}</pre>\n        <Demo amount={amount} />\n      </>\n    )\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story:\n          \"Shelf with client-side updates to demonstrate dynamic content changes.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/elements/ShowMore/ShowMore.story.d.ts

@@ -1,12 +1,54 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./ShowMore").ShowMoreProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const Default: {
+    args: {
+        initial: number;
+        children: React.JSX.Element[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Expanded: {
+    args: {
+        initial: number;
+        expanded: boolean;
+        children: React.JSX.Element[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
 export declare const CommaSeparatedList: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };

package/dist/elements/ShowMore/ShowMore.story.js

@@ -3,62 +3,116 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = exports.CommaSeparatedList = void 0;
+exports.default = exports.Expanded = exports.Default = exports.CommaSeparatedList = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _ShowMore = require("./ShowMore");
 var _Text = require("../Text");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/ShowMore"
+  component: _ShowMore.ShowMore,
+  title: "Components/ShowMore",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that shows a limited number of children initially with a toggle to show/hide more."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      expanded: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ShowMore.ShowMore, {
-    initial: 3
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "First"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Second"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Third"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Fourth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Fifth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Sixth")));
+var Default = exports.Default = {
+  args: {
+    initial: 3,
+    children: [/*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 1,
+      variant: "sm-display"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 2,
+      variant: "sm-display"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 3,
+      variant: "sm-display"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 4,
+      variant: "sm-display"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 5,
+      variant: "sm-display"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 6,
+      variant: "sm-display"
+    }, "Sixth")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows first 3 items with a toggle to show/hide more."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
-var CommaSeparatedList = exports.CommaSeparatedList = function CommaSeparatedList() {
-  var artists = ["Monica Kim Garza", "John Houck", "Zemba Luzamba"];
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      expanded: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ShowMore.ShowMore, {
-    initial: 1,
-    variant: "lg",
-    textDecoration: "underline",
-    mt: 1
-  }, artists.map(function (artist, index) {
-    var separator = ", ";
-    if (index === artists.length - 1) {
-      separator = ". ";
+var Expanded = exports.Expanded = {
+  args: {
+    initial: 3,
+    expanded: true,
+    children: [/*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 1,
+      variant: "sm-display"
+    }, "First"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 2,
+      variant: "sm-display"
+    }, "Second"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 3,
+      variant: "sm-display"
+    }, "Third"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 4,
+      variant: "sm-display"
+    }, "Fourth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 5,
+      variant: "sm-display"
+    }, "Fifth"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: 6,
+      variant: "sm-display"
+    }, "Sixth")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ShowMore component in expanded state showing all items."
+      }
     }
-    return /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "lg",
-      as: "span",
-      key: index
-    }, artist, separator);
-  })));
+  }
 };
-CommaSeparatedList.displayName = "CommaSeparatedList";
-CommaSeparatedList.story = {
-  name: "Works with comma-separated list"
+var CommaSeparatedList = exports.CommaSeparatedList = {
+  render: function render() {
+    var artists = ["Monica Kim Garza", "John Houck", "Zemba Luzamba"];
+    return /*#__PURE__*/_react.default.createElement(_ShowMore.ShowMore, {
+      initial: 1,
+      variant: "lg",
+      textDecoration: "underline",
+      mt: 1
+    }, artists.map(function (artist, index) {
+      var separator = ", ";
+      if (index === artists.length - 1) {
+        separator = ". ";
+      }
+      return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "lg",
+        as: "span",
+        key: index
+      }, artist, separator);
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ShowMore with comma-separated text content."
+      }
+    }
+  }
 };
 //# sourceMappingURL=ShowMore.story.js.map