@artsy/palette 45.0.0-canary.1472.32647.0 → 45.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/ReadMore/ReadMore.d.ts +1 -2
- package/dist/elements/ReadMore/ReadMore.js +27 -17
- package/dist/elements/ReadMore/ReadMore.js.map +1 -1
- package/dist/elements/ReadMore/ReadMore.story.d.ts +2 -0
- package/dist/elements/ReadMore/ReadMore.story.js +6 -0
- package/dist/elements/ReadMore/ReadMore.story.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,10 +3,9 @@ export interface ReadMoreProps {
|
|
|
3
3
|
content: string;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
inlineReadMoreLink?: boolean;
|
|
6
|
-
|
|
6
|
+
defaultExpanded?: boolean;
|
|
7
7
|
maxLines?: number;
|
|
8
8
|
onReadLessClicked?: () => void;
|
|
9
9
|
onReadMoreClicked?: () => void;
|
|
10
10
|
}
|
|
11
|
-
/** ReadMore */
|
|
12
11
|
export declare const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>>;
|
|
@@ -10,6 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _Clickable = require("../Clickable");
|
|
11
11
|
var _Text = require("../Text");
|
|
12
12
|
var _Theme = require("../../Theme");
|
|
13
|
+
var _Box = require("../Box");
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
15
|
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); }
|
|
15
16
|
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; }
|
|
@@ -20,13 +21,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
20
21
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
21
22
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
22
23
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
-
/** ReadMore */
|
|
24
24
|
var ReadMore = exports.ReadMore = function ReadMore(_ref) {
|
|
25
25
|
var expandedHTML = _ref.content,
|
|
26
26
|
disabled = _ref.disabled,
|
|
27
27
|
_ref$inlineReadMoreLi = _ref.inlineReadMoreLink,
|
|
28
28
|
inlineReadMoreLink = _ref$inlineReadMoreLi === void 0 ? true : _ref$inlineReadMoreLi,
|
|
29
|
-
|
|
29
|
+
defaultExpanded = _ref.defaultExpanded,
|
|
30
30
|
_ref$maxLines = _ref.maxLines,
|
|
31
31
|
maxLines = _ref$maxLines === void 0 ? Infinity : _ref$maxLines,
|
|
32
32
|
onReadLessClicked = _ref.onReadLessClicked,
|
|
@@ -36,43 +36,52 @@ var ReadMore = exports.ReadMore = function ReadMore(_ref) {
|
|
|
36
36
|
theme = _useTheme.theme;
|
|
37
37
|
var _useState = (0, _react.useState)(false),
|
|
38
38
|
_useState2 = _slicedToArray(_useState, 2),
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
overflowing = _useState2[0],
|
|
40
|
+
setOverflowing = _useState2[1];
|
|
41
41
|
var _useState3 = (0, _react.useState)(0),
|
|
42
42
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
43
43
|
singleLineHeight = _useState4[0],
|
|
44
44
|
setSingleLineHeight = _useState4[1];
|
|
45
|
-
var _useState5 = (0, _react.useState)(!!
|
|
45
|
+
var _useState5 = (0, _react.useState)(!!defaultExpanded),
|
|
46
46
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
47
47
|
expanded = _useState6[0],
|
|
48
48
|
setExpanded = _useState6[1];
|
|
49
49
|
var maxLinesToShow = expanded ? Infinity : maxLines;
|
|
50
|
-
var sentinelSpan = "<span data-readmore-sentinel aria-hidden=\"true\" style=\"display:inline-block;width:0;padding:0;margin:0;\">​</span>";
|
|
51
|
-
if (typeof expandedHTML !== "string") return null;
|
|
52
50
|
var handleClick = function handleClick() {
|
|
53
51
|
if (disabled) return;
|
|
54
|
-
setExpanded(function (
|
|
55
|
-
|
|
52
|
+
setExpanded(function (prevExpanded) {
|
|
53
|
+
var nextExpanded = !prevExpanded;
|
|
54
|
+
nextExpanded ? onReadMoreClicked === null || onReadMoreClicked === void 0 ? void 0 : onReadMoreClicked() : onReadLessClicked === null || onReadLessClicked === void 0 ? void 0 : onReadLessClicked();
|
|
55
|
+
return nextExpanded;
|
|
56
56
|
});
|
|
57
|
-
expanded ? onReadLessClicked === null || onReadLessClicked === void 0 ? void 0 : onReadLessClicked() : onReadMoreClicked === null || onReadMoreClicked === void 0 ? void 0 : onReadMoreClicked();
|
|
58
57
|
};
|
|
59
|
-
|
|
60
|
-
if (!ref.current) return;
|
|
61
|
-
|
|
58
|
+
var handleResize = function handleResize() {
|
|
59
|
+
if (!ref.current) return false;
|
|
60
|
+
var shouldExpand = ref.current.scrollHeight > ref.current.clientHeight;
|
|
61
|
+
setOverflowing(shouldExpand);
|
|
62
62
|
var sentinel = ref.current.querySelector("[data-readmore-sentinel]");
|
|
63
|
-
if (!sentinel) return;
|
|
63
|
+
if (!sentinel) return shouldExpand;
|
|
64
64
|
setSingleLineHeight(sentinel.clientHeight);
|
|
65
|
+
return shouldExpand;
|
|
66
|
+
};
|
|
67
|
+
var initialized = (0, _react.useRef)(false);
|
|
68
|
+
(0, _react.useEffect)(function () {
|
|
69
|
+
if (initialized.current) return;
|
|
70
|
+
var shouldExpand = handleResize();
|
|
71
|
+
if (!shouldExpand) setExpanded(true);
|
|
72
|
+
initialized.current = true;
|
|
65
73
|
}, []);
|
|
66
74
|
return /*#__PURE__*/_react.default.createElement(Container, {
|
|
67
75
|
"aria-expanded": expanded
|
|
68
76
|
}, /*#__PURE__*/_react.default.createElement(LineClamp, {
|
|
69
77
|
ref: ref,
|
|
70
78
|
lineClamp: maxLinesToShow
|
|
71
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
80
|
+
position: "relative",
|
|
72
81
|
dangerouslySetInnerHTML: {
|
|
73
|
-
__html: expanded ? expandedHTML : "".concat(expandedHTML).concat(
|
|
82
|
+
__html: expanded ? expandedHTML : "".concat(expandedHTML).concat(SENTINEL)
|
|
74
83
|
}
|
|
75
|
-
})),
|
|
84
|
+
})), overflowing && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, _extends({
|
|
76
85
|
cursor: "pointer",
|
|
77
86
|
textDecoration: "underline",
|
|
78
87
|
onClick: handleClick
|
|
@@ -92,6 +101,7 @@ var ReadMore = exports.ReadMore = function ReadMore(_ref) {
|
|
|
92
101
|
}, "Read ", expanded ? "less" : "more")));
|
|
93
102
|
};
|
|
94
103
|
ReadMore.displayName = "ReadMore";
|
|
104
|
+
var SENTINEL = "<span data-readmore-sentinel aria-hidden=\"true\" style=\"display:block;width:0;padding:0;margin:0;position:absolute;bottom:0;right:0;\">​</span>";
|
|
95
105
|
var Container = _styledComponents.default.div.withConfig({
|
|
96
106
|
displayName: "ReadMore__Container",
|
|
97
107
|
componentId: "sc-1bqy0ya-0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;\">​</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 ref={ref} lineClamp={maxLinesToShow}>\n {/* LineClamp's `display` causes stacking of margins. Nested div ensures internal margins collapse. */}\n <div\n dangerouslySetInnerHTML={{\n __html: expanded ? expandedHTML : `${expandedHTML}${sentinelSpan}`,\n }}\n />\n </LineClamp>\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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"}
|
|
1
|
+
{"version":3,"file":"ReadMore.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Clickable","_Text","_Theme","_Box","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","defaultExpanded","_ref$maxLines","maxLines","Infinity","onReadLessClicked","onReadMoreClicked","ref","useRef","_useTheme","useTheme","theme","_useState","useState","_useState2","overflowing","setOverflowing","_useState3","_useState4","singleLineHeight","setSingleLineHeight","_useState5","_useState6","expanded","setExpanded","maxLinesToShow","handleClick","prevExpanded","nextExpanded","handleResize","current","shouldExpand","scrollHeight","clientHeight","sentinel","querySelector","initialized","useEffect","createElement","Container","LineClamp","lineClamp","Box","position","dangerouslySetInnerHTML","__html","concat","SENTINEL","Clickable","cursor","textDecoration","onClick","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\"\nimport { Box } from \"../Box\"\n\nexport interface ReadMoreProps {\n content: string\n disabled?: boolean\n inlineReadMoreLink?: boolean\n defaultExpanded?: boolean\n maxLines?: number\n onReadLessClicked?: () => void\n onReadMoreClicked?: () => void\n}\n\nexport const ReadMore: React.FC<React.PropsWithChildren<ReadMoreProps>> = ({\n content: expandedHTML,\n disabled,\n inlineReadMoreLink = true,\n defaultExpanded,\n maxLines = Infinity,\n onReadLessClicked,\n onReadMoreClicked,\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n const { theme } = useTheme()\n\n const [overflowing, setOverflowing] = useState(false)\n const [singleLineHeight, setSingleLineHeight] = useState(0)\n const [expanded, setExpanded] = useState(!!defaultExpanded)\n\n const maxLinesToShow = expanded ? Infinity : maxLines\n\n const handleClick = () => {\n if (disabled) return\n\n setExpanded((prevExpanded) => {\n const nextExpanded = !prevExpanded\n nextExpanded ? onReadMoreClicked?.() : onReadLessClicked?.()\n return nextExpanded\n })\n }\n\n const handleResize = () => {\n if (!ref.current) return false\n\n const shouldExpand = ref.current.scrollHeight > ref.current.clientHeight\n setOverflowing(shouldExpand)\n\n const sentinel = ref.current.querySelector(\"[data-readmore-sentinel]\")\n if (!sentinel) return shouldExpand\n\n setSingleLineHeight(sentinel.clientHeight)\n return shouldExpand\n }\n\n const initialized = useRef(false)\n\n useEffect(() => {\n if (initialized.current) return\n\n const shouldExpand = handleResize()\n if (!shouldExpand) setExpanded(true)\n\n initialized.current = true\n }, [])\n\n return (\n <Container aria-expanded={expanded}>\n <LineClamp ref={ref} lineClamp={maxLinesToShow}>\n {/* LineClamp's `display` causes stacking of margins. Nested div ensures internal margins collapse. */}\n <Box\n position=\"relative\"\n dangerouslySetInnerHTML={{\n __html: expanded ? expandedHTML : `${expandedHTML}${SENTINEL}`,\n }}\n />\n </LineClamp>\n\n {overflowing && (\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 SENTINEL = `<span data-readmore-sentinel aria-hidden=\"true\" style=\"display:block;width:0;padding:0;margin:0;position:absolute;bottom:0;right:0;\">​</span>`\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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"}
|
|
@@ -28,6 +28,12 @@ var _default = exports.default = {
|
|
|
28
28
|
var Default = exports.Default = {
|
|
29
29
|
args: {
|
|
30
30
|
maxLines: 2,
|
|
31
|
+
onReadMoreClicked: function onReadMoreClicked() {
|
|
32
|
+
return console.log("Read more clicked");
|
|
33
|
+
},
|
|
34
|
+
onReadLessClicked: function onReadLessClicked() {
|
|
35
|
+
return console.log("Read less clicked");
|
|
36
|
+
},
|
|
31
37
|
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>"
|
|
32
38
|
},
|
|
33
39
|
parameters: {
|
|
@@ -1 +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","maxLines","content","story","ShortContent","AsString","CharacterCapWithHtml","render","createElement","HTML","variant","WithCustomizableTypography","WithCustomizableTypography2","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 render: () => (\n <HTML variant=\"sm\">\n <ReadMore\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 </HTML>\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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"}
|
|
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","maxLines","onReadMoreClicked","console","log","onReadLessClicked","content","story","ShortContent","AsString","CharacterCapWithHtml","render","createElement","HTML","variant","WithCustomizableTypography","WithCustomizableTypography2","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 onReadMoreClicked: () => console.log(\"Read more clicked\"),\n onReadLessClicked: () => console.log(\"Read less clicked\"),\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 render: () => (\n <HTML variant=\"sm\">\n <ReadMore\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 </HTML>\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "45.0.0
|
|
3
|
+
"version": "45.0.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -191,5 +191,5 @@
|
|
|
191
191
|
"url": "http://localhost"
|
|
192
192
|
}
|
|
193
193
|
},
|
|
194
|
-
"gitHead": "
|
|
194
|
+
"gitHead": "3c6197033960490c4fb28af4cc39906078adee52"
|
|
195
195
|
}
|