@grantbii/design-system 1.19.3 → 1.19.5
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/Typography.d.ts +0 -1
- package/core/atoms/Typography.js +19 -20
- package/core/atoms/Typography.js.map +1 -1
- package/core/integrations/typography.js +0 -2
- package/core/integrations/typography.js.map +1 -1
- package/core/molecules/Button.d.ts +2 -3
- package/core/molecules/Button.js +1 -6
- package/core/molecules/Button.js.map +1 -1
- package/package.json +1 -1
- package/stories/molecules/Button.stories.js +7 -7
- package/stories/molecules/Button.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Typography.js
CHANGED
|
@@ -14,28 +14,27 @@ export const weight = {
|
|
|
14
14
|
medium: 500,
|
|
15
15
|
bold: 700,
|
|
16
16
|
};
|
|
17
|
-
const textStyle = (fontWeight, desktopFontSize,
|
|
17
|
+
const textStyle = (fontWeight, desktopFontSize, mobileFontSize = desktopFontSize - 2) => ({
|
|
18
18
|
fontFamily: family.satoshi,
|
|
19
19
|
fontWeight,
|
|
20
20
|
fontSize: responsivePx(desktopFontSize, mobileFontSize),
|
|
21
|
-
lineHeight: fixedPx(lineHeight),
|
|
22
21
|
});
|
|
23
|
-
export const heading1 = textStyle(weight.bold, 32
|
|
24
|
-
export const heading2 = textStyle(weight.bold, 28
|
|
25
|
-
export const heading3 = textStyle(weight.bold, 24
|
|
26
|
-
export const subheading1Bold = textStyle(weight.bold, 20
|
|
27
|
-
export const subheading1Medium = textStyle(weight.medium, 20
|
|
28
|
-
export const subheading1Regular = textStyle(weight.regular, 20
|
|
29
|
-
export const subheading2Bold = textStyle(weight.bold, 18
|
|
30
|
-
export const subheading2Medium = textStyle(weight.medium, 18
|
|
31
|
-
export const subheading2Regular = textStyle(weight.regular, 18
|
|
32
|
-
export const bodyPrimaryBold = textStyle(weight.bold, 16
|
|
33
|
-
export const bodyPrimaryMedium = textStyle(weight.medium, 16
|
|
34
|
-
export const bodyPrimaryRegular = textStyle(weight.regular, 16
|
|
35
|
-
export const bodySecondaryBold = textStyle(weight.bold, 14
|
|
36
|
-
export const bodySecondaryMedium = textStyle(weight.medium, 14
|
|
37
|
-
export const bodySecondaryRegular = textStyle(weight.regular, 14
|
|
38
|
-
export const captionBold = textStyle(weight.bold, 12,
|
|
39
|
-
export const captionMedium = textStyle(weight.medium, 12,
|
|
40
|
-
export const captionRegular = textStyle(weight.regular, 12,
|
|
22
|
+
export const heading1 = textStyle(weight.bold, 32);
|
|
23
|
+
export const heading2 = textStyle(weight.bold, 28);
|
|
24
|
+
export const heading3 = textStyle(weight.bold, 24);
|
|
25
|
+
export const subheading1Bold = textStyle(weight.bold, 20);
|
|
26
|
+
export const subheading1Medium = textStyle(weight.medium, 20);
|
|
27
|
+
export const subheading1Regular = textStyle(weight.regular, 20);
|
|
28
|
+
export const subheading2Bold = textStyle(weight.bold, 18);
|
|
29
|
+
export const subheading2Medium = textStyle(weight.medium, 18);
|
|
30
|
+
export const subheading2Regular = textStyle(weight.regular, 18);
|
|
31
|
+
export const bodyPrimaryBold = textStyle(weight.bold, 16);
|
|
32
|
+
export const bodyPrimaryMedium = textStyle(weight.medium, 16);
|
|
33
|
+
export const bodyPrimaryRegular = textStyle(weight.regular, 16);
|
|
34
|
+
export const bodySecondaryBold = textStyle(weight.bold, 14);
|
|
35
|
+
export const bodySecondaryMedium = textStyle(weight.medium, 14);
|
|
36
|
+
export const bodySecondaryRegular = textStyle(weight.regular, 14);
|
|
37
|
+
export const captionBold = textStyle(weight.bold, 12, 12);
|
|
38
|
+
export const captionMedium = textStyle(weight.medium, 12, 12);
|
|
39
|
+
export const captionRegular = textStyle(weight.regular, 12, 12);
|
|
41
40
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,OAAO,GAAG,CAAC,EAAU,EAAmB,EAAE,CAC9C,CAAC;IACC,KAAK,EAAE,GAAG,EAAE,IAAI;IAChB,KAAK,EAAE,GAAG,EAAE,IAAI;CACjB,CAAU,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+C;IAChE,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n ({\n small: `${mobilePx}px`,\n large: `${desktopPx}px`,\n }) as const;\n\nconst fixedPx = (px: number): ResponsiveValue =>\n ({\n small: `${px}px`,\n large: `${px}px`,\n }) as const;\n\nexport const family = {\n satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label in FontWeightLabel]: FontWeight } = {\n regular: 400,\n medium: 500,\n bold: 700,\n};\n\nexport type TextStyle = {\n fontFamily: string;\n fontWeight: FontWeight;\n fontSize: ResponsiveValue;\n};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\n"]}
|
|
@@ -6,12 +6,10 @@ export const applyTypography = (style) => css `
|
|
|
6
6
|
|
|
7
7
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
8
8
|
font-size: ${style.fontSize.small};
|
|
9
|
-
line-height: ${style.lineHeight.small};
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
13
12
|
font-size: ${style.fontSize.large};
|
|
14
|
-
line-height: ${style.lineHeight.large};
|
|
15
13
|
}
|
|
16
14
|
`;
|
|
17
15
|
//# sourceMappingURL=typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../core/integrations/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,GAAG,CAAA;iBAClD,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,KAAK,CAAC,QAAQ,CAAC,KAAK
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../core/integrations/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,GAAG,CAAA;iBAClD,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,KAAK,CAAC,QAAQ,CAAC,KAAK;;;qBAGhB,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,KAAK,CAAC,QAAQ,CAAC,KAAK;;CAEpC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { Responsive, Typography } from \"../atoms\";\n\nexport const applyTypography = (style: Typography.TextStyle) => css`\n font-family: ${style.fontFamily};\n font-weight: ${style.fontWeight};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.large};\n }\n`;\n"]}
|
|
@@ -20,9 +20,8 @@ type VariantStyleProps = {
|
|
|
20
20
|
};
|
|
21
21
|
type SizeStyleProps = {
|
|
22
22
|
height: string;
|
|
23
|
-
fontSize: string;
|
|
24
|
-
lineHeight: string;
|
|
25
23
|
padding: string;
|
|
24
|
+
fontSize: string;
|
|
26
25
|
};
|
|
27
26
|
type CustomButtonProps = {
|
|
28
27
|
label?: ReactNode;
|
|
@@ -35,4 +34,4 @@ type CustomButtonProps = {
|
|
|
35
34
|
href?: 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,
|
|
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,28 +65,24 @@ const SIZE_PROPS_MAP = {
|
|
|
65
65
|
height: "40px",
|
|
66
66
|
padding: "10px", // not following spacing scale
|
|
67
67
|
fontSize: "14px",
|
|
68
|
-
lineHeight: "100%",
|
|
69
68
|
},
|
|
70
69
|
medium: {
|
|
71
70
|
height: "46px",
|
|
72
71
|
padding: "12px", // not following spacing scale
|
|
73
72
|
fontSize: "16px",
|
|
74
|
-
lineHeight: "100%",
|
|
75
73
|
},
|
|
76
74
|
large: {
|
|
77
75
|
height: "52px",
|
|
78
76
|
padding: "14px", // not following spacing scale
|
|
79
77
|
fontSize: "18px",
|
|
80
|
-
lineHeight: "24px",
|
|
81
78
|
},
|
|
82
79
|
};
|
|
83
|
-
export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize,
|
|
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
84
|
$height: height,
|
|
88
85
|
$fontSize: fontSize,
|
|
89
|
-
$lineHeight: lineHeight,
|
|
90
86
|
$padding: padding,
|
|
91
87
|
$textDecoration: textDecoration,
|
|
92
88
|
$defaultColor: defaultColor,
|
|
@@ -115,7 +111,6 @@ const ButtonStyle = css `
|
|
|
115
111
|
|
|
116
112
|
font-weight: ${Typography.weight.medium};
|
|
117
113
|
font-size: ${(props) => props.$fontSize};
|
|
118
|
-
line-height: ${(props) => props.$lineHeight};
|
|
119
114
|
white-space: nowrap;
|
|
120
115
|
|
|
121
116
|
color: ${(props) => props.$defaultColor};
|
|
@@ -1 +1 @@
|
|
|
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 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 fontSize: string;\n lineHeight: string;\n padding: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: \"10px\", // not following spacing scale\n fontSize: \"14px\",\n lineHeight: \"100%\",\n },\n medium: {\n height: \"46px\",\n padding: \"12px\", // not following spacing scale\n fontSize: \"16px\",\n lineHeight: \"100%\",\n },\n large: {\n height: \"52px\",\n padding: \"14px\", // not following spacing scale\n fontSize: \"18px\",\n lineHeight: \"24px\",\n },\n};\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 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 lineHeight,\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 $lineHeight: lineHeight,\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 $lineHeight: 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 height: ${(props) => props.$height};\n padding: ${(props) =>\n props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n line-height: ${(props) => props.$lineHeight};\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 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\", // not following spacing scale\n fontSize: \"14px\",\n },\n medium: {\n height: \"46px\",\n padding: \"12px\", // not following spacing scale\n fontSize: \"16px\",\n },\n large: {\n height: \"52px\",\n padding: \"14px\", // not following spacing scale\n fontSize: \"18px\",\n },\n};\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 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 height: ${(props) => props.$height};\n padding: ${(props) =>\n props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\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
|
@@ -18,7 +18,7 @@ export const Primary = {
|
|
|
18
18
|
export const DisabledPrimary = {
|
|
19
19
|
args: {
|
|
20
20
|
onClick,
|
|
21
|
-
label: "Primary
|
|
21
|
+
label: "Primary",
|
|
22
22
|
variant: "primary",
|
|
23
23
|
Icon: SystemIcon.PlusIcon,
|
|
24
24
|
disabled: true,
|
|
@@ -35,7 +35,7 @@ export const Secondary = {
|
|
|
35
35
|
export const DisabledSecondary = {
|
|
36
36
|
args: {
|
|
37
37
|
onClick,
|
|
38
|
-
label: "Secondary
|
|
38
|
+
label: "Secondary",
|
|
39
39
|
variant: "secondary",
|
|
40
40
|
Icon: SystemIcon.PlusIcon,
|
|
41
41
|
disabled: true,
|
|
@@ -52,7 +52,7 @@ export const Tertiary = {
|
|
|
52
52
|
export const DisabledTertiary = {
|
|
53
53
|
args: {
|
|
54
54
|
onClick,
|
|
55
|
-
label: "Tertiary
|
|
55
|
+
label: "Tertiary",
|
|
56
56
|
variant: "tertiary",
|
|
57
57
|
Icon: SystemIcon.PlusIcon,
|
|
58
58
|
disabled: true,
|
|
@@ -69,7 +69,7 @@ export const Outline = {
|
|
|
69
69
|
export const DisabledOutline = {
|
|
70
70
|
args: {
|
|
71
71
|
onClick,
|
|
72
|
-
label: "Outline
|
|
72
|
+
label: "Outline",
|
|
73
73
|
variant: "outline",
|
|
74
74
|
Icon: SystemIcon.PlusIcon,
|
|
75
75
|
disabled: true,
|
|
@@ -86,7 +86,7 @@ export const Ghost = {
|
|
|
86
86
|
export const DisabledGhost = {
|
|
87
87
|
args: {
|
|
88
88
|
onClick,
|
|
89
|
-
label: "Ghost
|
|
89
|
+
label: "Ghost",
|
|
90
90
|
variant: "ghost",
|
|
91
91
|
Icon: SystemIcon.PlusIcon,
|
|
92
92
|
disabled: true,
|
|
@@ -98,7 +98,7 @@ export const Text = {
|
|
|
98
98
|
export const DisabledText = {
|
|
99
99
|
args: {
|
|
100
100
|
onClick,
|
|
101
|
-
label: "Text
|
|
101
|
+
label: "Text",
|
|
102
102
|
variant: "text",
|
|
103
103
|
Icon: SystemIcon.PlusIcon,
|
|
104
104
|
disabled: true,
|
|
@@ -115,7 +115,7 @@ export const Danger = {
|
|
|
115
115
|
export const DisabledDanger = {
|
|
116
116
|
args: {
|
|
117
117
|
onClick,
|
|
118
|
-
label: "Danger
|
|
118
|
+
label: "Danger",
|
|
119
119
|
variant: "danger",
|
|
120
120
|
Icon: SystemIcon.PlusIcon,
|
|
121
121
|
disabled: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAE9C,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, SystemIcon, Flags } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Button> = {\n title: \"Molecules/Button\",\n component: Button,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst onClick = () => alert(\"Button Clicked\");\n\nexport const Primary: Story = {\n args: {\n onClick,\n label: \"Primary\",\n variant: \"primary\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledPrimary: Story = {\n args: {\n onClick,\n label: \"Primary\",\n variant: \"primary\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Secondary: Story = {\n args: {\n onClick,\n label: \"Secondary\",\n variant: \"secondary\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledSecondary: Story = {\n args: {\n onClick,\n label: \"Secondary\",\n variant: \"secondary\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Tertiary: Story = {\n args: {\n onClick,\n label: \"Tertiary\",\n variant: \"tertiary\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledTertiary: Story = {\n args: {\n onClick,\n label: \"Tertiary\",\n variant: \"tertiary\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Outline: Story = {\n args: {\n onClick,\n label: \"Outline\",\n variant: \"outline\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledOutline: Story = {\n args: {\n onClick,\n label: \"Outline\",\n variant: \"outline\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Ghost: Story = {\n args: {\n onClick,\n label: \"Ghost\",\n variant: \"ghost\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledGhost: Story = {\n args: {\n onClick,\n label: \"Ghost\",\n variant: \"ghost\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Text: Story = {\n args: { onClick, label: \"Text\", variant: \"text\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const DisabledText: Story = {\n args: {\n onClick,\n label: \"Text\",\n variant: \"text\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Danger: Story = {\n args: {\n onClick,\n label: \"Danger\",\n variant: \"danger\",\n Icon: SystemIcon.PlusIcon,\n },\n};\n\nexport const DisabledDanger: Story = {\n args: {\n onClick,\n label: \"Danger\",\n variant: \"danger\",\n Icon: SystemIcon.PlusIcon,\n disabled: true,\n },\n};\n\nexport const Small: Story = {\n args: { onClick, label: \"Small\", size: \"small\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Medium: Story = {\n args: { onClick, label: \"Medium\", size: \"medium\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Large: Story = {\n args: { onClick, label: \"Large\", size: \"large\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const TextOnly: Story = {\n args: { onClick, label: \"Text Only\" },\n};\n\nexport const LeftIcon: Story = {\n args: {\n onClick,\n label: \"Left Icon\",\n Icon: SystemIcon.PlusIcon,\n iconRight: false,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n onClick,\n label: \"Right Icon\",\n Icon: SystemIcon.PlusIcon,\n iconRight: true,\n },\n};\n\nexport const ActionIcon: Story = {\n args: { onClick, Icon: SystemIcon.PlusIcon },\n};\n\nexport const WithHref: Story = {\n args: {\n label: \"Opens grantbii.com\",\n href: \"https://grantbii.com\",\n target: \"_blank\",\n },\n};\n\nexport const HrefDisabled: Story = {\n args: {\n label: \"Opens grantbii.com\",\n href: \"https://grantbii.com\",\n target: \"_blank\",\n disabled: true,\n },\n};\n\nexport const CustomLabel: Story = {\n args: {\n onClick,\n label: (\n <span>\n <Flags.SG width={20} /> Singapore\n </span>\n ),\n variant: \"outline\",\n },\n};\n"]}
|