@ledgerhq/react-ui 0.8.2 → 0.8.3-next.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/lib/cjs/components/cta/Button/Button.stories.js +6 -1
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +16 -2
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +7 -0
- package/lib/components/cta/Button/index.js +15 -2
- package/package.json +1 -1
|
@@ -48,6 +48,10 @@ var Button_stories_default = {
|
|
|
48
48
|
type: "radio"
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
+
size: {
|
|
52
|
+
options: [void 0, "small", "medium", "large"],
|
|
53
|
+
control: { type: "radio" }
|
|
54
|
+
},
|
|
51
55
|
fontSize: {
|
|
52
56
|
options: [void 0, 0, 1, 2, 3, 4, 5, 6, 7, 8],
|
|
53
57
|
control: {
|
|
@@ -71,7 +75,7 @@ var Button_stories_default = {
|
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
};
|
|
74
|
-
const Overview = (() => {
|
|
78
|
+
const Overview = ((args) => {
|
|
75
79
|
const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
|
|
76
80
|
} };
|
|
77
81
|
const propsArr = [
|
|
@@ -94,6 +98,7 @@ const Overview = (() => {
|
|
|
94
98
|
flex: 1,
|
|
95
99
|
columnGap: 4
|
|
96
100
|
}, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
|
|
101
|
+
size: args.size,
|
|
97
102
|
variant: buttonType,
|
|
98
103
|
outline,
|
|
99
104
|
disabled,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n fontSize: {\n options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n control: {\n type: \"radio\",\n },\n },\n children: {\n type: \"text\",\n },\n iconPosition: {\n options: iconPositions,\n control: {\n type: \"radio\",\n },\n },\n disabled: {\n type: \"boolean\",\n },\n outline: {\n type: \"boolean\",\n },\n },\n};\n\nexport const Overview = (() => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.flatMap((buttonType, i) =>\n [false, true].map((outline, j) => (\n <Fragment key={`${i}:${j}`}>\n <Text variant=\"small\" color=\"neutral.c70\">\n variant=\"{buttonType}\"<br />\n outline={`{${outline.toString()}}`}\n </Text>\n {propsArr.map((buttonProps) => (\n <Flex flex={1} columnGap={4}>\n {[false, true].map((disabled) => (\n <Button\n variant={buttonType}\n outline={outline}\n disabled={disabled}\n {...buttonProps}\n />\n ))}\n </Flex>\n ))}\n </Fragment>\n )),\n )}\n </Grid>\n );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n return (\n <Flex flexDirection=\"column\">\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Regular button\"}</Button>\n </Flex>\n <InvertTheme>\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Inverted button\"}</Button>\n </Flex>\n </InvertTheme>\n </Flex>\n );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n children: \"\",\n Icon: WalletAddMedium,\n iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n const [show, setShow] = React.useState(false);\n return (\n <>\n <Button.Expand {...args} onToggle={setShow}>\n {args.children}\n </Button.Expand>\n {show && (\n <div\n style={{\n padding: \"1rem\",\n }}\n >\n Hello world!\n </div>\n )}\n </>\n );\n};\nExpand.args = {\n children: \"Show all\",\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,mBAAqF;AACrF,kBAAiB;AACjB,oBAA4C;AAC5C,yBAA4B;AAC5B,kBAAiB;AACjB,kBAAiB;AAGjB,MAAM,gBAAgC,CAAC,QAAQ;AAC/C,MAAM,iBAAmC,CAAC,QAAQ,SAAS,SAAS;AAEpE,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,QAAW,GAAG;AAAA,MACxB,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,SAAS,CAAC,QAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC7C,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,SAAS;AAAA,MACP,MAAM;AAAA;AAAA;AAAA;AAKL,MAAM,WAAY,
|
|
4
|
+
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n size: {\n options: [undefined, \"small\", \"medium\", \"large\"],\n control: { type: \"radio\" },\n },\n fontSize: {\n options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n control: {\n type: \"radio\",\n },\n },\n children: {\n type: \"text\",\n },\n iconPosition: {\n options: iconPositions,\n control: {\n type: \"radio\",\n },\n },\n disabled: {\n type: \"boolean\",\n },\n outline: {\n type: \"boolean\",\n },\n },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.flatMap((buttonType, i) =>\n [false, true].map((outline, j) => (\n <Fragment key={`${i}:${j}`}>\n <Text variant=\"small\" color=\"neutral.c70\">\n variant=\"{buttonType}\"<br />\n outline={`{${outline.toString()}}`}\n </Text>\n {propsArr.map((buttonProps) => (\n <Flex flex={1} columnGap={4}>\n {[false, true].map((disabled) => (\n <Button\n size={args.size}\n variant={buttonType}\n outline={outline}\n disabled={disabled}\n {...buttonProps}\n />\n ))}\n </Flex>\n ))}\n </Fragment>\n )),\n )}\n </Grid>\n );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n return (\n <Flex flexDirection=\"column\">\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Regular button\"}</Button>\n </Flex>\n <InvertTheme>\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Inverted button\"}</Button>\n </Flex>\n </InvertTheme>\n </Flex>\n );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n children: \"\",\n Icon: WalletAddMedium,\n iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n const [show, setShow] = React.useState(false);\n return (\n <>\n <Button.Expand {...args} onToggle={setShow}>\n {args.children}\n </Button.Expand>\n {show && (\n <div\n style={{\n padding: \"1rem\",\n }}\n >\n Hello world!\n </div>\n )}\n </>\n );\n};\nExpand.args = {\n children: \"Show all\",\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ __export(exports, {
|
|
|
25
25
|
Base: () => Base,
|
|
26
26
|
ButtonExpand: () => ButtonExpand,
|
|
27
27
|
ButtonUnstyled: () => ButtonUnstyled,
|
|
28
|
+
buttonSizeStyle: () => buttonSizeStyle,
|
|
28
29
|
default: () => Button_default
|
|
29
30
|
});
|
|
30
31
|
var import_react = __toModule(require("react"));
|
|
@@ -156,14 +157,13 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
156
157
|
border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
|
|
157
158
|
font-weight: 600;
|
|
158
159
|
${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
|
|
159
|
-
height: ${(p) => p.theme.space[13]}px;
|
|
160
160
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
161
161
|
text-align: center;
|
|
162
162
|
display: inline-flex;
|
|
163
163
|
align-items: center;
|
|
164
164
|
justify-content: center;
|
|
165
|
-
padding: 0 2em;
|
|
166
165
|
overflow: hidden;
|
|
166
|
+
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
167
167
|
text-overflow: ellipsis;
|
|
168
168
|
white-space: nowrap;
|
|
169
169
|
max-width: 100%;
|
|
@@ -254,6 +254,20 @@ function ButtonExpand({ onToggle, onClick, ...props }, ref) {
|
|
|
254
254
|
}
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
|
+
const buttonSizeStyle = {
|
|
258
|
+
small: {
|
|
259
|
+
padding: "0 20px",
|
|
260
|
+
height: "32px"
|
|
261
|
+
},
|
|
262
|
+
medium: {
|
|
263
|
+
padding: "0 24px",
|
|
264
|
+
height: "40px"
|
|
265
|
+
},
|
|
266
|
+
large: {
|
|
267
|
+
padding: "0 28px",
|
|
268
|
+
height: "48px"
|
|
269
|
+
}
|
|
270
|
+
};
|
|
257
271
|
Button.Unstyled = ButtonUnstyled;
|
|
258
272
|
Button.Expand = import_react.default.forwardRef(ButtonExpand);
|
|
259
273
|
ButtonWithRef.Unstyled = Button.Unstyled;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n iconName?: string;\n Icon?: React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c00};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c100};\n color: ${p.theme.colors.error.c100};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c100};\n &:hover {\n background-color: ${p.theme.colors.error.c80};\n }\n `,\n },\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: ${(p) => p.theme.space[13]}px;\n border-style: solid;\n border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,kCAA0B;AAC1B,kBAA0B;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n iconName?: string;\n Icon?: React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c00};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c100};\n color: ${p.theme.colors.error.c100};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c100};\n &:hover {\n background-color: ${p.theme.colors.error.c80};\n }\n `,\n },\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: ${(p) => p.theme.space[13]}px;\n border-style: solid;\n border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n position: relative;\n cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${(p) => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[13]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n {\n Icon,\n iconPosition = \"right\",\n iconSize = 16,\n children,\n onClick,\n iconName,\n ...props\n }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(\n () =>\n (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n (Icon && <Icon size={iconNodeSize} />),\n [iconName, iconNodeSize, Icon],\n );\n\n return (\n <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n </Base>\n );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n ButtonProps & {\n onToggle?: (arg0: boolean) => void;\n }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n Icon: props.Icon != null || ChevronBottom,\n iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n ${IconContainer} {\n transition: transform 0.25s;\n ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n }\n`;\nexport function ButtonExpand(\n { onToggle, onClick, ...props }: ButtonExpandProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n const [expanded, setExpanded] = useState(false);\n return (\n <StyledButtonExpand\n {...props}\n ref={ref}\n expanded={expanded}\n onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((expanded) => !expanded);\n onToggle != null && onToggle(!expanded);\n onClick != null && onClick(event);\n }}\n />\n );\n}\n\nexport const buttonSizeStyle: {\n [index: string]: {\n padding: string;\n height: string;\n };\n} = {\n small: {\n padding: \"0 20px\",\n height: \"32px\",\n },\n medium: {\n padding: \"0 24px\",\n height: \"40px\",\n },\n large: {\n padding: \"0 28px\",\n height: \"48px\",\n },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
|
|
|
7
7
|
ff?: string;
|
|
8
8
|
color?: string;
|
|
9
9
|
backgroundColor?: string;
|
|
10
|
+
size?: "small" | "medium" | "large";
|
|
10
11
|
fontSize?: number;
|
|
11
12
|
variant?: ButtonVariants;
|
|
12
13
|
outline?: boolean;
|
|
@@ -41,4 +42,10 @@ export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
|
|
|
41
42
|
onToggle?: (arg0: boolean) => void;
|
|
42
43
|
}>;
|
|
43
44
|
export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
|
|
45
|
+
export declare const buttonSizeStyle: {
|
|
46
|
+
[index: string]: {
|
|
47
|
+
padding: string;
|
|
48
|
+
height: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
44
51
|
export default ButtonWithRef;
|
|
@@ -141,14 +141,13 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
141
141
|
border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
|
|
142
142
|
font-weight: 600;
|
|
143
143
|
${compose(fontFamily, fontSize, border)};
|
|
144
|
-
height: ${(p) => p.theme.space[13]}px;
|
|
145
144
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
146
145
|
text-align: center;
|
|
147
146
|
display: inline-flex;
|
|
148
147
|
align-items: center;
|
|
149
148
|
justify-content: center;
|
|
150
|
-
padding: 0 2em;
|
|
151
149
|
overflow: hidden;
|
|
150
|
+
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
152
151
|
text-overflow: ellipsis;
|
|
153
152
|
white-space: nowrap;
|
|
154
153
|
max-width: 100%;
|
|
@@ -226,6 +225,20 @@ export function ButtonExpand(_a, ref) {
|
|
|
226
225
|
onClick != null && onClick(event);
|
|
227
226
|
} })));
|
|
228
227
|
}
|
|
228
|
+
export const buttonSizeStyle = {
|
|
229
|
+
small: {
|
|
230
|
+
padding: "0 20px",
|
|
231
|
+
height: "32px",
|
|
232
|
+
},
|
|
233
|
+
medium: {
|
|
234
|
+
padding: "0 24px",
|
|
235
|
+
height: "40px",
|
|
236
|
+
},
|
|
237
|
+
large: {
|
|
238
|
+
padding: "0 28px",
|
|
239
|
+
height: "48px",
|
|
240
|
+
},
|
|
241
|
+
};
|
|
229
242
|
Button.Unstyled = ButtonUnstyled;
|
|
230
243
|
Button.Expand = React.forwardRef(ButtonExpand);
|
|
231
244
|
ButtonWithRef.Unstyled = Button.Unstyled;
|