@artsy/palette 44.2.0 → 45.0.0-canary.1472.32632.0

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

@@ -4,7 +4,7 @@ export interface ReadMoreProps {
     disabled?: boolean;
     inlineReadMoreLink?: boolean;
     isExpanded?: boolean;
-    maxChars?: number;
+    maxLines?: number;
     onReadLessClicked?: () => void;
     onReadMoreClicked?: () => void;
 }

package/dist/elements/ReadMore/ReadMore.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.ReadMore = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _truncHtml = _interopRequireDefault(require("trunc-html"));
 var _Clickable = require("../Clickable");
 var _Text = require("../Text");
-var _Box = require("../Box");
+var _Theme = require("../../Theme");
 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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -27,69 +27,81 @@ var ReadMore = exports.ReadMore = function ReadMore(_ref) {
     _ref$inlineReadMoreLi = _ref.inlineReadMoreLink,
     inlineReadMoreLink = _ref$inlineReadMoreLi === void 0 ? true : _ref$inlineReadMoreLi,
     isExpanded = _ref.isExpanded,
-    _ref$maxChars = _ref.maxChars,
-    maxChars = _ref$maxChars === void 0 ? Infinity : _ref$maxChars,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? Infinity : _ref$maxLines,
     onReadLessClicked = _ref.onReadLessClicked,
     onReadMoreClicked = _ref.onReadMoreClicked;
-  var _useState = (0, _react.useState)(!!isExpanded),
+  var ref = (0, _react.useRef)(null);
+  var _useTheme = (0, _Theme.useTheme)(),
+    theme = _useTheme.theme;
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
+    isOverflowing = _useState2[0],
+    setIsOverflowing = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    singleLineHeight = _useState4[0],
+    setSingleLineHeight = _useState4[1];
+  var _useState5 = (0, _react.useState)(!!isExpanded),
+    _useState6 = _slicedToArray(_useState5, 2),
+    expanded = _useState6[0],
+    setExpanded = _useState6[1];
+  var maxLinesToShow = expanded ? Infinity : maxLines;
+  var sentinelSpan = "<span data-readmore-sentinel aria-hidden=\"true\" style=\"display:inline-block;width:0;padding:0;margin:0;\">&#8203;</span>";
   if (typeof expandedHTML !== "string") return null;
-  var charCount = expandedHTML.replace(HTML_TAG_REGEX, "").length;
-  var truncatedHTML = (0, _truncHtml.default)(expandedHTML, maxChars).html;
-  var visible = charCount > maxChars;
   var handleClick = function handleClick() {
     if (disabled) return;
     setExpanded(function (expandedState) {
       return !expandedState;
     });
-    expanded ? onReadLessClicked && onReadLessClicked() : onReadMoreClicked && onReadMoreClicked();
+    expanded ? onReadLessClicked === null || onReadLessClicked === void 0 ? void 0 : onReadLessClicked() : onReadMoreClicked === null || onReadMoreClicked === void 0 ? void 0 : onReadMoreClicked();
   };
-  if (!visible) {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: expandedHTML
-      }
-    });
-  }
+  (0, _react.useEffect)(function () {
+    if (!ref.current) return;
+    setIsOverflowing(ref.current.scrollHeight > ref.current.clientHeight);
+    var sentinel = ref.current.querySelector("[data-readmore-sentinel]");
+    if (!sentinel) return;
+    setSingleLineHeight(sentinel.clientHeight);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(Container, {
     "aria-expanded": expanded
-  }, expanded ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+  }, /*#__PURE__*/_react.default.createElement(LineClamp, {
+    ref: ref,
+    lineClamp: maxLinesToShow,
     dangerouslySetInnerHTML: {
-      __html: expandedHTML
+      __html: expanded ? expandedHTML : "".concat(expandedHTML).concat(sentinelSpan)
     }
-  }), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+  }), isOverflowing && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, _extends({
     cursor: "pointer",
     textDecoration: "underline",
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  }, !expanded && inlineReadMoreLink ? {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    background: "linear-gradient(to left, ".concat(theme.colors.mono0, " 0, ").concat(theme.colors.mono0, " calc(100% - ").concat(theme.space[4], "), transparent 100%)"),
+    pl: 4,
+    height: singleLineHeight,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  } : {}), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     fontWeight: "bold"
-  }, "Read less"))) : /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: handleClick
-  }, inlineReadMoreLink ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: truncatedHTML
-    }
-  }), " ") : /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    dangerouslySetInnerHTML: {
-      __html: truncatedHTML
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    as: "span",
-    variant: "xs",
-    fontWeight: "bold",
-    style: {
-      textDecoration: "underline"
-    }
-  }, "Read more")));
+  }, "Read ", expanded ? "less" : "more")));
 };
 ReadMore.displayName = "ReadMore";
 var Container = _styledComponents.default.div.withConfig({
   displayName: "ReadMore__Container",
   componentId: "sc-1bqy0ya-0"
-})(["> * > span > *:last-child{display:inherit;}"]);
+})(["position:relative;"]);
 Container.displayName = "Container";
-var HTML_TAG_REGEX = /(<([^>]+)>)/gi;
+var LineClamp = _styledComponents.default.div.withConfig({
+  displayName: "ReadMore__LineClamp",
+  componentId: "sc-1bqy0ya-1"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";line-clamp:", ";overflow:hidden;"], function (props) {
+  return props.lineClamp;
+}, function (props) {
+  return props.lineClamp;
+});
 //# sourceMappingURL=ReadMore.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReadMore.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_truncHtml","_Clickable","_Text","_Box","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","ReadMore","exports","_ref","expandedHTML","content","disabled","_ref$inlineReadMoreLi","inlineReadMoreLink","isExpanded","_ref$maxChars","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","_useState","useState","_useState2","expanded","setExpanded","charCount","replace","HTML_TAG_REGEX","truncatedHTML","truncate","html","visible","handleClick","expandedState","createElement","dangerouslySetInnerHTML","__html","Container","Fragment","Box","Clickable","cursor","textDecoration","onClick","Text","variant","fontWeight","as","style","displayName","styled","div","withConfig","componentId"],"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  inlineReadMoreLink?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n  content: expandedHTML,\n  disabled,\n  inlineReadMoreLink = true,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") return null\n\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container aria-expanded={expanded}>\n      {expanded ? (\n        <>\n          <Box dangerouslySetInnerHTML={{ __html: expandedHTML }} />\n\n          <Clickable\n            cursor=\"pointer\"\n            textDecoration=\"underline\"\n            onClick={handleClick}\n          >\n            <Text variant=\"xs\" fontWeight=\"bold\">\n              Read less\n            </Text>\n          </Clickable>\n        </>\n      ) : (\n        <Clickable onClick={handleClick}>\n          {inlineReadMoreLink ? (\n            <>\n              <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{\" \"}\n            </>\n          ) : (\n            <Box dangerouslySetInnerHTML={{ __html: truncatedHTML }} />\n          )}\n\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            fontWeight=\"bold\"\n            style={{ textDecoration: \"underline\" }}\n          >\n            Read more\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  > * > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n"],"mappings":"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"}
+{"version":3,"file":"ReadMore.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Clickable","_Text","_Theme","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","ReadMore","exports","_ref","expandedHTML","content","disabled","_ref$inlineReadMoreLi","inlineReadMoreLink","isExpanded","_ref$maxLines","maxLines","Infinity","onReadLessClicked","onReadMoreClicked","ref","useRef","_useTheme","useTheme","theme","_useState","useState","_useState2","isOverflowing","setIsOverflowing","_useState3","_useState4","singleLineHeight","setSingleLineHeight","_useState5","_useState6","expanded","setExpanded","maxLinesToShow","sentinelSpan","handleClick","expandedState","useEffect","current","scrollHeight","clientHeight","sentinel","querySelector","createElement","Container","LineClamp","lineClamp","dangerouslySetInnerHTML","__html","concat","Clickable","cursor","textDecoration","onClick","position","bottom","right","background","colors","mono0","space","pl","height","display","alignItems","justifyContent","Text","variant","fontWeight","displayName","styled","div","withConfig","componentId","props"],"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  inlineReadMoreLink?: boolean\n  isExpanded?: boolean\n  maxLines?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n  content: expandedHTML,\n  disabled,\n  inlineReadMoreLink = true,\n  isExpanded,\n  maxLines = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  const { theme } = useTheme()\n\n  const [isOverflowing, setIsOverflowing] = useState(false)\n  const [singleLineHeight, setSingleLineHeight] = useState(0)\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  const maxLinesToShow = expanded ? Infinity : maxLines\n  const sentinelSpan = `<span data-readmore-sentinel aria-hidden=\"true\" style=\"display:inline-block;width:0;padding:0;margin:0;\">&#8203;</span>`\n\n  if (typeof expandedHTML !== \"string\") return null\n\n  const handleClick = () => {\n    if (disabled) return\n\n    setExpanded((expandedState) => !expandedState)\n\n    expanded ? onReadLessClicked?.() : onReadMoreClicked?.()\n  }\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    setIsOverflowing(ref.current.scrollHeight > ref.current.clientHeight)\n\n    const sentinel = ref.current.querySelector(\"[data-readmore-sentinel]\")\n    if (!sentinel) return\n\n    setSingleLineHeight(sentinel.clientHeight)\n  }, [])\n\n  return (\n    <Container aria-expanded={expanded}>\n      <LineClamp\n        ref={ref}\n        lineClamp={maxLinesToShow}\n        dangerouslySetInnerHTML={{\n          __html: expanded ? expandedHTML : `${expandedHTML}${sentinelSpan}`,\n        }}\n      />\n\n      {isOverflowing && (\n        <Clickable\n          cursor=\"pointer\"\n          textDecoration=\"underline\"\n          onClick={handleClick}\n          {...(!expanded && inlineReadMoreLink\n            ? {\n                position: \"absolute\",\n                bottom: 0,\n                right: 0,\n                background: `linear-gradient(to left, ${theme.colors.mono0} 0, ${theme.colors.mono0} calc(100% - ${theme.space[4]}), transparent 100%)`,\n                pl: 4,\n                height: singleLineHeight,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n              }\n            : {})}\n        >\n          <Text variant=\"xs\" fontWeight=\"bold\">\n            Read {expanded ? \"less\" : \"more\"}\n          </Text>\n        </Clickable>\n      )}\n    </Container>\n  )\n}\n\nconst Container = styled.div`\n  position: relative;\n`\n\nContainer.displayName = \"Container\"\n\nconst LineClamp = styled.div<{ lineClamp: number }>`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: ${(props) => props.lineClamp};\n  line-clamp: ${(props) => props.lineClamp};\n  overflow: hidden;\n`\n"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ declare const _default: {
 export default _default;
 export declare const Default: {
     args: {
-        maxChars: number;
+        maxLines: number;
         content: string;
     };
     parameters: {
@@ -30,7 +30,7 @@ export declare const Default: {
 };
 export declare const ShortContent: {
     args: {
-        maxChars: number;
+        maxLines: number;
         content: string;
     };
     parameters: {
@@ -43,7 +43,7 @@ export declare const ShortContent: {
 };
 export declare const AsString: {
     args: {
-        maxChars: number;
+        maxLines: number;
         content: string;
     };
     parameters: {
@@ -56,7 +56,7 @@ export declare const AsString: {
 };
 export declare const CharacterCapWithHtml: {
     args: {
-        maxChars: number;
+        maxLines: number;
         content: string;
     };
     parameters: {
@@ -90,7 +90,7 @@ export declare const WithCustomizableTypography2: {
 export declare const CharacterCapWithHtmlDisabled: {
     args: {
         disabled: boolean;
-        maxChars: number;
+        maxLines: number;
         content: string;
     };
     parameters: {

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

@@ -27,7 +27,7 @@ var _default = exports.default = {
 };
 var Default = exports.Default = {
   args: {
-    maxChars: 300,
+    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>"
   },
   parameters: {
@@ -40,7 +40,7 @@ var Default = exports.Default = {
 };
 var ShortContent = exports.ShortContent = {
   args: {
-    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>.\n        </div>"
   },
   parameters: {
@@ -53,7 +53,7 @@ var ShortContent = exports.ShortContent = {
 };
 var AsString = exports.AsString = {
   args: {
-    maxChars: 300,
+    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."
   },
   parameters: {
@@ -66,7 +66,7 @@ var AsString = exports.AsString = {
 };
 var CharacterCapWithHtml = exports.CharacterCapWithHtml = {
   args: {
-    maxChars: 300,
+    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>"
   },
   parameters: {
@@ -80,7 +80,7 @@ var CharacterCapWithHtml = exports.CharacterCapWithHtml = {
 var WithCustomizableTypography = exports.WithCustomizableTypography = {
   render: function render() {
     return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
-      maxChars: 300,
+      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>"
     }));
   },
@@ -97,7 +97,7 @@ var WithCustomizableTypography2 = exports.WithCustomizableTypography2 = {
     return /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
       variant: "lg"
     }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
-      maxChars: 300,
+      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>"
     }));
   },
@@ -112,7 +112,7 @@ var WithCustomizableTypography2 = exports.WithCustomizableTypography2 = {
 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>"
   },
   parameters: {
@@ -132,7 +132,7 @@ var WithBottomReadMore = exports.WithBottomReadMore = {
       variant: "lg"
     }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
       inlineReadMoreLink: false,
-      maxChars: 280,
+      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>"
     })));
   },

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

@@ -1 +1 @@
-{"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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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "44.2.0",
+  "version": "45.0.0-canary.1472.32632.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -191,5 +191,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "58ad38c0fa36bda2bdd6905500f06016b70f2eb2"
+  "gitHead": "6fd6954f5cbcfaaf8633ad5a5281d916573070b5"
 }