@sitecore/sc-contenthub-blok 0.0.11 → 0.0.13
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/BlokBadge/BlokBadge.d.ts +7 -1
- package/dist/Components/BlokBadge/BlokBadge.js +46 -8
- package/dist/Components/BlokBadge/BlokBadge.js.map +1 -1
- package/dist/Components/BlokBadge/BlokBadge.spec.js +15 -3
- package/dist/Components/BlokBadge/BlokBadge.spec.js.map +1 -1
- package/dist/Components/BlokBadge/BlokBadge.stories.d.ts +3 -2
- package/dist/Components/BlokBadge/BlokBadge.stories.js +1 -1
- package/dist/Components/BlokBadge/BlokBadge.stories.js.map +1 -1
- package/dist/Components/BlokButton/BlokButton.stories.d.ts +3 -2
- package/dist/Components/BlokButton/BlokButton.stories.js.map +1 -1
- package/dist/Components/BlokIcon/BlokIcon.d.ts +2 -3
- package/dist/Components/BlokIcon/BlokIcon.js +1 -1
- package/dist/Components/BlokIcon/BlokIcon.js.map +1 -1
- package/dist/Components/BlokIcon/BlokIcon.stories.d.ts +4 -3
- package/dist/Components/BlokIcon/BlokIcon.stories.js +2 -2
- package/dist/Components/BlokIcon/BlokIcon.stories.js.map +1 -1
- package/dist/Components/BlokIconButton/BlokIconButton.stories.d.ts +3 -2
- package/dist/Components/BlokIconButton/BlokIconButton.stories.js.map +1 -1
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.d.ts +11 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.js +49 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.js.map +1 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.d.ts +1 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.js +39 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.js.map +1 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.d.ts +9 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.js +34 -0
- package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.js.map +1 -0
- package/dist/Components/BlokLink/BlokLink.stories.d.ts +3 -2
- package/dist/Components/BlokLink/BlokLink.stories.js.map +1 -1
- package/dist/Components/BlokTag/BlokTag.js +12 -5
- package/dist/Components/BlokTag/BlokTag.js.map +1 -1
- package/dist/Components/BlokTag/BlokTag.spec.d.ts +1 -0
- package/dist/Components/BlokTag/BlokTag.spec.js +43 -0
- package/dist/Components/BlokTag/BlokTag.spec.js.map +1 -0
- package/dist/Components/BlokTag/BlokTag.stories.d.ts +3 -2
- package/dist/Components/BlokTag/BlokTag.stories.js.map +1 -1
- package/dist/Components/index.d.ts +1 -0
- package/dist/Components/index.js +1 -0
- package/dist/Components/index.js.map +1 -1
- package/dist/Foundations/Foundations.stories.d.ts +1 -1
- package/esm/Components/BlokBadge/BlokBadge.js +50 -12
- package/esm/Components/BlokBadge/BlokBadge.js.map +1 -1
- package/esm/Components/BlokIcon/BlokIcon.js +1 -1
- package/esm/Components/BlokIcon/BlokIcon.js.map +1 -1
- package/esm/Components/BlokLabeledIcon/BlokLabeledIcon.js +45 -0
- package/esm/Components/BlokLabeledIcon/BlokLabeledIcon.js.map +1 -0
- package/esm/Components/BlokTag/BlokTag.js +13 -6
- package/esm/Components/BlokTag/BlokTag.js.map +1 -1
- package/esm/Components/index.js +1 -0
- package/esm/Components/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import { type FC, type PropsWithChildren } from "react";
|
|
1
|
+
import { type FC, type PropsWithChildren, type ReactNode } from "react";
|
|
2
2
|
import { type ColorName } from "../../Foundations";
|
|
3
|
+
import { type IconName } from "../BlokIcon/BlokIcon";
|
|
3
4
|
export interface BlokBadgeProps {
|
|
4
5
|
colorScheme?: ColorName;
|
|
6
|
+
className?: string;
|
|
7
|
+
expandedContent?: ReactNode;
|
|
8
|
+
expandLabel?: string;
|
|
9
|
+
collapseLabel?: string;
|
|
10
|
+
iconName?: IconName;
|
|
5
11
|
}
|
|
6
12
|
export declare const BlokBadge: FC<PropsWithChildren<BlokBadgeProps>>;
|
|
@@ -5,25 +5,63 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const css_1 = require("@emotion/css");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const Foundations_1 = require("../../Foundations");
|
|
8
|
+
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
|
|
8
9
|
const classes = {
|
|
9
10
|
badge: (0, css_1.css)({
|
|
10
11
|
paddingInlineStart: "0.25rem",
|
|
11
12
|
paddingInlineEnd: "0.25rem",
|
|
12
13
|
fontWeight: Foundations_1.fontWeightBold,
|
|
13
|
-
borderRadius: Foundations_1.
|
|
14
|
-
display: "inline-
|
|
14
|
+
borderRadius: Foundations_1.borderRadiusBase,
|
|
15
|
+
display: "inline-flex",
|
|
15
16
|
whiteSpace: "nowrap",
|
|
16
17
|
textTransform: "uppercase",
|
|
17
18
|
fontSize: "0.75rem",
|
|
18
19
|
verticalAlign: "middle",
|
|
20
|
+
gap: "0.5rem",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
".m-icon": {
|
|
23
|
+
fontSize: "1.2em",
|
|
24
|
+
},
|
|
25
|
+
}),
|
|
26
|
+
badgeButton: (0, css_1.css)({
|
|
27
|
+
background: "transparent",
|
|
28
|
+
border: "none",
|
|
29
|
+
display: "flex",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
justifyContent: "center",
|
|
32
|
+
fontSize: "1em",
|
|
33
|
+
width: "auto",
|
|
34
|
+
height: "auto",
|
|
35
|
+
margin: 0,
|
|
36
|
+
padding: 0,
|
|
37
|
+
cursor: "pointer",
|
|
38
|
+
opacity: "0.5",
|
|
39
|
+
"&:hover": {
|
|
40
|
+
opacity: 0.8,
|
|
41
|
+
},
|
|
42
|
+
}),
|
|
43
|
+
badgeIconOnly: (0, css_1.css)({
|
|
44
|
+
borderRadius: Foundations_1.borderRadiusFull,
|
|
45
|
+
padding: "0.25rem",
|
|
19
46
|
}),
|
|
20
47
|
};
|
|
21
|
-
const BlokBadge = ({ colorScheme = "neutral", children, ...extraProps }) => {
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
48
|
+
const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, ...extraProps }) => {
|
|
49
|
+
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
|
|
50
|
+
const toggleExpanded = (0, react_1.useCallback)(() => {
|
|
51
|
+
setIsExpanded((prev) => !prev);
|
|
52
|
+
}, []);
|
|
53
|
+
const styles = (0, react_1.useMemo)(() => {
|
|
54
|
+
if (colorScheme === "gen-ai") {
|
|
55
|
+
return {
|
|
56
|
+
backgroundImage: Foundations_1.colorMap[colorScheme]?.[100],
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
return {
|
|
60
|
+
backgroundColor: Foundations_1.colorMap[colorScheme][100],
|
|
61
|
+
color: Foundations_1.colorMap[colorScheme][800],
|
|
62
|
+
};
|
|
63
|
+
}, [colorScheme]);
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.badge, !children && iconName ? classes.badgeIconOnly : undefined, className), style: styles, ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children })] }));
|
|
27
65
|
};
|
|
28
66
|
exports.BlokBadge = BlokBadge;
|
|
29
67
|
//# sourceMappingURL=BlokBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
7
|
const react_1 = require("@testing-library/react");
|
|
8
|
+
const user_event_1 = __importDefault(require("@testing-library/user-event/"));
|
|
5
9
|
const Foundations_1 = require("../../Foundations");
|
|
6
10
|
const BlokBadge_1 = require("./BlokBadge");
|
|
7
11
|
describe("BlokBadge", () => {
|
|
@@ -11,20 +15,28 @@ describe("BlokBadge", () => {
|
|
|
11
15
|
});
|
|
12
16
|
test("applies correct styles based on colorScheme", () => {
|
|
13
17
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Styled Badge" }));
|
|
14
|
-
const badge = react_1.screen.getByText("Styled Badge");
|
|
18
|
+
const badge = react_1.screen.getByText("Styled Badge").parentElement;
|
|
15
19
|
expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
|
|
16
20
|
expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][800]}`);
|
|
17
21
|
});
|
|
18
22
|
test("defaults to neutral colorScheme if none is provided", () => {
|
|
19
23
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Default Badge" }));
|
|
20
|
-
const badge = react_1.screen.getByText("Default Badge");
|
|
24
|
+
const badge = react_1.screen.getByText("Default Badge").parentElement;
|
|
21
25
|
expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["neutral"][100]}`);
|
|
22
26
|
expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["neutral"][800]}`);
|
|
23
27
|
});
|
|
24
28
|
test("renders with uppercase text", () => {
|
|
25
29
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Uppercase Badge" }));
|
|
26
|
-
const badge = react_1.screen.getByText("Uppercase Badge");
|
|
30
|
+
const badge = react_1.screen.getByText("Uppercase Badge").parentElement;
|
|
27
31
|
expect(badge).toHaveStyle("text-transform: uppercase");
|
|
28
32
|
});
|
|
33
|
+
test("toggles expanded content when expand button is clicked", async () => {
|
|
34
|
+
const user = user_event_1.default.setup();
|
|
35
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)("span", { children: "Expanded Content" }), children: "Collapsed Content" }));
|
|
36
|
+
await user.click(react_1.screen.getByLabelText("Expand"));
|
|
37
|
+
expect(react_1.screen.getByText("Expanded Content")).toBeInTheDocument();
|
|
38
|
+
await user.click(react_1.screen.getByLabelText("Collapse"));
|
|
39
|
+
expect(react_1.screen.getByText("Collapsed Content")).toBeInTheDocument();
|
|
40
|
+
});
|
|
29
41
|
});
|
|
30
42
|
//# sourceMappingURL=BlokBadge.spec.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.spec.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BlokBadge.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.spec.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AACxD,8EAAqD;AAErD,mDAA6C;AAC7C,2CAAwC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,2BAAuB,CAAC,CAAC;QAC5D,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,6BAAyB,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,aAAa,CAAC;QAC7D,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC/D,IAAA,cAAM,EAAC,uBAAC,qBAAS,gCAA0B,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC3E,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,gCAA4B,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,aAAa,CAAC;QAChE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAA,cAAM,EACJ,uBAAC,qBAAS,IAAC,eAAe,EAAE,gEAA6B,kCAE7C,CACb,CAAC;QACF,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;QACpD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
3
|
import { type BlokBadgeProps } from "./BlokBadge";
|
|
4
|
-
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokBadgeProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const Badges: Story;
|
|
8
9
|
export declare const PlayGround: Story;
|
|
@@ -23,7 +23,7 @@ const meta = {
|
|
|
23
23
|
};
|
|
24
24
|
exports.default = meta;
|
|
25
25
|
exports.Badges = {
|
|
26
|
-
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)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" })] })] })),
|
|
26
|
+
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)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink" })] })] })),
|
|
27
27
|
};
|
|
28
28
|
exports.PlayGround = {
|
|
29
29
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,2CAA6D;AAE7D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,2CAA6D;AAE7D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAIF,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAE,SAAS,wBAAqB,EACtD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,IAC1C,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,oBAAgB,EAC5C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,sBAAkB,EAChD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,iBAAa,SAAS,wBAE1C,IACR,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,eAAe,EAAE,mFAAwB,kCAExC,EACZ,uBAAC,qBAAS,IAAC,QAAQ,EAAC,OAAO,kCAA8B,EACzD,uBAAC,qBAAS,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,GAAa,IACvD,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
3
|
import { BlokButtonProps } from "./BlokButton";
|
|
4
|
-
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokButtonProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const AllButtons: Story;
|
|
8
9
|
export declare const PlayGround: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokButton.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokButton/BlokButton.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AAIvC,mDAAmD;AACnD,mDAAgD;AAChD,6CAA2D;AAE3D,MAAM,OAAO,GAAG;IACd,iBAAiB,EAAE,IAAA,SAAG,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;IAC7E,eAAe,EAAE,IAAA,SAAG,EAAC;QACnB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM;KACZ,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,YAAY,EAAE,aAAa,4BAAc,CAAC,WAAW,CAAC,OAAO,EAAE;QAC/D,aAAa,EAAE,MAAM;KACtB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokButton.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokButton/BlokButton.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FC, HTMLProps } from "react";
|
|
2
2
|
import { ColorName, ColorShade } from "../../Foundations";
|
|
3
3
|
import { iconNames } from "./iconNames";
|
|
4
|
-
type IconName = (typeof iconNames)[number];
|
|
4
|
+
export type IconName = (typeof iconNames)[number] | string;
|
|
5
5
|
export interface BlokIconProps extends HTMLProps<HTMLElement> {
|
|
6
|
-
icon: IconName
|
|
6
|
+
icon: IconName;
|
|
7
7
|
classes?: Array<string | null>;
|
|
8
8
|
tagName?: "i" | "em";
|
|
9
9
|
label?: string;
|
|
@@ -15,4 +15,3 @@ export interface BlokIconProps extends HTMLProps<HTMLElement> {
|
|
|
15
15
|
ignoreIconOverride?: boolean;
|
|
16
16
|
}
|
|
17
17
|
export declare const BlokIcon: FC<BlokIconProps>;
|
|
18
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAkD;AAClD,6EAAwD;AAExD,mDAK2B;AAE3B,6CAAoD;AAIpD,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAkD;AAClD,6EAAwD;AAExD,mDAK2B;AAE3B,6CAAoD;AAIpD,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,UAAU;QACzB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeU,QAAA,QAAQ,GAAsB,IAAA,kBAAU,EAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAA,uCAAS,GAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,iCAAoB,EAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,IAAA,QAAE,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,IAAA,yBAAW,EAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,IAAA,mCAAqB,EAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
|
-
import { BlokIconProps } from "
|
|
4
|
-
|
|
3
|
+
import { BlokIconProps } from "./BlokIcon";
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokIconProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const Icons: Story;
|
|
8
9
|
export declare const PlayGround: Story;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PlayGround = exports.Icons = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const BlokIcon_1 = require("
|
|
5
|
+
const BlokIcon_1 = require("./BlokIcon");
|
|
6
6
|
const meta = {
|
|
7
7
|
title: "Components/MediaAndIcon/BlokIcon",
|
|
8
8
|
component: BlokIcon_1.BlokIcon,
|
|
@@ -15,7 +15,7 @@ const meta = {
|
|
|
15
15
|
};
|
|
16
16
|
exports.default = meta;
|
|
17
17
|
exports.Icons = {
|
|
18
|
-
render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "22px", display: "flex", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red", iconBackgroundColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconSize: "small" })] })),
|
|
18
|
+
render: () => ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "22px", display: "flex", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconColor: "red", iconBackgroundColor: "red" }), (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "m-icon-trash", iconSize: "small" })] })),
|
|
19
19
|
};
|
|
20
20
|
exports.PlayGround = {
|
|
21
21
|
args: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,
|
|
1
|
+
{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,yCAAqD;AAIrD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,GAAG,EAChC,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,GAAG,EAChD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,GAAG,EAC1E,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,IAC7C,CACP;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
3
|
import { BlokIconButtonProps } from "./BlokIconButton";
|
|
4
|
-
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokIconButtonProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const AllIconButtons: Story;
|
|
8
9
|
export declare const IconButtonPlayground: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIconButton.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIconButton/BlokIconButton.stories.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAAuC;AACvC,kEAA8C;AAI9C,mDAAmD;AACnD,qDAAuE;AAEvE,MAAM,OAAO,GAAG;IACd,iBAAiB,EAAE,IAAA,SAAG,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;IAC7E,eAAe,EAAE,IAAA,SAAG,EAAC;QACnB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,MAAM;KACZ,CAAC;IACF,SAAS,EAAE,IAAA,SAAG,EAAC;QACb,YAAY,EAAE,aAAa,4BAAc,CAAC,WAAW,CAAC,OAAO,EAAE;QAC/D,aAAa,EAAE,MAAM;KACtB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokIconButton.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIconButton/BlokIconButton.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC, PropsWithChildren } from "react";
|
|
2
|
+
import { type ColorName } from "../../Foundations";
|
|
3
|
+
import { type IconName } from "../BlokIcon/BlokIcon";
|
|
4
|
+
export interface BlokLabeledIconProps {
|
|
5
|
+
iconName?: IconName;
|
|
6
|
+
colorTarget?: "background" | "foreground";
|
|
7
|
+
fontSize?: string;
|
|
8
|
+
colorScheme?: ColorName;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const BlokLabeledIcon: FC<PropsWithChildren<BlokLabeledIconProps>>;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BlokLabeledIcon = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const css_1 = require("@emotion/css");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const Foundations_1 = require("../../Foundations");
|
|
8
|
+
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
|
|
9
|
+
const classes = {
|
|
10
|
+
labeledIcon: (0, css_1.css)({
|
|
11
|
+
display: "flex",
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
gap: 4,
|
|
14
|
+
maxWidth: "100%",
|
|
15
|
+
overflow: "hidden",
|
|
16
|
+
textOverflow: "ellipsis",
|
|
17
|
+
fontSize: Foundations_1.fontSizeSmall,
|
|
18
|
+
fontWeight: Foundations_1.fontWeightBold,
|
|
19
|
+
borderRadius: Foundations_1.borderRadiusBase,
|
|
20
|
+
".m-icon": {
|
|
21
|
+
fontSize: "1.5em",
|
|
22
|
+
},
|
|
23
|
+
}),
|
|
24
|
+
labeledIconBackground: (0, css_1.css)({
|
|
25
|
+
padding: "0.25rem",
|
|
26
|
+
}),
|
|
27
|
+
};
|
|
28
|
+
const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = Foundations_1.fontSizeSmall, className, ...extraProps }) => {
|
|
29
|
+
const styles = (0, react_1.useMemo)(() => {
|
|
30
|
+
if (colorTarget === "background") {
|
|
31
|
+
return {
|
|
32
|
+
backgroundColor: Foundations_1.colorMap[colorScheme]?.[100],
|
|
33
|
+
color: Foundations_1.colorMap[colorScheme]?.[300],
|
|
34
|
+
fontSize,
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
color: children
|
|
39
|
+
? Foundations_1.colorMap[colorScheme]?.[500]
|
|
40
|
+
: Foundations_1.colorMap[colorScheme]?.[400],
|
|
41
|
+
fontSize,
|
|
42
|
+
};
|
|
43
|
+
}, [children, colorScheme, colorTarget, fontSize]);
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)("span", { style: styles, className: (0, css_1.cx)(classes.labeledIcon, colorTarget === "background"
|
|
45
|
+
? classes.labeledIconBackground
|
|
46
|
+
: undefined, className), ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), children] }));
|
|
47
|
+
};
|
|
48
|
+
exports.BlokLabeledIcon = BlokLabeledIcon;
|
|
49
|
+
//# sourceMappingURL=BlokLabeledIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BlokLabeledIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAuD;AAEvD,mDAM2B;AAC3B,mDAA+D;AAE/D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,2BAAa;QACvB,UAAU,EAAE,4BAAc;QAC1B,YAAY,EAAE,8BAAgB;QAE9B,SAAS,EAAE;YACT,QAAQ,EAAE,OAAO;SAClB;KACF,CAAC;IACF,qBAAqB,EAAE,IAAA,SAAG,EAAC;QACzB,OAAO,EAAE,SAAS;KACnB,CAAC;CACH,CAAC;AAUK,MAAM,eAAe,GAAgD,CAAC,EAC3E,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,2BAAa,EACxB,SAAS,EACT,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO;gBACL,eAAe,EAAE,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC7C,KAAK,EAAE,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBACnC,QAAQ;aACT,CAAC;QACJ,CAAC;QACD,OAAO;YACL,KAAK,EAAE,QAAQ;gBACb,CAAC,CAAC,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC9B,CAAC,CAAC,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;YAChC,QAAQ;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,kCACE,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,IAAA,QAAE,EACX,OAAO,CAAC,WAAW,EACnB,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC,OAAO,CAAC,qBAAqB;YAC/B,CAAC,CAAC,SAAS,EACb,SAAS,CACV,KACG,UAAU,aAEb,QAAQ,IAAI,uBAAC,mBAAQ,IAAC,IAAI,EAAE,QAAQ,GAAI,EACxC,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,eAAe,mBAyC1B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("@testing-library/react");
|
|
5
|
+
const Foundations_1 = require("../../Foundations");
|
|
6
|
+
const BlokLabeledIcon_1 = require("./BlokLabeledIcon");
|
|
7
|
+
describe("BlokLabeledIcon", () => {
|
|
8
|
+
test("renders with default props", () => {
|
|
9
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { children: "Default Label" }));
|
|
10
|
+
expect(react_1.screen.getByText("Default Label")).toBeInTheDocument();
|
|
11
|
+
});
|
|
12
|
+
test("renders with icon and label", () => {
|
|
13
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { iconName: "check", children: "Label with Icon" }));
|
|
14
|
+
expect(react_1.screen.getByText("Label with Icon")).toBeInTheDocument();
|
|
15
|
+
expect(react_1.screen.getByTestId("m-icon-check")).toBeInTheDocument();
|
|
16
|
+
});
|
|
17
|
+
test("applies correct styles for background color target", () => {
|
|
18
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorTarget: "background", colorScheme: "blue", children: "Background Label" }));
|
|
19
|
+
const label = react_1.screen.getByText("Background Label");
|
|
20
|
+
expect(label).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
|
|
21
|
+
expect(label).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][300]}`);
|
|
22
|
+
});
|
|
23
|
+
test("applies correct styles for foreground color target", () => {
|
|
24
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorTarget: "foreground", colorScheme: "red", children: "Foreground Label" }));
|
|
25
|
+
const label = react_1.screen.getByText("Foreground Label");
|
|
26
|
+
expect(label).toHaveStyle(`color: ${Foundations_1.colorMap["red"][500]}`);
|
|
27
|
+
});
|
|
28
|
+
test("renders without children", () => {
|
|
29
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { iconName: "check" }));
|
|
30
|
+
expect(react_1.screen.queryByText("Label")).not.toBeInTheDocument();
|
|
31
|
+
expect(react_1.screen.getByTestId("m-icon-check")).toBeInTheDocument();
|
|
32
|
+
});
|
|
33
|
+
test("applies custom className", () => {
|
|
34
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { className: "custom-class", children: "Custom Class Label" }));
|
|
35
|
+
const label = react_1.screen.getByText("Custom Class Label");
|
|
36
|
+
expect(label).toHaveClass("custom-class");
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
//# sourceMappingURL=BlokLabeledIcon.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BlokLabeledIcon.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.spec.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AAExD,mDAA6C;AAC7C,uDAAoD;AAEpD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,iCAAe,gCAAgC,CAAC,CAAC;QACzD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,IAAA,cAAM,EAAC,uBAAC,iCAAe,IAAC,QAAQ,EAAC,OAAO,gCAAkC,CAAC,CAAC;QAC5E,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC9D,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,WAAW,EAAC,YAAY,EAAC,WAAW,EAAC,MAAM,iCAE1C,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC9D,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,WAAW,EAAC,YAAY,EAAC,WAAW,EAAC,KAAK,iCAEzC,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,uBAAC,iCAAe,IAAC,QAAQ,EAAC,OAAO,GAAG,CAAC,CAAC;QAC7C,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC5D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,SAAS,EAAC,cAAc,mCAEvB,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;QACrD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { PropsWithChildren } from "react";
|
|
3
|
+
import { type BlokLabeledIconProps } from "./BlokLabeledIcon";
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokLabeledIconProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
8
|
+
export declare const LabeledIcons: Story;
|
|
9
|
+
export declare const PlayGround: Story;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PlayGround = exports.LabeledIcons = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const css_1 = require("@emotion/css");
|
|
6
|
+
const BlokLabeledIcon_1 = require("./BlokLabeledIcon");
|
|
7
|
+
const classes = {
|
|
8
|
+
flexWrapper: (0, css_1.css)({
|
|
9
|
+
display: "flex",
|
|
10
|
+
gap: 8,
|
|
11
|
+
marginBottom: 24,
|
|
12
|
+
}),
|
|
13
|
+
};
|
|
14
|
+
const meta = {
|
|
15
|
+
title: "Components/DataDisplay/BlokLabeledIcon",
|
|
16
|
+
component: BlokLabeledIcon_1.BlokLabeledIcon,
|
|
17
|
+
parameters: {
|
|
18
|
+
layout: "centered",
|
|
19
|
+
},
|
|
20
|
+
tags: ["autodocs"],
|
|
21
|
+
argTypes: {},
|
|
22
|
+
args: {},
|
|
23
|
+
};
|
|
24
|
+
exports.default = meta;
|
|
25
|
+
exports.LabeledIcons = {
|
|
26
|
+
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)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "info", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", colorTarget: "background", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background", children: "Primary" })] })] })),
|
|
27
|
+
};
|
|
28
|
+
exports.PlayGround = {
|
|
29
|
+
args: {
|
|
30
|
+
children: "Some label",
|
|
31
|
+
iconName: "feather",
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=BlokLabeledIcon.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BlokLabeledIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
3
|
import { BlokLinkProps } from "./BlokLink";
|
|
4
|
-
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokLinkProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const Links: Story;
|
|
8
9
|
export declare const PlayGround: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokLink.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,yCAAqD;AAErD,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokLink.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,yCAAqD;AAErD,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAIF,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,mBAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,mCAA8B,EAC7D,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,SAAS,EAAC,QAAQ,iCAEvC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,SAAS,EAAC,OAAO,gCAEtC,IACP,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,SAAS,6BAE1C,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,KAAK,yBAEtC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,QAAQ,4BAEzC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,QAAQ,4BAEzC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,OAAO,2BAExC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,MAAM,0BAEvC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,MAAM,0BAEvC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,MAAM,0BAEvC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,QAAQ,4BAEzC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,MAAM,0BAEvC,EACX,uBAAC,mBAAQ,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAC,SAAS,6BAE1C,IACP,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,WAAW;KACtB;CACF,CAAC"}
|
|
@@ -12,7 +12,7 @@ const classes = {
|
|
|
12
12
|
display: "inline-flex",
|
|
13
13
|
alignItems: "center",
|
|
14
14
|
maxWidth: "100%",
|
|
15
|
-
borderRadius: Foundations_1.
|
|
15
|
+
borderRadius: Foundations_1.borderRadiusBase,
|
|
16
16
|
lineHeight: 1.2,
|
|
17
17
|
outline: "transparent solid 2px",
|
|
18
18
|
outlineOffset: "2px",
|
|
@@ -71,10 +71,17 @@ const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neu
|
|
|
71
71
|
const toggleExpanded = (0, react_1.useCallback)(() => {
|
|
72
72
|
setIsExpanded((prev) => !prev);
|
|
73
73
|
}, []);
|
|
74
|
-
const styles = (0, react_1.useMemo)(() =>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
const styles = (0, react_1.useMemo)(() => {
|
|
75
|
+
if (colorScheme === "gen-ai") {
|
|
76
|
+
return {
|
|
77
|
+
backgroundImage: Foundations_1.colorMap[colorScheme]?.[100],
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
return {
|
|
81
|
+
backgroundColor: Foundations_1.colorMap[colorScheme][100],
|
|
82
|
+
color: Foundations_1.colorMap[colorScheme][800],
|
|
83
|
+
};
|
|
84
|
+
}, [colorScheme]);
|
|
78
85
|
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.tag, classes[`tagSize${(0, utils_1.capitalizeString)(size)}`], className), style: styles, ...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", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) }))] }));
|
|
79
86
|
};
|
|
80
87
|
exports.BlokTag = BlokTag;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAOe;AAEf,mDAK2B;AAC3B,mDAA2D;AAC3D,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,
|
|
1
|
+
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("@testing-library/react");
|
|
8
|
+
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
9
|
+
const Foundations_1 = require("Foundations");
|
|
10
|
+
const BlokTag_1 = require("./BlokTag");
|
|
11
|
+
describe("BlokTag", () => {
|
|
12
|
+
test("renders with default props", () => {
|
|
13
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Default Tag" }));
|
|
14
|
+
expect(react_1.screen.getByText("Default Tag")).toBeInTheDocument();
|
|
15
|
+
});
|
|
16
|
+
test("renders with startIcon and endIcon", () => {
|
|
17
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)("span", { children: "Start" }), endIcon: (0, jsx_runtime_1.jsx)("span", { children: "End" }), children: "Tag with Icons" }));
|
|
18
|
+
expect(react_1.screen.getByText("Start")).toBeInTheDocument();
|
|
19
|
+
expect(react_1.screen.getByText("End")).toBeInTheDocument();
|
|
20
|
+
});
|
|
21
|
+
test("calls onDelete when delete button is clicked", async () => {
|
|
22
|
+
const user = user_event_1.default.setup();
|
|
23
|
+
const onDelete = jest.fn();
|
|
24
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { onDelete: onDelete, children: "Deletable Tag" }));
|
|
25
|
+
await user.click(react_1.screen.getByLabelText("Delete"));
|
|
26
|
+
expect(onDelete).toHaveBeenCalledTimes(1);
|
|
27
|
+
});
|
|
28
|
+
test("toggles expanded content when expand button is clicked", async () => {
|
|
29
|
+
const user = user_event_1.default.setup();
|
|
30
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { expandedContent: (0, jsx_runtime_1.jsx)("span", { children: "Expanded Content" }), children: "Collapsed Content" }));
|
|
31
|
+
await user.click(react_1.screen.getByLabelText("Expand"));
|
|
32
|
+
expect(react_1.screen.getByText("Expanded Content")).toBeInTheDocument();
|
|
33
|
+
await user.click(react_1.screen.getByLabelText("Collapse"));
|
|
34
|
+
expect(react_1.screen.getByText("Collapsed Content")).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
test("applies correct styles based on colorScheme", () => {
|
|
37
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "blue", children: "Styled Tag" }));
|
|
38
|
+
const tag = react_1.screen.getByText("Styled Tag").parentElement;
|
|
39
|
+
expect(tag).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
|
|
40
|
+
expect(tag).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][800]}`);
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
//# sourceMappingURL=BlokTag.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BlokTag.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.spec.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AACxD,6EAAoD;AACpD,6CAAuC;AAEvC,uCAAoC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,iBAAO,8BAAsB,CAAC,CAAC;QACvC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC9C,IAAA,cAAM,EACJ,uBAAC,iBAAO,IAAC,SAAS,EAAE,qDAAkB,EAAE,OAAO,EAAE,mDAAgB,+BAEvD,CACX,CAAC;QACF,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAA,cAAM,EAAC,uBAAC,iBAAO,IAAC,QAAQ,EAAE,QAAQ,8BAAyB,CAAC,CAAC;QAC7D,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAA,cAAM,EACJ,uBAAC,iBAAO,IAAC,eAAe,EAAE,gEAA6B,kCAE7C,CACX,CAAC;QACF,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;QACpD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,uBAAC,iBAAO,IAAC,WAAW,EAAC,MAAM,2BAAqB,CAAC,CAAC;QACzD,MAAM,GAAG,GAAG,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC;QACzD,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACtE,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
import { PropsWithChildren } from "react";
|
|
3
3
|
import { type BlokTagProps } from "./BlokTag";
|
|
4
|
-
|
|
4
|
+
type ComponentProps = PropsWithChildren<BlokTagProps>;
|
|
5
|
+
declare const meta: Meta<ComponentProps>;
|
|
5
6
|
export default meta;
|
|
6
|
-
type Story = StoryObj<
|
|
7
|
+
type Story = StoryObj<ComponentProps>;
|
|
7
8
|
export declare const Tags: Story;
|
|
8
9
|
export declare const PlayGround: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,mDAAgD;AAChD,mDAAgD;AAChD,uCAAuD;AAEvD,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokTag.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,5 +3,6 @@ export * from "./BlokButton/BlokButton";
|
|
|
3
3
|
export * from "./BlokIcon/BlokIcon";
|
|
4
4
|
export * from "./BlokIcon/BlokIconContext";
|
|
5
5
|
export * from "./BlokIconButton/BlokIconButton";
|
|
6
|
+
export * from "./BlokLabeledIcon/BlokLabeledIcon";
|
|
6
7
|
export * from "./BlokLink/BlokLink";
|
|
7
8
|
export * from "./BlokTag/BlokTag";
|
package/dist/Components/index.js
CHANGED
|
@@ -19,6 +19,7 @@ __exportStar(require("./BlokButton/BlokButton"), exports);
|
|
|
19
19
|
__exportStar(require("./BlokIcon/BlokIcon"), exports);
|
|
20
20
|
__exportStar(require("./BlokIcon/BlokIconContext"), exports);
|
|
21
21
|
__exportStar(require("./BlokIconButton/BlokIconButton"), exports);
|
|
22
|
+
__exportStar(require("./BlokLabeledIcon/BlokLabeledIcon"), exports);
|
|
22
23
|
__exportStar(require("./BlokLink/BlokLink"), exports);
|
|
23
24
|
__exportStar(require("./BlokTag/BlokTag"), exports);
|
|
24
25
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC;AACtC,0DAAwC;AACxC,sDAAoC;AACpC,6DAA2C;AAC3C,kEAAgD;AAChD,sDAAoC;AACpC,oDAAkC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC;AACtC,0DAAwC;AACxC,sDAAoC;AACpC,6DAA2C;AAC3C,kEAAgD;AAChD,oEAAkD;AAClD,sDAAoC;AACpC,oDAAkC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { BlokButtonProps } from "Components";
|
|
3
2
|
import { PropsWithChildren } from "react";
|
|
3
|
+
import { BlokButtonProps } from "../Components";
|
|
4
4
|
declare const meta: Meta<PropsWithChildren<BlokButtonProps>>;
|
|
5
5
|
export default meta;
|
|
6
6
|
export declare const SemanticTokens: StoryObj;
|
|
@@ -1,25 +1,63 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { css } from "@emotion/css";
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { css, cx } from "@emotion/css";
|
|
3
|
+
import { useCallback, useMemo, useState, } from "react";
|
|
4
|
+
import { borderRadiusBase, borderRadiusFull, colorMap, fontWeightBold, } from "../../Foundations";
|
|
5
|
+
import { BlokIcon } from "../BlokIcon/BlokIcon";
|
|
5
6
|
const classes = {
|
|
6
7
|
badge: css({
|
|
7
8
|
paddingInlineStart: "0.25rem",
|
|
8
9
|
paddingInlineEnd: "0.25rem",
|
|
9
10
|
fontWeight: fontWeightBold,
|
|
10
|
-
borderRadius:
|
|
11
|
-
display: "inline-
|
|
11
|
+
borderRadius: borderRadiusBase,
|
|
12
|
+
display: "inline-flex",
|
|
12
13
|
whiteSpace: "nowrap",
|
|
13
14
|
textTransform: "uppercase",
|
|
14
15
|
fontSize: "0.75rem",
|
|
15
16
|
verticalAlign: "middle",
|
|
17
|
+
gap: "0.5rem",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
".m-icon": {
|
|
20
|
+
fontSize: "1.2em",
|
|
21
|
+
},
|
|
22
|
+
}),
|
|
23
|
+
badgeButton: css({
|
|
24
|
+
background: "transparent",
|
|
25
|
+
border: "none",
|
|
26
|
+
display: "flex",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "center",
|
|
29
|
+
fontSize: "1em",
|
|
30
|
+
width: "auto",
|
|
31
|
+
height: "auto",
|
|
32
|
+
margin: 0,
|
|
33
|
+
padding: 0,
|
|
34
|
+
cursor: "pointer",
|
|
35
|
+
opacity: "0.5",
|
|
36
|
+
"&:hover": {
|
|
37
|
+
opacity: 0.8,
|
|
38
|
+
},
|
|
39
|
+
}),
|
|
40
|
+
badgeIconOnly: css({
|
|
41
|
+
borderRadius: borderRadiusFull,
|
|
42
|
+
padding: "0.25rem",
|
|
16
43
|
}),
|
|
17
44
|
};
|
|
18
|
-
export const BlokBadge = ({ colorScheme = "neutral", children, ...extraProps }) => {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
45
|
+
export const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, className, ...extraProps }) => {
|
|
46
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
47
|
+
const toggleExpanded = useCallback(() => {
|
|
48
|
+
setIsExpanded((prev) => !prev);
|
|
49
|
+
}, []);
|
|
50
|
+
const styles = useMemo(() => {
|
|
51
|
+
if (colorScheme === "gen-ai") {
|
|
52
|
+
return {
|
|
53
|
+
backgroundImage: colorMap[colorScheme]?.[100],
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
backgroundColor: colorMap[colorScheme][100],
|
|
58
|
+
color: colorMap[colorScheme][800],
|
|
59
|
+
};
|
|
60
|
+
}, [colorScheme]);
|
|
61
|
+
return (_jsxs("span", { className: cx(classes.badge, !children && iconName ? classes.badgeIconOnly : undefined, className), style: styles, ...extraProps, children: [iconName && _jsx(BlokIcon, { icon: iconName }), expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && _jsx("span", { children: isExpanded ? expandedContent : children })] }));
|
|
24
62
|
};
|
|
25
63
|
//# sourceMappingURL=BlokBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAM,UAAU,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EACL,qBAAqB,EACrB,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAM,UAAU,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EACL,qBAAqB,EACrB,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,UAAU;QACzB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,QAAQ,GAAsB,UAAU,CAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,YACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,qBAAqB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { css, cx } from "@emotion/css";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { borderRadiusBase, colorMap, fontSizeSmall, fontWeightBold, } from "../../Foundations";
|
|
5
|
+
import { BlokIcon } from "../BlokIcon/BlokIcon";
|
|
6
|
+
const classes = {
|
|
7
|
+
labeledIcon: css({
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
gap: 4,
|
|
11
|
+
maxWidth: "100%",
|
|
12
|
+
overflow: "hidden",
|
|
13
|
+
textOverflow: "ellipsis",
|
|
14
|
+
fontSize: fontSizeSmall,
|
|
15
|
+
fontWeight: fontWeightBold,
|
|
16
|
+
borderRadius: borderRadiusBase,
|
|
17
|
+
".m-icon": {
|
|
18
|
+
fontSize: "1.5em",
|
|
19
|
+
},
|
|
20
|
+
}),
|
|
21
|
+
labeledIconBackground: css({
|
|
22
|
+
padding: "0.25rem",
|
|
23
|
+
}),
|
|
24
|
+
};
|
|
25
|
+
export const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = fontSizeSmall, className, ...extraProps }) => {
|
|
26
|
+
const styles = useMemo(() => {
|
|
27
|
+
if (colorTarget === "background") {
|
|
28
|
+
return {
|
|
29
|
+
backgroundColor: colorMap[colorScheme]?.[100],
|
|
30
|
+
color: colorMap[colorScheme]?.[300],
|
|
31
|
+
fontSize,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
return {
|
|
35
|
+
color: children
|
|
36
|
+
? colorMap[colorScheme]?.[500]
|
|
37
|
+
: colorMap[colorScheme]?.[400],
|
|
38
|
+
fontSize,
|
|
39
|
+
};
|
|
40
|
+
}, [children, colorScheme, colorTarget, fontSize]);
|
|
41
|
+
return (_jsxs("span", { style: styles, className: cx(classes.labeledIcon, colorTarget === "background"
|
|
42
|
+
? classes.labeledIconBackground
|
|
43
|
+
: undefined, className), ...extraProps, children: [iconName && _jsx(BlokIcon, { icon: iconName }), children] }));
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=BlokLabeledIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BlokLabeledIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EACL,gBAAgB,EAChB,QAAQ,EAER,aAAa,EACb,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAC;AAE/D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,GAAG,CAAC;QACf,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,aAAa;QACvB,UAAU,EAAE,cAAc;QAC1B,YAAY,EAAE,gBAAgB;QAE9B,SAAS,EAAE;YACT,QAAQ,EAAE,OAAO;SAClB;KACF,CAAC;IACF,qBAAqB,EAAE,GAAG,CAAC;QACzB,OAAO,EAAE,SAAS;KACnB,CAAC;CACH,CAAC;AAUF,MAAM,CAAC,MAAM,eAAe,GAAgD,CAAC,EAC3E,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,aAAa,EACxB,SAAS,EACT,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO;gBACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC7C,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBACnC,QAAQ;aACT,CAAC;QACJ,CAAC;QACD,OAAO;YACL,KAAK,EAAE,QAAQ;gBACb,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC9B,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;YAChC,QAAQ;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,gBACE,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,WAAW,EACnB,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC,OAAO,CAAC,qBAAqB;YAC/B,CAAC,CAAC,SAAS,EACb,SAAS,CACV,KACG,UAAU,aAEb,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,GAAI,EACxC,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { css, cx } from "@emotion/css";
|
|
3
3
|
import { useCallback, useMemo, useState, } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { borderRadiusBase, colorMap, fontSizes, } from "../../Foundations";
|
|
5
5
|
import { capitalizeString } from "../../Foundations/utils";
|
|
6
6
|
import { BlokIcon } from "../BlokIcon/BlokIcon";
|
|
7
7
|
const classes = {
|
|
@@ -9,7 +9,7 @@ const classes = {
|
|
|
9
9
|
display: "inline-flex",
|
|
10
10
|
alignItems: "center",
|
|
11
11
|
maxWidth: "100%",
|
|
12
|
-
borderRadius:
|
|
12
|
+
borderRadius: borderRadiusBase,
|
|
13
13
|
lineHeight: 1.2,
|
|
14
14
|
outline: "transparent solid 2px",
|
|
15
15
|
outlineOffset: "2px",
|
|
@@ -68,10 +68,17 @@ export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme
|
|
|
68
68
|
const toggleExpanded = useCallback(() => {
|
|
69
69
|
setIsExpanded((prev) => !prev);
|
|
70
70
|
}, []);
|
|
71
|
-
const styles = useMemo(() =>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
const styles = useMemo(() => {
|
|
72
|
+
if (colorScheme === "gen-ai") {
|
|
73
|
+
return {
|
|
74
|
+
backgroundImage: colorMap[colorScheme]?.[100],
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
return {
|
|
78
|
+
backgroundColor: colorMap[colorScheme][100],
|
|
79
|
+
color: colorMap[colorScheme][800],
|
|
80
|
+
};
|
|
81
|
+
}, [colorScheme]);
|
|
75
82
|
return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], className), style: styles, ...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", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
|
|
76
83
|
};
|
|
77
84
|
//# sourceMappingURL=BlokTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAIL,WAAW,EACX,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
|
package/esm/Components/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export * from "./BlokButton/BlokButton";
|
|
|
3
3
|
export * from "./BlokIcon/BlokIcon";
|
|
4
4
|
export * from "./BlokIcon/BlokIconContext";
|
|
5
5
|
export * from "./BlokIconButton/BlokIconButton";
|
|
6
|
+
export * from "./BlokLabeledIcon/BlokLabeledIcon";
|
|
6
7
|
export * from "./BlokLink/BlokLink";
|
|
7
8
|
export * from "./BlokTag/BlokTag";
|
|
8
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
|