@grantbii/design-system 1.19.1 → 1.19.3
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/Color.d.ts +2 -1
- package/core/atoms/Color.js.map +1 -1
- package/core/molecules/Button.js +4 -3
- package/core/molecules/Button.js.map +1 -1
- package/core/molecules/index.d.ts +1 -1
- package/core/molecules/index.js +1 -1
- package/core/molecules/index.js.map +1 -1
- package/package.json +5 -5
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Color.d.ts
CHANGED
|
@@ -77,7 +77,8 @@ declare const allColors: {
|
|
|
77
77
|
};
|
|
78
78
|
};
|
|
79
79
|
type ValueOf<T> = T[keyof T];
|
|
80
|
-
|
|
80
|
+
type TokenColor = ValueOf<{
|
|
81
81
|
[K in keyof typeof allColors]: ValueOf<(typeof allColors)[K]>;
|
|
82
82
|
}>;
|
|
83
|
+
export type DesignColor = TokenColor | "transparent";
|
|
83
84
|
export {};
|
package/core/atoms/Color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,OAAO;IACP,UAAU;IACV,MAAM;CACE,CAAC","sourcesContent":["export const brand = {\n grantbiiYellow: \"#EBA338\",\n grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n black: \"#232022\",\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n red4: \"#FFF1F0\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n yellow4: \"#FFFCF5\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n blue4: \"#F5F9FF\",\n} as const;\n\nconst allColors = {\n brand,\n neutral,\n typography,\n accent,\n} as const;\n\ntype ValueOf<T> = T[keyof T];\n\
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,OAAO;IACP,UAAU;IACV,MAAM;CACE,CAAC","sourcesContent":["export const brand = {\n grantbiiYellow: \"#EBA338\",\n grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n black: \"#232022\",\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n red4: \"#FFF1F0\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n yellow4: \"#FFFCF5\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n blue4: \"#F5F9FF\",\n} as const;\n\nconst allColors = {\n brand,\n neutral,\n typography,\n accent,\n} as const;\n\ntype ValueOf<T> = T[keyof T];\n\ntype TokenColor = ValueOf<{\n [K in keyof typeof allColors]: ValueOf<(typeof allColors)[K]>;\n}>;\n\nexport type DesignColor = TokenColor | \"transparent\";\n"]}
|
package/core/molecules/Button.js
CHANGED
|
@@ -33,7 +33,7 @@ const VARIANT_PROPS_MAP = {
|
|
|
33
33
|
outline: {
|
|
34
34
|
defaultColor: Color.typography.blackHigh,
|
|
35
35
|
disabledColor: Color.typography.blackLow,
|
|
36
|
-
defaultBackgroundColor:
|
|
36
|
+
defaultBackgroundColor: "transparent",
|
|
37
37
|
hoverBackgroundColor: Color.accent.blue3,
|
|
38
38
|
borderColor: Color.neutral.grey2,
|
|
39
39
|
disabledBackgroundColor: Color.neutral.grey3,
|
|
@@ -41,7 +41,7 @@ const VARIANT_PROPS_MAP = {
|
|
|
41
41
|
ghost: {
|
|
42
42
|
defaultColor: Color.typography.blackHigh,
|
|
43
43
|
disabledColor: Color.typography.blackLow,
|
|
44
|
-
defaultBackgroundColor:
|
|
44
|
+
defaultBackgroundColor: "transparent",
|
|
45
45
|
hoverBackgroundColor: Color.accent.blue3,
|
|
46
46
|
disabledBackgroundColor: Color.neutral.grey3,
|
|
47
47
|
},
|
|
@@ -49,7 +49,7 @@ const VARIANT_PROPS_MAP = {
|
|
|
49
49
|
defaultColor: Color.typography.blackHigh,
|
|
50
50
|
hoverColor: Color.typography.blackMedium,
|
|
51
51
|
disabledColor: Color.typography.blackLow,
|
|
52
|
-
defaultBackgroundColor:
|
|
52
|
+
defaultBackgroundColor: "transparent",
|
|
53
53
|
textDecoration: "underline",
|
|
54
54
|
},
|
|
55
55
|
danger: {
|
|
@@ -104,6 +104,7 @@ export const RawButton = ({ Icon, iconRight = false, label, href, target, disabl
|
|
|
104
104
|
const ButtonStyle = css `
|
|
105
105
|
display: flex;
|
|
106
106
|
flex-direction: row;
|
|
107
|
+
justify-content: center;
|
|
107
108
|
align-items: center;
|
|
108
109
|
gap: ${Spacing.px8};
|
|
109
110
|
|
|
@@ -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: Color.neutral.white,\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: Color.neutral.white,\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: Color.neutral.white,\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 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 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,5 +1,5 @@
|
|
|
1
1
|
export { default as Badge, type BadgeProps } from "./Badge";
|
|
2
|
-
export { default as Button } from "./Button";
|
|
2
|
+
export { default as Button, RawButton } from "./Button";
|
|
3
3
|
export { default as Checkbox } from "./Checkbox";
|
|
4
4
|
export { default as Input } from "./Input";
|
|
5
5
|
export { default as Overlay } from "./Overlay";
|
package/core/molecules/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Badge } from "./Badge";
|
|
2
|
-
export { default as Button } from "./Button";
|
|
2
|
+
export { default as Button, RawButton } from "./Button";
|
|
3
3
|
export { default as Checkbox } from "./Checkbox";
|
|
4
4
|
export { default as Input } from "./Input";
|
|
5
5
|
export { default as Overlay } from "./Overlay";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, type BadgeProps } from \"./Badge\";\nexport { default as Button, RawButton } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\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.19.
|
|
5
|
+
"version": "1.19.3",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@types/node": "22.19.17",
|
|
44
44
|
"@types/react": "19.2.14",
|
|
45
45
|
"@types/react-dom": "19.2.3",
|
|
46
|
-
"@vitest/browser": "4.1.
|
|
47
|
-
"@vitest/browser-playwright": "4.1.
|
|
48
|
-
"@vitest/coverage-v8": "4.1.
|
|
46
|
+
"@vitest/browser": "4.1.5",
|
|
47
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
48
|
+
"@vitest/coverage-v8": "4.1.5",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
50
|
"eslint-config-next": "16.2.4",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"storybook": "10.3.5",
|
|
61
61
|
"styled-components": "6.4.0",
|
|
62
62
|
"typescript": "6.0.3",
|
|
63
|
-
"vitest": "4.1.
|
|
63
|
+
"vitest": "4.1.5"
|
|
64
64
|
},
|
|
65
65
|
"lint-staged": {
|
|
66
66
|
"**/*.{html,css,json,md,yaml}": [
|