@sitecore/sc-contenthub-blok 0.0.73 → 0.0.74
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/Components/BlokTag/BlokTag.d.ts +2 -1
- package/dist/Components/BlokTag/BlokTag.js +12 -2
- package/dist/Components/BlokTag/BlokTag.js.map +1 -1
- package/dist/Components/BlokTag/BlokTag.stories.js +1 -1
- package/dist/Components/BlokTag/BlokTag.stories.js.map +1 -1
- package/esm/Components/BlokTag/BlokTag.js +12 -2
- package/esm/Components/BlokTag/BlokTag.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type FC, type PropsWithChildren, type ReactNode } from "react";
|
|
2
2
|
import { type ColorName } from "../../Foundations";
|
|
3
3
|
export interface BlokTagProps {
|
|
4
|
-
size?: "sm" | "md" | "lg";
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
5
5
|
startIcon?: ReactNode;
|
|
6
6
|
endIcon?: ReactNode;
|
|
7
7
|
onDelete?: () => void;
|
|
@@ -12,5 +12,6 @@ export interface BlokTagProps {
|
|
|
12
12
|
expandLabel?: string;
|
|
13
13
|
collapseLabel?: string;
|
|
14
14
|
allowMultiline?: boolean;
|
|
15
|
+
deleteId?: string;
|
|
15
16
|
}
|
|
16
17
|
export declare const BlokTag: FC<PropsWithChildren<BlokTagProps>>;
|
|
@@ -67,6 +67,16 @@ const classes = {
|
|
|
67
67
|
padding: "0.5rem",
|
|
68
68
|
},
|
|
69
69
|
}),
|
|
70
|
+
tagSizeXl: (0, css_1.css)({
|
|
71
|
+
fontSize: Foundations_1.fontSizes.md,
|
|
72
|
+
minWidth: "2.25rem",
|
|
73
|
+
minHeight: "2.25rem",
|
|
74
|
+
paddingInlineStart: "0.5rem",
|
|
75
|
+
paddingInlineEnd: "0.5rem",
|
|
76
|
+
"&.has-multiple-lines": {
|
|
77
|
+
padding: "0.5rem",
|
|
78
|
+
},
|
|
79
|
+
}),
|
|
70
80
|
tagButton: (0, css_1.css)({
|
|
71
81
|
background: "transparent",
|
|
72
82
|
border: "none",
|
|
@@ -101,7 +111,7 @@ const classes = {
|
|
|
101
111
|
cursor: "pointer",
|
|
102
112
|
}),
|
|
103
113
|
};
|
|
104
|
-
const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", allowMultiline = false, ...extraProps }) => {
|
|
114
|
+
const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", allowMultiline = false, deleteId = "delete-tag-button", ...extraProps }) => {
|
|
105
115
|
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
|
|
106
116
|
const [isMultiline, setIsMultiline] = (0, react_1.useState)(false);
|
|
107
117
|
const textRef = (0, react_1.useRef)(null);
|
|
@@ -132,7 +142,7 @@ const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neu
|
|
|
132
142
|
setIsMultiline(textRef.current.clientHeight > 30);
|
|
133
143
|
}
|
|
134
144
|
}, [children, expandedContent, isExpanded]);
|
|
135
|
-
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.tag, classes[`tagSize${(0, utils_1.capitalizeString)(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [startIcon, expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), (0, jsx_runtime_1.jsx)("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleDelete, "aria-label": deleteLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) }))] }));
|
|
145
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.tag, classes[`tagSize${(0, utils_1.capitalizeString)(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [startIcon, expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, "data-testid": "toggle-button", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), (0, jsx_runtime_1.jsx)("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleDelete, "aria-label": deleteLabel, className: classes.tagButton, "data-testid": deleteId, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) }))] }));
|
|
136
146
|
};
|
|
137
147
|
exports.BlokTag = BlokTag;
|
|
138
148
|
//# sourceMappingURL=BlokTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAUe;AAEf,mDAO2B;AAC3B,mDAA2D;AAC3D,yDAAsD;AACtD,mDAAgD;AAEhD,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,IAAA,SAAG,EAAC;QACP,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,8BAAgB;QAC9B,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,uBAAuB;QAChC,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,QAAQ;QACb,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE;YACR,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,QAAQ;YACpB,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;SACnB;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,QAAQ;SACnB;QACD,GAAG,EAAE;YACH,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,SAAS,EAAE,OAAO;SACnB;KACF,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,QAAQ,EAAE,uBAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;QACpB,kBAAkB,EAAE,SAAS;QAC7B,gBAAgB,EAAE,SAAS;QAC3B,sBAAsB,EAAE;YACtB,OAAO,EAAE,SAAS;SACnB;KACF,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,QAAQ,EAAE,uBAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,QAAQ;QACnB,kBAAkB,EAAE,UAAU;QAC9B,gBAAgB,EAAE,UAAU;QAC5B,sBAAsB,EAAE;YACtB,OAAO,EAAE,UAAU;SACpB;KACF,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,QAAQ,EAAE,uBAAS,CAAC,EAAE;QACtB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;QACjB,kBAAkB,EAAE,QAAQ;QAC5B,gBAAgB,EAAE,QAAQ;QAC1B,sBAAsB,EAAE;YACtB,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,KAAK;QAEd,SAAS,EAAE;YACT,OAAO,EAAE,GAAG;SACb;KACF,CAAC;IACF,YAAY,EAAE,IAAA,SAAG,EAAC;QAChB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE,QAAQ;SACrB;KACF,CAAC;IACF,YAAY,EAAE,IAAA,SAAG,EAAC;QAChB,KAAK,EAAE,kBAAkB;QACzB,eAAe,EAAE,GAAG,wBAAU,CAAC,GAAG,CAAC,aAAa;QAEhD,MAAM,EAAE,IAAA,SAAG,EAAC;YACV,KAAK,EAAE,cAAc;SACtB,CAAC;KACH,CAAC;IACF,aAAa,EAAE,IAAA,SAAG,EAAC;QACjB,MAAM,EAAE,SAAS;KAClB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ exports.Tags = {
|
|
|
27
27
|
controls: { disable: true, expanded: false },
|
|
28
28
|
options: { showPanel: false },
|
|
29
29
|
},
|
|
30
|
-
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", children: "Tag lg" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", onDelete: () => alert("delete"), children: "Tag lg" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag lg" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Tag md" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { onDelete: () => alert("delete"), children: "Tag md" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag md" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", children: "Tag sm" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", onDelete: () => alert("delete"), children: "Tag sm" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag sm" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: (0, jsx_runtime_1.jsx)(BlokLink_1.BlokLink, { href: "https://www.google.com", children: "Tag link" }) }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)("img", { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-account-supervisor-circle", alt: "image" }), children: "Collapsed content" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Default" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "info", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "ai", children: "AI" })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { allowMultiline: true, onDelete: () => alert("delete"), children: "With allow multiline Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { allowMultiline: true, onDelete: () => alert("delete"), expandedContent: "Long expanded text. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nis", children: "Normal collapsed text" }) }) })] })),
|
|
30
|
+
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "xl", children: "Tag xl" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "xl", onDelete: () => alert("delete"), deleteId: "custom-delete-id", children: "Tag xl" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "xl", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag xl" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", children: "Tag lg" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", onDelete: () => alert("delete"), children: "Tag lg" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "lg", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag lg" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Tag md" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { onDelete: () => alert("delete"), children: "Tag md" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag md" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", children: "Tag sm" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", onDelete: () => alert("delete"), children: "Tag sm" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { size: "sm", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "info-circle" }), children: "Tag sm" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: (0, jsx_runtime_1.jsx)(BlokLink_1.BlokLink, { href: "https://www.google.com", children: "Tag link" }) }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)("img", { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-account-supervisor-circle", alt: "image" }), children: "Collapsed content" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Default" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "info", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "ai", children: "AI" })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { allowMultiline: true, onDelete: () => alert("delete"), children: "With allow multiline Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { allowMultiline: true, onDelete: () => alert("delete"), expandedContent: "Long expanded text. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nis", children: "Normal collapsed text" }) }) })] })),
|
|
31
31
|
};
|
|
32
32
|
exports.PlayGround = {
|
|
33
33
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlokTag.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -64,6 +64,16 @@ const classes = {
|
|
|
64
64
|
padding: "0.5rem",
|
|
65
65
|
},
|
|
66
66
|
}),
|
|
67
|
+
tagSizeXl: css({
|
|
68
|
+
fontSize: fontSizes.md,
|
|
69
|
+
minWidth: "2.25rem",
|
|
70
|
+
minHeight: "2.25rem",
|
|
71
|
+
paddingInlineStart: "0.5rem",
|
|
72
|
+
paddingInlineEnd: "0.5rem",
|
|
73
|
+
"&.has-multiple-lines": {
|
|
74
|
+
padding: "0.5rem",
|
|
75
|
+
},
|
|
76
|
+
}),
|
|
67
77
|
tagButton: css({
|
|
68
78
|
background: "transparent",
|
|
69
79
|
border: "none",
|
|
@@ -98,7 +108,7 @@ const classes = {
|
|
|
98
108
|
cursor: "pointer",
|
|
99
109
|
}),
|
|
100
110
|
};
|
|
101
|
-
export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", allowMultiline = false, ...extraProps }) => {
|
|
111
|
+
export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", allowMultiline = false, deleteId = "delete-tag-button", ...extraProps }) => {
|
|
102
112
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
103
113
|
const [isMultiline, setIsMultiline] = useState(false);
|
|
104
114
|
const textRef = useRef(null);
|
|
@@ -129,6 +139,6 @@ export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme
|
|
|
129
139
|
setIsMultiline(textRef.current.clientHeight > 30);
|
|
130
140
|
}
|
|
131
141
|
}, [children, expandedContent, isExpanded]);
|
|
132
|
-
return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: handleDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
|
|
142
|
+
return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], allowMultiline && classes.tagMultiline, isMultiline && "has-multiple-lines", isDarkTheme && colorScheme === "neutral" && classes.darkThemeTag, expandedContent ? classes.pointerCursor : undefined, className), style: styles, onClick: expandedContent ? toggleExpanded : undefined, ...extraProps, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, "data-testid": "toggle-button", children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { ref: textRef, children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: handleDelete, "aria-label": deleteLabel, className: classes.tagButton, "data-testid": deleteId, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
|
|
133
143
|
};
|
|
134
144
|
//# sourceMappingURL=BlokTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
|