@grantbii/design-system 1.4.2 → 1.4.4
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/LinkButton.d.ts +1 -1
- package/core/atoms/LinkButton.js +12 -1
- package/core/atoms/LinkButton.js.map +1 -1
- package/core/foundations/colors.js +23 -23
- package/core/foundations/colors.js.map +1 -1
- package/package.json +1 -1
- package/stories/atoms/LinkButton.stories.js +4 -1
- package/stories/atoms/LinkButton.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -15,5 +15,5 @@ type LinkButtonProps = {
|
|
|
15
15
|
/**
|
|
16
16
|
* A link that looks like a button
|
|
17
17
|
*/
|
|
18
|
-
declare const LinkButton: ({
|
|
18
|
+
declare const LinkButton: ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, disabled, target, ...linkProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
export default LinkButton;
|
package/core/atoms/LinkButton.js
CHANGED
|
@@ -5,7 +5,18 @@ import { BaseButton } from "./shared";
|
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
7
7
|
*/
|
|
8
|
-
const LinkButton = ({
|
|
8
|
+
const LinkButton = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, disabled, target = "_blank", ...linkProps }) => {
|
|
9
|
+
const contentProps = {
|
|
10
|
+
text,
|
|
11
|
+
LeftIcon,
|
|
12
|
+
RightIcon,
|
|
13
|
+
underline,
|
|
14
|
+
backgroundColor,
|
|
15
|
+
color,
|
|
16
|
+
width,
|
|
17
|
+
};
|
|
18
|
+
return disabled ? (_jsx(Content, { ...contentProps })) : (_jsx(Link, { ...linkProps, target: target, children: _jsx(Content, { ...contentProps }) }));
|
|
19
|
+
};
|
|
9
20
|
export default LinkButton;
|
|
10
21
|
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
22
|
//# 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;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,
|
|
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,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,IAAI;QACJ,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,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 text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n disabled,\n target = \"_blank\",\n ...linkProps\n}: LinkButtonProps) => {\n const contentProps = {\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n };\n\n return disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link {...linkProps} target={target}>\n <Content {...contentProps} />\n </Link>\n );\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"]}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
export const main = {
|
|
2
|
-
grantbiiBlue: "#
|
|
3
|
-
grantbiiOrange: "#
|
|
2
|
+
grantbiiBlue: "#16538A",
|
|
3
|
+
grantbiiOrange: "#EBA338",
|
|
4
4
|
};
|
|
5
5
|
export const base = {
|
|
6
6
|
black: "#232022",
|
|
7
|
-
white: "#
|
|
7
|
+
white: "#FFFFFF",
|
|
8
8
|
};
|
|
9
9
|
export const neutral = {
|
|
10
10
|
grey1: "#999999",
|
|
11
|
-
grey2: "#
|
|
12
|
-
grey3: "#
|
|
13
|
-
grey4: "#
|
|
11
|
+
grey2: "#CCCCCC",
|
|
12
|
+
grey3: "#EEEEEE",
|
|
13
|
+
grey4: "#FAFAFA",
|
|
14
14
|
};
|
|
15
15
|
export const accent = {
|
|
16
16
|
// usually includes dangerous, wrong or rejected information
|
|
17
|
-
red1: "#
|
|
18
|
-
red2: "#
|
|
19
|
-
red3: "#
|
|
17
|
+
red1: "#C02318",
|
|
18
|
+
red2: "#F88E86",
|
|
19
|
+
red3: "#FFE9E7",
|
|
20
20
|
// usually indicates warning, progressing, etc
|
|
21
|
-
yellow1: "#
|
|
22
|
-
yellow2: "#
|
|
23
|
-
yellow3: "#
|
|
21
|
+
yellow1: "#EDAB03",
|
|
22
|
+
yellow2: "#F4CC68",
|
|
23
|
+
yellow3: "#FFF9E8",
|
|
24
24
|
// usually indicates success, correct, passed, etc
|
|
25
|
-
green1: "#
|
|
26
|
-
green2: "#
|
|
27
|
-
green3: "#
|
|
25
|
+
green1: "#08A45E",
|
|
26
|
+
green2: "#6BC89E",
|
|
27
|
+
green3: "#EBFFF6",
|
|
28
28
|
// usually indicates info, no emotion
|
|
29
|
-
blue1: "#
|
|
30
|
-
blue2: "#
|
|
31
|
-
blue3: "#
|
|
29
|
+
blue1: "#1878E4",
|
|
30
|
+
blue2: "#74AEEF",
|
|
31
|
+
blue3: "#ECF5FF",
|
|
32
32
|
};
|
|
33
33
|
export const typography = {
|
|
34
|
-
blackHigh: "#
|
|
34
|
+
blackHigh: "#000000E5",
|
|
35
35
|
blackMedium: "#00000099",
|
|
36
|
-
blackLow: "#
|
|
37
|
-
whiteHigh: "#
|
|
38
|
-
whiteMedium: "#
|
|
39
|
-
whiteLow: "#
|
|
36
|
+
blackLow: "#0000004D",
|
|
37
|
+
whiteHigh: "#FFFFFF",
|
|
38
|
+
whiteMedium: "#FFFFFF99",
|
|
39
|
+
whiteLow: "#0000001A",
|
|
40
40
|
};
|
|
41
41
|
export const semantic = {
|
|
42
42
|
overlay: "#13131366",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../core/foundations/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,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,kDAAkD;IAClD,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;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,WAAW;CACrB,CAAC","sourcesContent":["export const main = {\n grantbiiBlue: \"#
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../core/foundations/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,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,kDAAkD;IAClD,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;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,WAAW;CACrB,CAAC","sourcesContent":["export const main = {\n grantbiiBlue: \"#16538A\",\n grantbiiOrange: \"#EBA338\",\n};\n\nexport const base = {\n black: \"#232022\",\n white: \"#FFFFFF\",\n};\n\nexport const neutral = {\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n};\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n};\n\nexport const typography = {\n blackHigh: \"#000000E5\",\n blackMedium: \"#00000099\",\n blackLow: \"#0000004D\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#FFFFFF99\",\n whiteLow: \"#0000001A\",\n};\n\nexport const semantic = {\n overlay: \"#13131366\",\n};\n"]}
|
package/package.json
CHANGED
|
@@ -10,7 +10,10 @@ const meta = {
|
|
|
10
10
|
export default meta;
|
|
11
11
|
const baseArgs = { text: "Link", href: "https://grantbii.com" };
|
|
12
12
|
export const TextOnly = {
|
|
13
|
-
args:
|
|
13
|
+
args: {
|
|
14
|
+
...baseArgs,
|
|
15
|
+
onClick: () => alert("clicked on link"),
|
|
16
|
+
},
|
|
14
17
|
};
|
|
15
18
|
export const LeftIcon = {
|
|
16
19
|
args: {
|
|
@@ -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,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC;AAEhE,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;
|
|
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;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACxC;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: {\n ...baseArgs,\n onClick: () => alert(\"clicked on link\"),\n },\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"]}
|