@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/ReadMore/ReadMore.story.js

@@ -3,102 +3,145 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithCustomizableTypography2 = exports.WithCustomizableTypography = exports.WithCharacterCap = exports.WithBottomReadMore = exports.ShortContent = exports.CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtml = exports.AsString = void 0;
+exports.default = exports.WithCustomizableTypography2 = exports.WithCustomizableTypography = exports.WithBottomReadMore = exports.ShortContent = exports.Default = exports.CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtml = exports.AsString = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _HTML = require("../HTML");
 var _ReadMore = require("./ReadMore");
 var _Box = require("../Box");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/ReadMore"
-};
-var WithCharacterCap = exports.WithCharacterCap = function WithCharacterCap() {
-  return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+  component: _ReadMore.ReadMore,
+  title: "Components/ReadMore",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that truncates content and provides a 'read more' link to expand the full content."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var Default = exports.Default = {
+  args: {
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
-  });
-};
-WithCharacterCap.displayName = "WithCharacterCap";
-WithCharacterCap.story = {
-  name: "With character cap"
-};
-var ShortContent = exports.ShortContent = function ShortContent() {
-  return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more component with character limit truncation."
+      }
+    }
+  }
+};
+var ShortContent = exports.ShortContent = {
+  args: {
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>"
-  });
-};
-ShortContent.displayName = "ShortContent";
-ShortContent.story = {
-  name: "Short content"
-};
-var AsString = exports.AsString = function AsString() {
-  return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with content shorter than the character limit."
+      }
+    }
+  }
+};
+var AsString = exports.AsString = {
+  args: {
     maxChars: 300,
     content: "Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa."
-  });
-};
-AsString.displayName = "AsString";
-AsString.story = {
-  name: "As string"
-};
-var CharacterCapWithHtml = exports.CharacterCapWithHtml = function CharacterCapWithHtml() {
-  return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with plain string content instead of HTML."
+      }
+    }
+  }
+};
+var CharacterCapWithHtml = exports.CharacterCapWithHtml = {
+  args: {
     maxChars: 300,
     content: "<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>"
-  });
-};
-CharacterCapWithHtml.displayName = "CharacterCapWithHtml";
-CharacterCapWithHtml.story = {
-  name: "Character cap with HTML"
-};
-var WithCustomizableTypography = exports.WithCustomizableTypography = function WithCustomizableTypography() {
-  return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
-    maxChars: 300,
-    content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
-  }));
-};
-WithCustomizableTypography.displayName = "WithCustomizableTypography";
-WithCustomizableTypography.story = {
-  name: "With customizable typography"
-};
-var WithCustomizableTypography2 = exports.WithCustomizableTypography2 = function WithCustomizableTypography2() {
-  return /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
-    variant: "lg"
-  }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
-    maxChars: 300,
-    content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
-  }));
-};
-WithCustomizableTypography2.displayName = "WithCustomizableTypography2";
-WithCustomizableTypography2.story = {
-  name: "With customizable typography (2)"
-};
-var CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtmlDisabled = function CharacterCapWithHtmlDisabled() {
-  return /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Character cap with HTML content."
+      }
+    }
+  }
+};
+var WithCustomizableTypography = exports.WithCustomizableTypography = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+      maxChars: 300,
+      content: "\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ReadMore with customizable typography using HTML wrapper."
+      }
+    }
+  }
+};
+var WithCustomizableTypography2 = exports.WithCustomizableTypography2 = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
+      variant: "lg"
+    }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+      maxChars: 300,
+      content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ReadMore with customizable large typography using HTML wrapper."
+      }
+    }
+  }
+};
+var CharacterCapWithHtmlDisabled = exports.CharacterCapWithHtmlDisabled = {
+  args: {
     disabled: true,
     maxChars: 300,
     content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
-  });
-};
-CharacterCapWithHtmlDisabled.displayName = "CharacterCapWithHtmlDisabled";
-CharacterCapWithHtmlDisabled.story = {
-  name: "Character cap with html (disabled)"
-};
-var WithBottomReadMore = exports.WithBottomReadMore = function WithBottomReadMore() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    textAlign: "center",
-    width: 600
-  }, /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
-    variant: "lg"
-  }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
-    inlineReadMoreLink: false,
-    maxChars: 280,
-    content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
-  })));
-};
-WithBottomReadMore.displayName = "WithBottomReadMore";
-WithBottomReadMore.story = {
-  name: "With bottom placed 'Read More'"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Character cap with HTML content when disabled."
+      }
+    }
+  }
+};
+var WithBottomReadMore = exports.WithBottomReadMore = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      textAlign: "center",
+      width: 600
+    }, /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
+      variant: "lg"
+    }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
+      inlineReadMoreLink: false,
+      maxChars: 280,
+      content: "<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>"
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ReadMore with bottom-placed 'Read More' link."
+      }
+    }
+  }
 };
 //# sourceMappingURL=ReadMore.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.story.js","names":["_react","_interopRequireDefault","require","_HTML","_ReadMore","_Box","obj","__esModule","default","_default","exports","title","WithCharacterCap","createElement","ReadMore","maxChars","content","displayName","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","HTML","WithCustomizableTypography2","variant","CharacterCapWithHtmlDisabled","disabled","WithBottomReadMore","Box","textAlign","width","inlineReadMoreLink"],"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n\nexport const WithBottomReadMore = () => {\n  return (\n    <Box textAlign=\"center\" width={600}>\n      <HTML variant=\"lg\">\n        <ReadMore\n          inlineReadMoreLink={false}\n          maxChars={280}\n          content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n        />\n      </HTML>\n    </Box>\n  )\n}\n\nWithBottomReadMore.story = {\n  name: \"With bottom placed 'Read More'\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReadMore.story.js","names":["_react","_interopRequireDefault","require","_HTML","_ReadMore","_Box","_storybookBlocklist","obj","__esModule","default","_default","exports","component","ReadMore","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","maxChars","content","story","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","render","createElement","HTML","WithCustomizableTypography2","variant","CharacterCapWithHtmlDisabled","disabled","WithBottomReadMore","Box","textAlign","width","inlineReadMoreLink"],"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ReadMore,\n  title: \"Components/ReadMore\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A component that truncates content and provides a 'read more' link to expand the full content.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    maxChars: 300,\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more component with character limit truncation.\",\n      },\n    },\n  },\n}\n\nexport const ShortContent = {\n  args: {\n    maxChars: 300,\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more with content shorter than the character limit.\",\n      },\n    },\n  },\n}\n\nexport const AsString = {\n  args: {\n    maxChars: 300,\n    content:\n      \"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Read more with plain string content instead of HTML.\",\n      },\n    },\n  },\n}\n\nexport const CharacterCapWithHtml = {\n  args: {\n    maxChars: 300,\n    content: `<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Character cap with HTML content.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomizableTypography = {\n  render: () => (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ReadMore with customizable typography using HTML wrapper.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomizableTypography2 = {\n  render: () => (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ReadMore with customizable large typography using HTML wrapper.\",\n      },\n    },\n  },\n}\n\nexport const CharacterCapWithHtmlDisabled = {\n  args: {\n    disabled: true,\n    maxChars: 300,\n    content: `<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Character cap with HTML content when disabled.\",\n      },\n    },\n  },\n}\n\nexport const WithBottomReadMore = {\n  render: () => (\n    <Box textAlign=\"center\" width={600}>\n      <HTML variant=\"lg\">\n        <ReadMore\n          inlineReadMoreLink={false}\n          maxChars={280}\n          content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n        />\n      </HTML>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ReadMore with bottom-placed 'Read More' link.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -1,13 +1,48 @@
 import React from "react";
+import { ResponsiveBoxProps } from "./ResponsiveBox";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<ResponsiveBoxProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const Basic: () => React.JSX.Element;
+export declare const Basic: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
 export declare const MaxWidth100: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ColumnsWithResponsiveImages: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
-export declare const ColumnsWithResponsiveImages: () => React.JSX.Element;

package/dist/elements/ResponsiveBox/ResponsiveBox.story.js

@@ -11,6 +11,7 @@ var _Box = require("../Box");
 var _Text = require("../Text");
 var _Image = require("../Image");
 var _ResponsiveBox = require("./ResponsiveBox");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -83,65 +84,100 @@ var EXAMPLE_MAXIMUMS = [{
   maxWidth: 1024
 }];
 var _default = exports.default = {
-  title: "Components/ResponsiveBox"
+  component: _ResponsiveBox.ResponsiveBox,
+  title: "Components/ResponsiveBox",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A responsive container that maintains aspect ratio and optionally constrains maximum dimensions."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var Basic = exports.Basic = function Basic() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
-    return EXAMPLE_MAXIMUMS.map(function (maximum, j) {
+var Basic = exports.Basic = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
+      return EXAMPLE_MAXIMUMS.map(function (maximum, j) {
+        return /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, _extends({
+          key: [i, j].join(".")
+        }, aspect, maximum, {
+          bg: "brand",
+          my: 2
+        }), /*#__PURE__*/_react.default.createElement(Measure, _extends({}, aspect, maximum)));
+      });
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic responsive boxes with various aspect ratios and maximum dimensions."
+      }
+    }
+  }
+};
+var MaxWidth100 = exports.MaxWidth100 = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
       return /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, _extends({
-        key: [i, j].join(".")
-      }, aspect, maximum, {
+        key: i
+      }, aspect, {
+        maxWidth: "100%",
         bg: "brand",
         my: 2
-      }), /*#__PURE__*/_react.default.createElement(Measure, _extends({}, aspect, maximum)));
-    });
-  }));
-};
-var MaxWidth100 = exports.MaxWidth100 = function MaxWidth100() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, EXAMPLE_ASPECTS.map(function (aspect, i) {
-    return /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, _extends({
-      key: i
-    }, aspect, {
-      maxWidth: "100%",
-      bg: "brand",
-      my: 2
-    }), /*#__PURE__*/_react.default.createElement(Measure, _extends({}, aspect, {
-      maxWidth: "100%"
-    })));
-  }));
-};
-MaxWidth100.story = {
-  name: "maxWidth: 100%"
+      }), /*#__PURE__*/_react.default.createElement(Measure, _extends({}, aspect, {
+        maxWidth: "100%"
+      })));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Responsive boxes constrained to 100% maximum width."
+      }
+    }
+  }
 };
 var Masonry = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "ResponsiveBoxstory__Masonry",
   componentId: "sc-m69kz2-0"
 })(["column-count:3;*{break-inside:avoid;}"]);
-var ColumnsWithResponsiveImages = exports.ColumnsWithResponsiveImages = function ColumnsWithResponsiveImages() {
-  return /*#__PURE__*/_react.default.createElement(Masonry, null, new Array(12).fill(0).map(function (_, i) {
-    var orientation = i % 3 === 0 ? "portrait" : "landscape";
-    var width = orientation === "portrait" ? 200 : 300;
-    var height = orientation === "portrait" ? 300 : 200;
-    return (
-      /*#__PURE__*/
-      // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome
-      _react.default.createElement(_Box.Box, {
-        key: i
-      }, /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, {
-        aspectWidth: width,
-        aspectHeight: height,
-        maxWidth: "100%",
-        bg: "mono10",
-        mb: 2
-      }, /*#__PURE__*/_react.default.createElement(_Image.Image, {
-        lazyLoad: true,
-        width: "100%",
-        height: "100%",
-        src: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height),
-        srcSet: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height, " 1x, https://picsum.photos/seed/").concat(i, "/").concat(width * 2, "/").concat(height * 2, " 2x")
-      })))
-    );
-  }));
+var ColumnsWithResponsiveImages = exports.ColumnsWithResponsiveImages = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Masonry, null, new Array(12).fill(0).map(function (_, i) {
+      var orientation = i % 3 === 0 ? "portrait" : "landscape";
+      var width = orientation === "portrait" ? 200 : 300;
+      var height = orientation === "portrait" ? 300 : 200;
+      return (
+        /*#__PURE__*/
+        // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome
+        _react.default.createElement(_Box.Box, {
+          key: i
+        }, /*#__PURE__*/_react.default.createElement(_ResponsiveBox.ResponsiveBox, {
+          aspectWidth: width,
+          aspectHeight: height,
+          maxWidth: "100%",
+          bg: "mono10",
+          mb: 2
+        }, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+          lazyLoad: true,
+          width: "100%",
+          height: "100%",
+          src: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height),
+          srcSet: "https://picsum.photos/seed/".concat(i, "/").concat(width, "/").concat(height, " 1x, https://picsum.photos/seed/").concat(i, "/").concat(width * 2, "/").concat(height * 2, " 2x")
+        })))
+      );
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Responsive images in a masonry layout with different orientations."
+      }
+    }
+  }
 };
-ColumnsWithResponsiveImages.displayName = "ColumnsWithResponsiveImages";
 //# sourceMappingURL=ResponsiveBox.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.story.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Box","_Text","_Image","_ResponsiveBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","Measure","props","_useState","useState","width","height","_useState2","dimensions","setDimensions","ref","useRef","check","current","offsetWidth","offsetHeight","useEffect","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","Box","p","Text","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","_default","exports","title","Basic","map","aspect","maximum","j","ResponsiveBox","bg","my","MaxWidth100","story","Masonry","styled","withConfig","componentId","ColumnsWithResponsiveImages","fill","_","orientation","mb","Image","lazyLoad","src","concat","srcSet"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default { title: \"Components/ResponsiveBox\" }\n\nexport const Basic = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  )\n}\n\nexport const MaxWidth100 = () => {\n  return (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  )\n}\n\nMaxWidth100.story = {\n  name: \"maxWidth: 100%\",\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = () => {\n  return (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveBox.story.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Box","_Text","_Image","_ResponsiveBox","_storybookBlocklist","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","Measure","props","_useState","useState","width","height","_useState2","dimensions","setDimensions","ref","useRef","check","current","offsetWidth","offsetHeight","useEffect","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","Box","p","Text","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","_default","exports","component","ResponsiveBox","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Basic","render","map","aspect","maximum","j","bg","my","story","MaxWidth100","Masonry","styled","withConfig","componentId","ColumnsWithResponsiveImages","fill","_","orientation","mb","Image","lazyLoad","src","concat","srcSet"],"sources":["../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default {\n  component: ResponsiveBox,\n  title: \"Components/ResponsiveBox\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A responsive container that maintains aspect ratio and optionally constrains maximum dimensions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Basic responsive boxes with various aspect ratios and maximum dimensions.\",\n      },\n    },\n  },\n}\n\nexport const MaxWidth100 = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Responsive boxes constrained to 100% maximum width.\",\n      },\n    },\n  },\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = {\n  render: () => (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Responsive images in a masonry layout with different orientations.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}