@grantbii/design-system 1.7.0 → 1.7.1
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/core/atoms/Badge.d.ts +2 -1
- package/core/atoms/Badge.js +4 -2
- package/core/atoms/Badge.js.map +1 -1
- package/package.json +11 -11
- package/stories/atoms/Badge.stories.d.ts +2 -1
- package/stories/atoms/Badge.stories.js +7 -1
- package/stories/atoms/Badge.stories.js.map +1 -1
- package/stories/atoms/Dropdown.stories.js +6 -6
- package/stories/atoms/Dropdown.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Badge.d.ts
CHANGED
|
@@ -5,10 +5,11 @@ export type BadgeProps = {
|
|
|
5
5
|
Icon?: ComponentType<Icons.IconProps>;
|
|
6
6
|
iconSize?: string | number;
|
|
7
7
|
iconWeight?: Icons.IconWeight;
|
|
8
|
+
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
8
9
|
onClickClose?: MouseEventHandler<HTMLButtonElement>;
|
|
9
10
|
labelWidthPixels?: number;
|
|
10
11
|
backgroundColor?: string;
|
|
11
12
|
color?: string;
|
|
12
13
|
};
|
|
13
|
-
declare const Badge: ({ label, Icon, iconSize, iconWeight, onClickClose, labelWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare const Badge: ({ label, Icon, iconSize, iconWeight, onClick, onClickClose, labelWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export default Badge;
|
package/core/atoms/Badge.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { Colors, Icons, Responsive, Typography } from "../foundations";
|
|
4
|
-
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$
|
|
4
|
+
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
|
|
5
5
|
export default Badge;
|
|
6
6
|
const BaseBadge = styled.div `
|
|
7
7
|
display: flex;
|
|
@@ -22,6 +22,8 @@ const BaseBadge = styled.div `
|
|
|
22
22
|
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
23
23
|
min-height: 30px;
|
|
24
24
|
}
|
|
25
|
+
|
|
26
|
+
cursor: ${({ $clickable = false }) => ($clickable ? "pointer" : "auto")};
|
|
25
27
|
`;
|
|
26
28
|
const BadgeContent = styled.div `
|
|
27
29
|
display: flex;
|
|
@@ -29,7 +31,7 @@ const BadgeContent = styled.div `
|
|
|
29
31
|
gap: 10px;
|
|
30
32
|
|
|
31
33
|
width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : "auto")};
|
|
32
|
-
max-width: ${({ $
|
|
34
|
+
max-width: ${({ $closeable }) => ($closeable ? "calc(100% - 20px)" : "auto")};
|
|
33
35
|
`;
|
|
34
36
|
const IconContainer = styled.div `
|
|
35
37
|
display: flex;
|
package/core/atoms/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClick,\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $clickable={!!onClick}\n $backgroundColor={backgroundColor}\n $color={color}\n >\n <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n $clickable?: boolean;\n $backgroundColor?: string;\n $color?: string;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 15px;\n border-radius: 120px;\n\n color: ${({ $color = Colors.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n $backgroundColor};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 30px;\n }\n\n cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n $closeable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.big};\n }\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <Icons.XIcon size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"description": "Grantbii's Design System",
|
|
5
5
|
"homepage": "https://design.grantbii.com",
|
|
6
6
|
"repository": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build-storybook": "storybook build"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@grantbii/ui-core": "1.
|
|
22
|
+
"@grantbii/ui-core": "1.2.0",
|
|
23
23
|
"@phosphor-icons/react": "2.1.10",
|
|
24
24
|
"country-flag-icons": "1.5.21",
|
|
25
25
|
"next": "15.5.4",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"@chromatic-com/storybook": "4.1.1",
|
|
34
34
|
"@eslint/js": "9.36.0",
|
|
35
35
|
"@next/eslint-plugin-next": "15.5.4",
|
|
36
|
-
"@storybook/addon-a11y": "9.1.
|
|
37
|
-
"@storybook/addon-docs": "9.1.
|
|
38
|
-
"@storybook/addon-onboarding": "9.1.
|
|
39
|
-
"@storybook/addon-vitest": "9.1.
|
|
40
|
-
"@storybook/nextjs-vite": "9.1.
|
|
36
|
+
"@storybook/addon-a11y": "9.1.10",
|
|
37
|
+
"@storybook/addon-docs": "9.1.10",
|
|
38
|
+
"@storybook/addon-onboarding": "9.1.10",
|
|
39
|
+
"@storybook/addon-vitest": "9.1.10",
|
|
40
|
+
"@storybook/nextjs-vite": "9.1.10",
|
|
41
41
|
"@types/node": "22.18.0",
|
|
42
42
|
"@types/react": "19.1.13",
|
|
43
43
|
"@types/react-dom": "19.1.9",
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
"@vitest/coverage-v8": "3.2.4",
|
|
46
46
|
"eslint": "9.36.0",
|
|
47
47
|
"eslint-config-next": "15.5.4",
|
|
48
|
-
"eslint-plugin-storybook": "9.1.
|
|
48
|
+
"eslint-plugin-storybook": "9.1.10",
|
|
49
49
|
"husky": "9.1.7",
|
|
50
|
-
"lint-staged": "16.2.
|
|
50
|
+
"lint-staged": "16.2.3",
|
|
51
51
|
"playwright": "1.55.1",
|
|
52
52
|
"prettier": "3.6.2",
|
|
53
|
-
"storybook": "9.1.
|
|
54
|
-
"typescript": "5.9.
|
|
53
|
+
"storybook": "9.1.10",
|
|
54
|
+
"typescript": "5.9.3",
|
|
55
55
|
"vitest": "3.2.4"
|
|
56
56
|
},
|
|
57
57
|
"lint-staged": {
|
|
@@ -7,4 +7,5 @@ export declare const TextOnly: Story;
|
|
|
7
7
|
export declare const Icon: Story;
|
|
8
8
|
export declare const Closeable: Story;
|
|
9
9
|
export declare const LongText: Story;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const AlmostEverything: Story;
|
|
11
|
+
export declare const Clickable: Story;
|
|
@@ -34,7 +34,7 @@ export const LongText = {
|
|
|
34
34
|
labelWidthPixels: 160,
|
|
35
35
|
},
|
|
36
36
|
};
|
|
37
|
-
export const
|
|
37
|
+
export const AlmostEverything = {
|
|
38
38
|
args: {
|
|
39
39
|
Icon: Icons.SmileyXEyesIcon,
|
|
40
40
|
label: longText,
|
|
@@ -42,4 +42,10 @@ export const Everything = {
|
|
|
42
42
|
onClickClose,
|
|
43
43
|
},
|
|
44
44
|
};
|
|
45
|
+
export const Clickable = {
|
|
46
|
+
args: {
|
|
47
|
+
label: "Click Me",
|
|
48
|
+
onClick: () => alert("Clicked on badge"),
|
|
49
|
+
},
|
|
50
|
+
};
|
|
45
51
|
//# sourceMappingURL=Badge.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGnC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAAG,OAAO,CAAC;AAC5B,MAAM,QAAQ,GAAG,6CAA6C,CAAC;AAC/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGnC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAAG,OAAO,CAAC;AAC5B,MAAM,QAAQ,GAAG,6CAA6C,CAAC;AAC/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;QACrB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC;KACzC;CACF,CAAC","sourcesContent":["import { Badge, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badge> = {\n title: \"Atoms/Badge\",\n component: Badge,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst defaultText = \"Badge\";\nconst longText = \"the quick brown fox jumps over the lazy dog\";\nconst onClickClose = () => alert(\"You have closed the badge.\");\n\nexport const TextOnly: Story = {\n args: {\n label: defaultText,\n },\n};\n\nexport const Icon: Story = {\n args: {\n Icon: Icons.SmileyXEyesIcon,\n label: defaultText,\n },\n};\n\nexport const Closeable: Story = {\n args: {\n label: defaultText,\n onClickClose,\n },\n};\n\nexport const LongText: Story = {\n args: {\n label: longText,\n labelWidthPixels: 160,\n },\n};\n\nexport const AlmostEverything: Story = {\n args: {\n Icon: Icons.SmileyXEyesIcon,\n label: longText,\n labelWidthPixels: 160,\n onClickClose,\n },\n};\n\nexport const Clickable: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n },\n};\n"]}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Dropdown, mapEnumToOptions } from "@/.";
|
|
3
|
-
import {
|
|
3
|
+
import { Objective } from "@grantbii/ui-core/grant/enums";
|
|
4
4
|
import { parseEnum } from "@grantbii/ui-core/shared/enums";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
const DropdownExample = ({ controlled }) => {
|
|
7
|
-
const [
|
|
7
|
+
const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);
|
|
8
8
|
const controlledProps = {
|
|
9
9
|
...baseProps,
|
|
10
|
-
value:
|
|
11
|
-
onChange: (event) =>
|
|
10
|
+
value: selectedObjective === Objective.UNKNOWN ? "" : selectedObjective,
|
|
11
|
+
onChange: (event) => setSelectedObjective(parseEnum(event.target.value, Objective)),
|
|
12
12
|
};
|
|
13
13
|
return _jsx(Dropdown, { ...(controlled ? controlledProps : uncontrolledProps) });
|
|
14
14
|
};
|
|
15
15
|
const baseProps = {
|
|
16
|
-
options: mapEnumToOptions(
|
|
17
|
-
defaultLabel: "Select
|
|
16
|
+
options: mapEnumToOptions(Objective),
|
|
17
|
+
defaultLabel: "Select grant objective",
|
|
18
18
|
};
|
|
19
19
|
const uncontrolledProps = {
|
|
20
20
|
...baseProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,eAAe,GAAkB;QACrC,GAAG,SAAS;QACZ,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;QACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KACjE,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC;IACpC,YAAY,EAAE,wBAAwB;CACvC,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC,GAAG,SAAS;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["import { Dropdown, mapEnumToOptions, type DropdownProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport { parseEnum } from \"@grantbii/ui-core/shared/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype ExampleProps = {\n controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled }: ExampleProps) => {\n const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);\n\n const controlledProps: DropdownProps = {\n ...baseProps,\n value: selectedObjective === Objective.UNKNOWN ? \"\" : selectedObjective,\n onChange: (event) =>\n setSelectedObjective(parseEnum(event.target.value, Objective)),\n };\n\n return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst baseProps: DropdownProps = {\n options: mapEnumToOptions(Objective),\n defaultLabel: \"Select grant objective\",\n};\n\nconst uncontrolledProps: DropdownProps = {\n ...baseProps,\n defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n title: \"Atoms/Dropdown\",\n component: DropdownExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n args: {\n controlled: true,\n },\n};\n\nexport const Uncontrolled: Story = {\n args: {\n controlled: false,\n },\n};\n"]}
|