@artsy/palette 44.1.0 → 45.0.0-canary.1472.32632.0

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

@@ -1,53 +1,113 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./ReadMore").ReadMoreProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const WithCharacterCap: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const Default: {
+    args: {
+        maxLines: number;
+        content: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const ShortContent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        maxLines: number;
+        content: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const AsString: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        maxLines: number;
+        content: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const CharacterCapWithHtml: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        maxLines: number;
+        content: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const WithCustomizableTypography: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const WithCustomizableTypography2: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const CharacterCapWithHtmlDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        disabled: boolean;
+        maxLines: number;
+        content: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const WithBottomReadMore: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };

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, {
-    maxChars: 300,
+  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: {
+    maxLines: 2,
     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, {
-    maxChars: 300,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more component with character limit truncation."
+      }
+    }
+  }
+};
+var ShortContent = exports.ShortContent = {
+  args: {
+    maxLines: 3,
     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, {
-    maxChars: 300,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with content shorter than the character limit."
+      }
+    }
+  }
+};
+var AsString = exports.AsString = {
+  args: {
+    maxLines: 2,
     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, {
-    maxChars: 300,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Read more with plain string content instead of HTML."
+      }
+    }
+  }
+};
+var CharacterCapWithHtml = exports.CharacterCapWithHtml = {
+  args: {
+    maxLines: 2,
     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, {
+      maxLines: 3,
+      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, {
+      maxLines: 3,
+      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,
+    maxLines: 3,
     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,
+      maxLines: 3,
+      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","maxLines","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    maxLines: 2,\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    maxLines: 3,\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    maxLines: 2,\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    maxLines: 2,\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        maxLines={3}\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        maxLines={3}\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    maxLines: 3,\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          maxLines={3}\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;