@grantbii/design-system 1.1.1 → 1.2.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.
- package/core/atoms/Badge.d.ts +1 -1
- package/core/atoms/Badge.js.map +1 -1
- package/core/atoms/Button.d.ts +3 -6
- package/core/atoms/Button.js +1 -1
- package/core/atoms/Button.js.map +1 -1
- package/core/atoms/LinkButton.d.ts +3 -3
- package/core/atoms/LinkButton.js +1 -1
- package/core/atoms/LinkButton.js.map +1 -1
- package/core/atoms/index.d.ts +1 -1
- package/core/atoms/index.js.map +1 -1
- package/core/molecules/Badges.d.ts +7 -0
- package/core/molecules/Badges.js +28 -0
- package/core/molecules/Badges.js.map +1 -0
- package/core/molecules/index.d.ts +1 -0
- package/core/molecules/index.js +1 -0
- package/core/molecules/index.js.map +1 -1
- package/package.json +10 -10
- package/stories/atoms/LinkButton.stories.js +1 -5
- package/stories/atoms/LinkButton.stories.js.map +1 -1
- package/stories/molecules/Badges.stories.d.ts +7 -0
- package/stories/molecules/Badges.stories.js +25 -0
- package/stories/molecules/Badges.stories.js.map +1 -0
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Badge.d.ts
CHANGED
package/core/atoms/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAavE,MAAM,KAAK,GAAG,CAAC,EACb,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,eAAe,aACtE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EACD,KAAC,SAAS,cAAE,IAAI,GAAa,IAChB,EAEd,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YACzC,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,CACV,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACS,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgD;;;;;;;;;WASjE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;CACnB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAChC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC9C,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;oBAON,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAK3B,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAavE,MAAM,KAAK,GAAG,CAAC,EACb,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,eAAe,aACtE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EACD,KAAC,SAAS,cAAE,IAAI,GAAa,IAChB,EAEd,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YACzC,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,CACV,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACS,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgD;;;;;;;;;WASjE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;CACnB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAChC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC9C,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;oBAON,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAK3B,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n text: string;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n textWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n text,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClickClose,\n textWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n <BadgeContent $isCloseable={!!onClickClose} $widthPixels={textWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n <BadgeText>{text}</BadgeText>\n </BadgeContent>\n\n {onClickClose ? (\n <Button type=\"button\" onClick={onClickClose}>\n <Icons.XIcon size={12} />\n </Button>\n ) : (\n <></>\n )}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{ $backgroundColor?: string; $color?: string }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 16px;\n border-radius: 130px;\n\n color: ${({ $color = Colors.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n $backgroundColor};\n`;\n\nconst BadgeContent = styled.div<{\n $isCloseable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $isCloseable }) =>\n $isCloseable ? \"calc(100% - 20px)\" : \"auto\"};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeText = styled.p`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.big};\n }\n`;\n\nconst Button = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
package/core/atoms/Button.d.ts
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import type { ComponentType,
|
|
1
|
+
import type { ButtonHTMLAttributes, ComponentType, DetailedHTMLProps } from "react";
|
|
2
2
|
import { Icons } from "../foundations";
|
|
3
3
|
type ButtonProps = {
|
|
4
4
|
text: string;
|
|
5
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
type?: "button" | "submit" | "reset";
|
|
8
5
|
LeftIcon?: ComponentType<Icons.IconProps>;
|
|
9
6
|
RightIcon?: ComponentType<Icons.IconProps>;
|
|
10
7
|
underline?: boolean;
|
|
11
8
|
backgroundColor?: string;
|
|
12
9
|
color?: string;
|
|
13
10
|
width?: string;
|
|
14
|
-
}
|
|
15
|
-
declare const Button: ({ text,
|
|
11
|
+
} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
12
|
+
declare const Button: ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, type, ...buttonProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
13
|
export default Button;
|
package/core/atoms/Button.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { Icons } from "../foundations";
|
|
4
4
|
import { BaseButton as ButtonContent } from "./shared";
|
|
5
|
-
const Button = ({ text,
|
|
5
|
+
const Button = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
6
6
|
export default Button;
|
|
7
7
|
const BaseButton = styled.button `
|
|
8
8
|
width: ${({ $width = "auto" }) => $width};
|
package/core/atoms/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAevD,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type {\n ButtonHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton as ButtonContent } from \"./shared\";\n\ntype ButtonProps = {\n text: string;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>;\n\nconst Button = ({\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n type = \"button\",\n ...buttonProps\n}: ButtonProps) => (\n <BaseButton {...buttonProps} type={type} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentType, HTMLAttributeAnchorTarget } from "react";
|
|
1
|
+
import type { AnchorHTMLAttributes, ComponentType, DetailedHTMLProps, HTMLAttributeAnchorTarget } from "react";
|
|
2
2
|
import { Icons } from "../foundations";
|
|
3
3
|
type LinkButtonProps = {
|
|
4
4
|
text: string;
|
|
@@ -11,9 +11,9 @@ type LinkButtonProps = {
|
|
|
11
11
|
backgroundColor?: string;
|
|
12
12
|
color?: string;
|
|
13
13
|
width?: string;
|
|
14
|
-
}
|
|
14
|
+
} & DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
|
15
15
|
/**
|
|
16
16
|
* A link that looks like a button
|
|
17
17
|
*/
|
|
18
|
-
declare const LinkButton: ({ href,
|
|
18
|
+
declare const LinkButton: ({ href, disabled, target, ...contentProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
export default LinkButton;
|
package/core/atoms/LinkButton.js
CHANGED
|
@@ -5,7 +5,7 @@ import { BaseButton } from "./shared";
|
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
7
7
|
*/
|
|
8
|
-
const LinkButton = ({ href,
|
|
8
|
+
const LinkButton = ({ href, disabled, target = "_blank", ...contentProps }) => disabled ? (_jsx(Content, { ...contentProps })) : (_jsx(Link, { href: href, target: target, children: _jsx(Content, { ...contentProps }) }));
|
|
9
9
|
export default LinkButton;
|
|
10
10
|
const Content = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
|
|
11
11
|
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAO7B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkBtC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,YAAY,EACC,EAAE,EAAE,CACpB,QAAQ,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAC9B,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AAEJ,eAAe,UAAU,CAAC;AAY1B,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n} from \"react\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton } from \"./shared\";\n\ntype LinkButtonProps = {\n text: string;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n href,\n disabled,\n target = \"_blank\",\n ...contentProps\n}: LinkButtonProps) =>\n disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link href={href} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n\nexport default LinkButton;\n\ntype ContentProps = {\n text: string;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
package/core/atoms/index.d.ts
CHANGED
package/core/atoms/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, type BadgeProps } from \"./Badge\";\nexport { default as BrandLogo } from \"./BrandLogo\";\nexport { default as Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as LinkButton } from \"./LinkButton\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Select } from \"./Select\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type BadgeProps } from "../atoms";
|
|
2
|
+
type BadgesProps = {
|
|
3
|
+
allBadgeProps: BadgeProps[];
|
|
4
|
+
isScrollable?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const Badges: ({ allBadgeProps, isScrollable }: BadgesProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default Badges;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
3
|
+
import styled, { css } from "styled-components";
|
|
4
|
+
import { Badge } from "../atoms";
|
|
5
|
+
const Badges = ({ allBadgeProps, isScrollable }) => (_jsx(BaseBadges, { "$isScrollable": isScrollable, children: allBadgeProps.map((badgeProps, index) => (_createElement(Badge, { ...badgeProps, key: `badge-${index}` }))) }));
|
|
6
|
+
export default Badges;
|
|
7
|
+
const BaseBadges = styled.div `
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: 8px;
|
|
10
|
+
|
|
11
|
+
${({ $isScrollable = false }) => $isScrollable
|
|
12
|
+
? css `
|
|
13
|
+
flex-wrap: nowrap;
|
|
14
|
+
overflow-x: auto;
|
|
15
|
+
|
|
16
|
+
/* hide scrollbar but still allow for scrolling */
|
|
17
|
+
-ms-overflow-style: none;
|
|
18
|
+
scrollbar-width: none;
|
|
19
|
+
::-webkit-scrollbar {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
`
|
|
23
|
+
: css `
|
|
24
|
+
flex-wrap: wrap;
|
|
25
|
+
overflow-x: visible;
|
|
26
|
+
`}
|
|
27
|
+
`;
|
|
28
|
+
//# sourceMappingURL=Badges.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/molecules/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAmB,MAAM,UAAU,CAAC;AAOlD,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,YAAY,EAAe,EAAE,EAAE,CAAC,CAC/D,KAAC,UAAU,qBAAgB,YAAY,YACpC,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,KAAK,EAAE,GAAI,CACjD,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAA6B;;;;IAItD,CAAC,EAAE,aAAa,GAAG,KAAK,EAAE,EAAE,EAAE,CAC9B,aAAa;IACX,CAAC,CAAC,GAAG,CAAA;;;;;;;;;;SAUF;IACH,CAAC,CAAC,GAAG,CAAA;;;SAGF;CACR,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Badge, type BadgeProps } from \"../atoms\";\n\ntype BadgesProps = {\n allBadgeProps: BadgeProps[];\n isScrollable?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, isScrollable }: BadgesProps) => (\n <BaseBadges $isScrollable={isScrollable}>\n {allBadgeProps.map((badgeProps, index) => (\n <Badge {...badgeProps} key={`badge-${index}`} />\n ))}\n </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $isScrollable?: boolean }>`\n display: flex;\n gap: 8px;\n\n ${({ $isScrollable = false }) =>\n $isScrollable\n ? css`\n flex-wrap: nowrap;\n overflow-x: auto;\n\n /* hide scrollbar but still allow for scrolling */\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n `\n : css`\n flex-wrap: wrap;\n overflow-x: visible;\n `}\n`;\n"]}
|
package/core/molecules/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAoB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Badges } from \"./Badges\";\nexport { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as RadioButtons, type RadioOption } from \"./RadioButtons\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Grantbii's Design System",
|
|
5
5
|
"homepage": "https://design.grantbii.com",
|
|
6
6
|
"repository": {
|
|
@@ -31,26 +31,26 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@chromatic-com/storybook": "^4.1.1",
|
|
34
|
-
"@eslint/js": "^9.
|
|
34
|
+
"@eslint/js": "^9.35.0",
|
|
35
35
|
"@next/eslint-plugin-next": "^15.5.2",
|
|
36
|
-
"@storybook/addon-a11y": "^9.1.
|
|
37
|
-
"@storybook/addon-docs": "^9.1.
|
|
38
|
-
"@storybook/addon-onboarding": "^9.1.
|
|
39
|
-
"@storybook/addon-vitest": "^9.1.
|
|
40
|
-
"@storybook/nextjs-vite": "^9.1.
|
|
36
|
+
"@storybook/addon-a11y": "^9.1.5",
|
|
37
|
+
"@storybook/addon-docs": "^9.1.5",
|
|
38
|
+
"@storybook/addon-onboarding": "^9.1.5",
|
|
39
|
+
"@storybook/addon-vitest": "^9.1.5",
|
|
40
|
+
"@storybook/nextjs-vite": "^9.1.5",
|
|
41
41
|
"@types/node": "^22.18.0",
|
|
42
42
|
"@types/react": "^19.1.12",
|
|
43
43
|
"@types/react-dom": "^19.1.9",
|
|
44
44
|
"@vitest/browser": "^3.2.4",
|
|
45
45
|
"@vitest/coverage-v8": "^3.2.4",
|
|
46
|
-
"eslint": "^9.
|
|
46
|
+
"eslint": "^9.35.0",
|
|
47
47
|
"eslint-config-next": "15.5.2",
|
|
48
|
-
"eslint-plugin-storybook": "^9.1.
|
|
48
|
+
"eslint-plugin-storybook": "^9.1.5",
|
|
49
49
|
"husky": "^9.1.7",
|
|
50
50
|
"lint-staged": "^16.1.6",
|
|
51
51
|
"playwright": "^1.55.0",
|
|
52
52
|
"prettier": "^3.6.2",
|
|
53
|
-
"storybook": "^9.1.
|
|
53
|
+
"storybook": "^9.1.5",
|
|
54
54
|
"typescript": "^5.9.2",
|
|
55
55
|
"vitest": "^3.2.4"
|
|
56
56
|
},
|
|
@@ -8,11 +8,7 @@ const meta = {
|
|
|
8
8
|
},
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
|
-
const baseArgs = {
|
|
12
|
-
text: "Link",
|
|
13
|
-
href: "https://grantbii.com",
|
|
14
|
-
target: "_blank",
|
|
15
|
-
};
|
|
11
|
+
const baseArgs = { text: "Link", href: "https://grantbii.com" };
|
|
16
12
|
export const TextOnly = {
|
|
17
13
|
args: baseArgs,
|
|
18
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/atoms/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/atoms/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC;AAEhE,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC","sourcesContent":["import { Colors, Icons, LinkButton } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof LinkButton> = {\n title: \"Atoms/Link Button\",\n component: LinkButton,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = { text: \"Link\", href: \"https://grantbii.com\" };\n\nexport const TextOnly: Story = {\n args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.PlusIcon,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n ...baseArgs,\n RightIcon: Icons.MinusIcon,\n },\n};\n\nexport const BothIcons: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.SmileyXEyesIcon,\n RightIcon: Icons.SmileyMeltingIcon,\n },\n};\n\nexport const Underline: Story = {\n args: {\n ...baseArgs,\n underline: true,\n color: Colors.typography.blackMedium,\n },\n};\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Badges } from "@/.";
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
3
|
+
declare const meta: Meta<typeof Badges>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Scrollable: Story;
|
|
7
|
+
export declare const WrapAround: Story;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Badges, mapEnumToOptions } from "@/.";
|
|
2
|
+
import { Objective } from "@grantbii/ui-core/grant/enums";
|
|
3
|
+
const meta = {
|
|
4
|
+
title: "Molecules/Badges",
|
|
5
|
+
component: Badges,
|
|
6
|
+
tags: ["autodocs"],
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: "centered",
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
const allBadgeProps = mapEnumToOptions(Objective).map((option) => ({ text: option.label }));
|
|
13
|
+
export const Scrollable = {
|
|
14
|
+
args: {
|
|
15
|
+
allBadgeProps,
|
|
16
|
+
isScrollable: true,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
export const WrapAround = {
|
|
20
|
+
args: {
|
|
21
|
+
allBadgeProps,
|
|
22
|
+
isScrollable: false,
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=Badges.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badges.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badges.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAmB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAG1D,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,aAAa,GAAiB,gBAAgB,CAAC,SAAS,CAAC,CAAC,GAAG,CACjE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,aAAa;QACb,YAAY,EAAE,IAAI;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,aAAa;QACb,YAAY,EAAE,KAAK;KACpB;CACF,CAAC","sourcesContent":["import { Badges, mapEnumToOptions, type BadgeProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badges> = {\n title: \"Molecules/Badges\",\n component: Badges,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst allBadgeProps: BadgeProps[] = mapEnumToOptions(Objective).map(\n (option) => ({ text: option.label }),\n);\n\nexport const Scrollable: Story = {\n args: {\n allBadgeProps,\n isScrollable: true,\n },\n};\n\nexport const WrapAround: Story = {\n args: {\n allBadgeProps,\n isScrollable: false,\n },\n};\n"]}
|