@grantbii/design-system 1.23.5 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/core/assets/logos/brand_logomark-full_color.webp +0 -0
  2. package/core/assets/logos/brand_logomark-reversed_color.webp +0 -0
  3. package/core/atoms/BrandLogo.d.ts +9 -2
  4. package/core/atoms/BrandLogo.js +33 -7
  5. package/core/atoms/BrandLogo.js.map +1 -1
  6. package/core/molecules/Button.d.ts +1 -2
  7. package/core/molecules/Button.js +4 -7
  8. package/core/molecules/Button.js.map +1 -1
  9. package/package.json +9 -9
  10. package/stories/atoms/BrandLogo.stories.d.ts +4 -3
  11. package/stories/atoms/BrandLogo.stories.js +17 -6
  12. package/stories/atoms/BrandLogo.stories.js.map +1 -1
  13. package/tsconfig.tsbuildinfo +1 -1
  14. /package/core/assets/logos/{brand_logo-dark.webp → brand_logo-full_color.webp} +0 -0
  15. /package/core/assets/logos/{brand_logo-light.webp → brand_logo-reversed_color.webp} +0 -0
package/core/atoms/BrandLogo.d.ts CHANGED
@@ -1,6 +1,13 @@
1
+ type ColorVariant = "full" | "reversed";
1
2
  type BrandLogoProps = {
2
- isDarkTheme?: boolean;
3
+ colorVariant?: ColorVariant;
4
+ isLogomark?: boolean;
5
+ smallScreenWidth?: string;
6
+ smallScreenHeight?: string;
7
+ bigScreenWidth?: string;
8
+ bigScreenHeight?: string;
9
+ borderRadius?: string;
3
10
  alt?: string;
4
11
  };
5
- declare const BrandLogo: ({ isDarkTheme, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
12
+ declare const BrandLogo: ({ colorVariant, isLogomark, smallScreenWidth, smallScreenHeight, bigScreenWidth, bigScreenHeight, borderRadius, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
6
13
  export default BrandLogo;
package/core/atoms/BrandLogo.js CHANGED
@@ -1,20 +1,46 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import Image from "next/image";
3
3
  import styled from "styled-components";
4
- import darkLogo from "../assets/logos/brand_logo-dark.webp";
5
- import lightLogo from "../assets/logos/brand_logo-light.webp";
4
+ import fullColorLogo from "../assets/logos/brand_logo-full_color.webp";
5
+ import reversedColorLogo from "../assets/logos/brand_logo-reversed_color.webp";
6
+ import fullColorLogomark from "../assets/logos/brand_logomark-full_color.webp";
7
+ import reversedColorLogomark from "../assets/logos/brand_logomark-reversed_color.webp";
6
8
  import * as Responsive from "../atoms/Responsive";
7
- const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(BrandImage, { src: isDarkTheme ? darkLogo : lightLogo, width: 250, height: 80, alt: alt, priority: true }));
9
+ const BrandLogo = ({ colorVariant = "full", isLogomark = false, smallScreenWidth = "125px", smallScreenHeight = "40px", bigScreenWidth = "150px", bigScreenHeight = "48px", borderRadius = "0px", alt = "Grantbii", }) => {
10
+ const src = isLogomark
11
+ ? variantToLogomarkSrc(colorVariant)
12
+ : variantToLogoSrc(colorVariant);
13
+ const imageProps = {
14
+ src,
15
+ alt,
16
+ priority: true,
17
+ width: ORIGINAL_WIDTH,
18
+ height: ORIGINAL_HEIGHT,
19
+ $smallScreenWidth: smallScreenWidth,
20
+ $smallScreenHeight: smallScreenHeight,
21
+ $bigScreenWidth: bigScreenWidth,
22
+ $bigScreenHeight: bigScreenHeight,
23
+ $borderRadius: borderRadius,
24
+ $isLogomark: isLogomark,
25
+ };
26
+ return _jsx(BrandImage, { ...imageProps });
27
+ };
8
28
  export default BrandLogo;
29
+ const ORIGINAL_WIDTH = 250;
30
+ const ORIGINAL_HEIGHT = 80;
31
+ const variantToLogomarkSrc = (colorVariant) => colorVariant === "full" ? fullColorLogomark : reversedColorLogomark;
32
+ const variantToLogoSrc = (colorVariant) => colorVariant === "full" ? fullColorLogo : reversedColorLogo;
9
33
  const BrandImage = styled(Image) `
34
+ border-radius: ${(props) => props.$borderRadius};
35
+
10
36
  @media (width < ${Responsive.widthBreakpoint.laptop}) {
11
- width: 125px;
12
- height: 40px;
37
+ width: ${(props) => props.$isLogomark ? props.$smallScreenHeight : props.$smallScreenWidth};
38
+ height: ${(props) => props.$smallScreenHeight};
13
39
  }
14
40
 
15
41
  @media (width >= ${Responsive.widthBreakpoint.laptop}) {
16
- width: 150px;
17
- height: 48px;
42
+ width: ${(props) => props.$isLogomark ? props.$bigScreenHeight : props.$bigScreenWidth};
43
+ height: ${(props) => props.$bigScreenHeight};
18
44
  }
19
45
  `;
20
46
  //# sourceMappingURL=BrandLogo.js.map
package/core/atoms/BrandLogo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAOlD,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACZ,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;qBAKhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;CAIrD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport darkLogo from \"../assets/logos/brand_logo-dark.webp\";\nimport lightLogo from \"../assets/logos/brand_logo-light.webp\";\nimport * as Responsive from \"../atoms/Responsive\";\n\ntype BrandLogoProps = {\n isDarkTheme?: boolean;\n alt?: string;\n};\n\nconst BrandLogo = ({\n isDarkTheme = true,\n alt = \"Grantbii\",\n}: BrandLogoProps) => (\n <BrandImage\n src={isDarkTheme ? darkLogo : lightLogo}\n width={250}\n height={80}\n alt={alt}\n priority\n />\n);\n\nexport default BrandLogo;\n\nconst BrandImage = styled(Image)`\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n width: 125px;\n height: 40px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n width: 150px;\n height: 48px;\n }\n`;\n"]}
1
+ {"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,iBAAiB,MAAM,gDAAgD,CAAC;AAC/E,OAAO,iBAAiB,MAAM,gDAAgD,CAAC;AAC/E,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAelD,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,GAAG,MAAM,EACrB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,OAAO,EAC1B,iBAAiB,GAAG,MAAM,EAC1B,cAAc,GAAG,OAAO,EACxB,eAAe,GAAG,MAAM,EACxB,YAAY,GAAG,KAAK,EACpB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE;IACnB,MAAM,GAAG,GAAG,UAAU;QACpB,CAAC,CAAC,oBAAoB,CAAC,YAAY,CAAC;QACpC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEnC,MAAM,UAAU,GAAG;QACjB,GAAG;QACH,GAAG;QACH,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,iBAAiB,EAAE,gBAAgB;QACnC,kBAAkB,EAAE,iBAAiB;QACrC,eAAe,EAAE,cAAc;QAC/B,gBAAgB,EAAE,eAAe;QACjC,aAAa,EAAE,YAAY;QAC3B,WAAW,EAAE,UAAU;KACxB,CAAC;IAEF,OAAO,KAAC,UAAU,OAAK,UAAU,GAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B,MAAM,oBAAoB,GAAG,CAAC,YAA0B,EAAE,EAAE,CAC1D,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAG,CAAC,YAA0B,EAAE,EAAE,CACtD,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC;AAW9D,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAiB;mBAC9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;;oBAE7B,UAAU,CAAC,eAAe,CAAC,MAAM;aACxC,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB;cAC9D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,kBAAkB;;;qBAG5B,UAAU,CAAC,eAAe,CAAC,MAAM;aACzC,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe;cAC1D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB;;CAE9C,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport fullColorLogo from \"../assets/logos/brand_logo-full_color.webp\";\nimport reversedColorLogo from \"../assets/logos/brand_logo-reversed_color.webp\";\nimport fullColorLogomark from \"../assets/logos/brand_logomark-full_color.webp\";\nimport reversedColorLogomark from \"../assets/logos/brand_logomark-reversed_color.webp\";\nimport * as Responsive from \"../atoms/Responsive\";\n\ntype ColorVariant = \"full\" | \"reversed\";\n\ntype BrandLogoProps = {\n colorVariant?: ColorVariant;\n isLogomark?: boolean;\n smallScreenWidth?: string;\n smallScreenHeight?: string;\n bigScreenWidth?: string;\n bigScreenHeight?: string;\n borderRadius?: string;\n alt?: string;\n};\n\nconst BrandLogo = ({\n colorVariant = \"full\",\n isLogomark = false,\n smallScreenWidth = \"125px\",\n smallScreenHeight = \"40px\",\n bigScreenWidth = \"150px\",\n bigScreenHeight = \"48px\",\n borderRadius = \"0px\",\n alt = \"Grantbii\",\n}: BrandLogoProps) => {\n const src = isLogomark\n ? variantToLogomarkSrc(colorVariant)\n : variantToLogoSrc(colorVariant);\n\n const imageProps = {\n src,\n alt,\n priority: true,\n width: ORIGINAL_WIDTH,\n height: ORIGINAL_HEIGHT,\n $smallScreenWidth: smallScreenWidth,\n $smallScreenHeight: smallScreenHeight,\n $bigScreenWidth: bigScreenWidth,\n $bigScreenHeight: bigScreenHeight,\n $borderRadius: borderRadius,\n $isLogomark: isLogomark,\n };\n\n return <BrandImage {...imageProps} />;\n};\n\nexport default BrandLogo;\n\nconst ORIGINAL_WIDTH = 250;\nconst ORIGINAL_HEIGHT = 80;\n\nconst variantToLogomarkSrc = (colorVariant: ColorVariant) =>\n colorVariant === \"full\" ? fullColorLogomark : reversedColorLogomark;\n\nconst variantToLogoSrc = (colorVariant: ColorVariant) =>\n colorVariant === \"full\" ? fullColorLogo : reversedColorLogo;\n\ntype BrandImageProps = {\n $isLogomark: boolean;\n $smallScreenWidth: string;\n $smallScreenHeight: string;\n $bigScreenWidth: string;\n $bigScreenHeight: string;\n $borderRadius: string;\n};\n\nconst BrandImage = styled(Image)<BrandImageProps>`\n border-radius: ${(props) => props.$borderRadius};\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n width: ${(props) =>\n props.$isLogomark ? props.$smallScreenHeight : props.$smallScreenWidth};\n height: ${(props) => props.$smallScreenHeight};\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n width: ${(props) =>\n props.$isLogomark ? props.$bigScreenHeight : props.$bigScreenWidth};\n height: ${(props) => props.$bigScreenHeight};\n }\n`;\n"]}
package/core/molecules/Button.d.ts CHANGED
@@ -32,7 +32,6 @@ type SizeStyleProps = {
32
32
  height: string;
33
33
  padding: string;
34
34
  fontSize: string;
35
- actionIconSize?: string;
36
35
  };
37
36
  type RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;
38
- export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, height, padding, fontSize, actionIconSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react/jsx-runtime").JSX.Element;
37
+ export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, height, padding, fontSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react/jsx-runtime").JSX.Element;
package/core/molecules/Button.js CHANGED
@@ -65,26 +65,22 @@ const SIZE_PROPS_MAP = {
65
65
  height: "40px",
66
66
  padding: `10px ${Spacing.px16}`, // not following spacing scale
67
67
  fontSize: "14px",
68
- actionIconSize: "40px",
69
68
  },
70
69
  medium: {
71
70
  height: "46px",
72
71
  padding: `12px ${Spacing.px16}`, // not following spacing scale
73
72
  fontSize: "16px",
74
- actionIconSize: "44px",
75
73
  },
76
74
  large: {
77
75
  height: "52px",
78
76
  padding: `14px ${Spacing.px16}`, // not following spacing scale
79
77
  fontSize: "18px",
80
- actionIconSize: "48px",
81
78
  },
82
79
  };
83
- export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize, actionIconSize = height, textDecoration = "none", defaultColor, hoverColor = defaultColor, disabledColor = defaultColor, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, disabledBackgroundColor = defaultBackgroundColor, borderColor, ...restOfProps }) => {
80
+ export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize, textDecoration = "none", defaultColor, hoverColor = defaultColor, disabledColor = defaultColor, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, disabledBackgroundColor = defaultBackgroundColor, borderColor, ...restOfProps }) => {
84
81
  const isActionIcon = !!Icon && !label;
85
82
  const styleProps = {
86
83
  $isActionIcon: isActionIcon,
87
- $actionIconSize: actionIconSize,
88
84
  $height: height,
89
85
  $fontSize: fontSize,
90
86
  $padding: padding,
@@ -109,8 +105,9 @@ const ButtonStyle = css `
109
105
  gap: ${Spacing.px8};
110
106
 
111
107
  box-sizing: border-box;
112
- width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : "auto")};
113
- height: ${(props) => props.$isActionIcon ? props.$actionIconSize : props.$height};
108
+ width: ${(props) => (props.$isActionIcon ? props.$height : "auto")};
109
+ min-width: ${(props) => (props.$isActionIcon ? props.$height : "auto")};
110
+ height: ${(props) => props.$height};
114
111
  padding: ${(props) => (props.$isActionIcon ? "0px" : props.$padding)};
115
112
 
116
113
  font-weight: ${Typography.weight.medium};
package/core/molecules/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAO7B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA6BlE,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE;IAChB,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,KAAC,SAAS,OAAK,YAAY,KAAM,SAAS,KAAM,WAAW,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAatB,MAAM,iBAAiB,GAAsD;IAC3E,OAAO,EAAE;QACP,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;QAChD,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,cAAc;QAClD,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QAC1C,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC3C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,OAAO,EAAE;QACP,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAChC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,KAAK,EAAE;QACL,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,cAAc,EAAE,WAAW;KAC5B;IACD,MAAM,EAAE;QACN,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACzC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACvC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC;AASF,MAAM,cAAc,GAA6C;IAC/D,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;QAChB,cAAc,EAAE,MAAM;KACvB;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;QAChB,cAAc,EAAE,MAAM;KACvB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;QAChB,cAAc,EAAE,MAAM;KACvB;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,cAAc,GAAG,MAAM,EACvB,cAAc,GAAG,MAAM,EACvB,YAAY,EACZ,UAAU,GAAG,YAAY,EACzB,aAAa,GAAG,YAAY,EAC5B,sBAAsB,EACtB,oBAAoB,GAAG,sBAAsB,EAC7C,uBAAuB,GAAG,sBAAsB,EAChD,WAAW,EACX,GAAG,WAAW,EACC,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IAEtC,MAAM,UAAU,GAAqB;QACnC,aAAa,EAAE,YAAY;QAC3B,eAAe,EAAE,cAAc;QAC/B,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,OAAO;QACjB,eAAe,EAAE,cAAc;QAC/B,aAAa,EAAE,YAAY;QAC3B,WAAW,EAAE,UAAU;QACvB,cAAc,EAAE,aAAa;QAC7B,uBAAuB,EAAE,sBAAsB;QAC/C,qBAAqB,EAAE,oBAAoB;QAC3C,wBAAwB,EAAE,uBAAuB;QACjD,YAAY,EAAE,WAAW;KAC1B,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,IAAI,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,KAAK,EACL,IAAI,IAAI,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,IACvC,CACJ,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IAEnC,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,QAAQ,OAAK,WAAW,KAAM,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAClE,OAAO,GACC,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OACL,WAAW,KACX,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,YAET,OAAO,GACG,CACd,CAAC;AACJ,CAAC,CAAC;AAkBF,MAAM,WAAW,GAAG,GAAG,CAAkB;;;;;SAKhC,OAAO,CAAC,GAAG;;;WAGT,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC;YAChE,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO;aAClD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;;iBAErD,UAAU,CAAC,MAAM,CAAC,MAAM;eAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;WAG9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;sBACnB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,uBAAuB;;YAElD,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM;mBAChD,OAAO,CAAC,GAAG;;qBAET,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe;;;aAGxC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;wBACjB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,qBAAqB;;;;aAIjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc;wBACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,wBAAwB;;CAEhE,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAkB;IAC3C,WAAW;CACd,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAkB;IAC9C,WAAW;CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n padding: string;\n fontSize: string;\n actionIconSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: `10px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"14px\",\n actionIconSize: \"40px\",\n },\n medium: {\n height: \"46px\",\n padding: `12px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"16px\",\n actionIconSize: \"44px\",\n },\n large: {\n height: \"52px\",\n padding: `14px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"18px\",\n actionIconSize: \"48px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n actionIconSize = height,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $actionIconSize: actionIconSize,\n $height: height,\n $fontSize: fontSize,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $actionIconSize: string;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : \"auto\")};\n height: ${(props) =>\n props.$isActionIcon ? props.$actionIconSize : props.$height};\n padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n padding: string;\n fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: `10px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"14px\",\n },\n medium: {\n height: \"46px\",\n padding: `12px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"16px\",\n },\n large: {\n height: \"52px\",\n padding: `14px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"18px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $height: height,\n $fontSize: fontSize,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n min-width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n height: ${(props) => props.$height};\n padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@grantbii/design-system",
3
3
  "author": "Grantbii",
4
4
  "license": "UNLICENSED",
5
- "version": "1.23.5",
5
+ "version": "1.24.0",
6
6
  "description": "Grantbii's Design System",
7
7
  "homepage": "https://design.grantbii.com",
8
8
  "repository": {
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@phosphor-icons/react": "2.1.10",
24
- "country-flag-icons": "1.6.16",
24
+ "country-flag-icons": "1.6.17",
25
25
  "react-dropzone": "15.0.0",
26
26
  "react-spinners": "0.17.0"
27
27
  },
@@ -35,11 +35,11 @@
35
35
  "devDependencies": {
36
36
  "@chromatic-com/storybook": "5.1.2",
37
37
  "@grantbii/ui-core": "1.8.5",
38
- "@storybook/addon-a11y": "10.3.5",
39
- "@storybook/addon-docs": "10.3.5",
40
- "@storybook/addon-onboarding": "10.3.5",
41
- "@storybook/addon-vitest": "10.3.5",
42
- "@storybook/nextjs-vite": "10.3.5",
38
+ "@storybook/addon-a11y": "10.3.6",
39
+ "@storybook/addon-docs": "10.3.6",
40
+ "@storybook/addon-onboarding": "10.3.6",
41
+ "@storybook/addon-vitest": "10.3.6",
42
+ "@storybook/nextjs-vite": "10.3.6",
43
43
  "@types/node": "22.19.17",
44
44
  "@types/react": "19.2.14",
45
45
  "@types/react-dom": "19.2.3",
@@ -49,7 +49,7 @@
49
49
  "eslint": "9.39.4",
50
50
  "eslint-config-next": "16.2.4",
51
51
  "eslint-config-prettier": "10.1.8",
52
- "eslint-plugin-storybook": "10.3.5",
52
+ "eslint-plugin-storybook": "10.3.6",
53
53
  "husky": "9.1.7",
54
54
  "lint-staged": "16.4.0",
55
55
  "next": "16.2.4",
@@ -57,7 +57,7 @@
57
57
  "prettier": "3.8.3",
58
58
  "react": "19.2.5",
59
59
  "react-dom": "19.2.5",
60
- "storybook": "10.3.5",
60
+ "storybook": "10.3.6",
61
61
  "styled-components": "6.4.1",
62
62
  "typescript": "6.0.3",
63
63
  "vitest": "4.1.5"
package/stories/atoms/BrandLogo.stories.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
3
3
  declare const meta: Meta<typeof BrandLogo>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- export declare const Light: Story;
8
- export declare const Dark: Story;
6
+ export declare const FullColor: Story;
7
+ export declare const ReversedColor: Story;
8
+ export declare const FullColorLogomark: Story;
9
+ export declare const ReversedColorLogomark: Story;
package/stories/atoms/BrandLogo.stories.js CHANGED
@@ -5,17 +5,28 @@ const meta = {
5
5
  tags: ["autodocs"],
6
6
  };
7
7
  export default meta;
8
- export const Default = {
9
- args: {},
8
+ export const FullColor = {
9
+ args: {
10
+ colorVariant: "full",
11
+ isLogomark: false,
12
+ },
13
+ };
14
+ export const ReversedColor = {
15
+ args: {
16
+ colorVariant: "reversed",
17
+ isLogomark: false,
18
+ },
10
19
  };
11
- export const Light = {
20
+ export const FullColorLogomark = {
12
21
  args: {
13
- isDarkTheme: false,
22
+ colorVariant: "full",
23
+ isLogomark: true,
14
24
  },
15
25
  };
16
- export const Dark = {
26
+ export const ReversedColorLogomark = {
17
27
  args: {
18
- isDarkTheme: true,
28
+ colorVariant: "reversed",
29
+ isLogomark: true,
19
30
  },
20
31
  };
21
32
  //# sourceMappingURL=BrandLogo.stories.js.map
package/stories/atoms/BrandLogo.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n title: \"Atoms/Brand Logo\",\n component: BrandLogo,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {},\n};\n\nexport const Light: Story = {\n args: {\n isDarkTheme: false,\n },\n};\n\nexport const Dark: Story = {\n args: {\n isDarkTheme: true,\n },\n};\n"]}
1
+ {"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,YAAY,EAAE,MAAM;QACpB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n title: \"Atoms/Brand Logo\",\n component: BrandLogo,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FullColor: Story = {\n args: {\n colorVariant: \"full\",\n isLogomark: false,\n },\n};\n\nexport const ReversedColor: Story = {\n args: {\n colorVariant: \"reversed\",\n isLogomark: false,\n },\n};\n\nexport const FullColorLogomark: Story = {\n args: {\n colorVariant: \"full\",\n isLogomark: true,\n },\n};\n\nexport const ReversedColorLogomark: Story = {\n args: {\n colorVariant: \"reversed\",\n isLogomark: true,\n },\n};\n"]}