@ledgerhq/react-ui 0.9.0 → 0.9.1-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/asorted/Icon/CryptoIcon.js +97 -6
- package/lib/cjs/components/asorted/Icon/CryptoIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js +46 -2
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +1 -1
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/form/Radio/RadioElement.js +1 -0
- package/lib/cjs/components/form/Radio/RadioElement.js.map +2 -2
- package/lib/cjs/styles/InvertTheme.js.map +2 -2
- package/lib/components/asorted/Icon/CryptoIcon.d.ts +5 -1
- package/lib/components/asorted/Icon/CryptoIcon.js +60 -6
- package/lib/components/cta/Button/index.d.ts +2 -1
- package/lib/components/cta/Button/index.js +1 -1
- package/lib/components/form/Radio/RadioElement.js +1 -0
- package/package.json +1 -1
|
@@ -29,25 +29,116 @@ var icons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
|
|
|
29
29
|
var import_react = __toModule(require("react"));
|
|
30
30
|
var import_styles = __toModule(require("../../../styles"));
|
|
31
31
|
var import_styled_components = __toModule(require("styled-components"));
|
|
32
|
+
var import_Text = __toModule(require("../Text/index"));
|
|
33
|
+
var import_Flex = __toModule(require("../../layout/Flex"));
|
|
32
34
|
const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
|
|
33
35
|
const key = rawKey;
|
|
34
36
|
if (!set.has(key))
|
|
35
37
|
set.add(key);
|
|
36
38
|
return set;
|
|
37
39
|
}, new Set()));
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
+
const Container = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
|
|
41
|
+
heigth: p.size,
|
|
42
|
+
width: p.size,
|
|
43
|
+
alignItems: "center",
|
|
44
|
+
justifyContent: "center",
|
|
45
|
+
position: "relative"
|
|
46
|
+
}))``;
|
|
47
|
+
const Circle = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
|
|
48
|
+
heigth: p.size,
|
|
49
|
+
width: p.size,
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
justifyContent: "center",
|
|
52
|
+
position: "relative",
|
|
53
|
+
borderRadius: "50%",
|
|
54
|
+
backgroundColor: p.backgroundColor
|
|
55
|
+
}))``;
|
|
56
|
+
const TokenContainer = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
|
|
57
|
+
position: "absolute",
|
|
58
|
+
bottom: "-2px",
|
|
59
|
+
right: "-5px",
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
justifyContent: "center",
|
|
62
|
+
heigth: p.size,
|
|
63
|
+
width: p.size,
|
|
64
|
+
borderRadius: "50%",
|
|
65
|
+
border: `2px solid ${p.borderColor}`,
|
|
66
|
+
backgroundColor: p.backgroundColor,
|
|
67
|
+
zIndex: 0
|
|
68
|
+
}))``;
|
|
69
|
+
function Fallback({ name }) {
|
|
70
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
71
|
+
uppercase: true,
|
|
72
|
+
color: "neutral.c70"
|
|
73
|
+
}, name.slice(0, 1));
|
|
74
|
+
}
|
|
75
|
+
const IconBox = ({
|
|
76
|
+
children,
|
|
77
|
+
color,
|
|
78
|
+
backgroundColor,
|
|
79
|
+
disabled,
|
|
80
|
+
size = 16,
|
|
81
|
+
tokenIcon = ""
|
|
82
|
+
}) => {
|
|
83
|
+
const { colors } = (0, import_styled_components.useTheme)();
|
|
84
|
+
if (tokenIcon in icons) {
|
|
85
|
+
const Component = icons[tokenIcon];
|
|
86
|
+
const defaultColor = Component.DefaultColor;
|
|
87
|
+
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
88
|
+
const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
|
|
89
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, {
|
|
90
|
+
size
|
|
91
|
+
}, children, tokenIcon && /* @__PURE__ */ import_react.default.createElement(TokenContainer, {
|
|
92
|
+
size: size / 3,
|
|
93
|
+
borderColor: colors.background.main,
|
|
94
|
+
backgroundColor: contrastedColor
|
|
95
|
+
}, /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
96
|
+
size,
|
|
97
|
+
color: colors.background.main
|
|
98
|
+
})));
|
|
99
|
+
}
|
|
100
|
+
return children;
|
|
101
|
+
};
|
|
102
|
+
const CryptoIcon = ({
|
|
103
|
+
name,
|
|
104
|
+
size = 16,
|
|
105
|
+
color,
|
|
106
|
+
backgroundColor,
|
|
107
|
+
circleIcon,
|
|
108
|
+
disabled,
|
|
109
|
+
tokenIcon,
|
|
110
|
+
fallbackIcon
|
|
111
|
+
}) => {
|
|
40
112
|
const { colors } = (0, import_styled_components.useTheme)();
|
|
113
|
+
const maybeIconName = `${name}`;
|
|
41
114
|
if (maybeIconName in icons) {
|
|
42
115
|
const Component = icons[maybeIconName];
|
|
43
116
|
const defaultColor = Component.DefaultColor;
|
|
44
|
-
const
|
|
45
|
-
|
|
117
|
+
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
118
|
+
const contrastedColor = (0, import_styles.ensureContrast)(iconColor, backgroundColor || colors.background.main);
|
|
119
|
+
return /* @__PURE__ */ import_react.default.createElement(IconBox, {
|
|
120
|
+
size,
|
|
121
|
+
tokenIcon,
|
|
122
|
+
color,
|
|
123
|
+
disabled,
|
|
124
|
+
name
|
|
125
|
+
}, tokenIcon || circleIcon ? /* @__PURE__ */ import_react.default.createElement(Circle, {
|
|
126
|
+
backgroundColor: contrastedColor,
|
|
127
|
+
size
|
|
128
|
+
}, /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
129
|
+
size,
|
|
130
|
+
color: colors.background.main
|
|
131
|
+
})) : /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
46
132
|
size,
|
|
47
133
|
color: contrastedColor
|
|
48
|
-
});
|
|
134
|
+
}));
|
|
135
|
+
}
|
|
136
|
+
if (fallbackIcon) {
|
|
137
|
+
return fallbackIcon;
|
|
49
138
|
}
|
|
50
|
-
return
|
|
139
|
+
return /* @__PURE__ */ import_react.default.createElement(Fallback, {
|
|
140
|
+
name
|
|
141
|
+
});
|
|
51
142
|
};
|
|
52
143
|
var CryptoIcon_default = CryptoIcon;
|
|
53
144
|
//# sourceMappingURL=CryptoIcon.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/CryptoIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as icons from \"@ledgerhq/crypto-icons-ui/react\";\nimport React from \"react\";\nimport { ensureContrast } from \"../../../styles\";\nimport { useTheme } from \"styled-components\";\n\nexport type Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n};\n\nexport const iconNames = Array.from(\n Object.keys(icons).reduce((set, rawKey) => {\n const key = rawKey;\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAClB,oBAA+B;AAC/B,+
|
|
4
|
+
"sourcesContent": ["import * as icons from \"@ledgerhq/crypto-icons-ui/react\";\nimport React from \"react\";\nimport { ensureContrast } from \"../../../styles\";\nimport styled, { useTheme } from \"styled-components\";\nimport Text from \"../Text/index\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n fallbackIcon?: JSX.Element;\n};\n\ntype IconBoxProps = {\n children: JSX.Element;\n} & Props;\n\ntype FallbackProps = {\n name: string;\n};\n\nexport const iconNames = Array.from(\n Object.keys(icons).reduce((set, rawKey) => {\n const key = rawKey;\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst Container = styled(Flex).attrs((p: { size: number }) => ({\n heigth: p.size,\n width: p.size,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n}))<{ size: number }>``;\n\nconst Circle = styled(Flex).attrs((p: { size: number; backgroundColor: string }) => ({\n heigth: p.size,\n width: p.size,\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n borderRadius: \"50%\",\n backgroundColor: p.backgroundColor,\n}))<{ size: number }>``;\n\nconst TokenContainer = styled(Flex).attrs(\n (p: { size: number; borderColor: string; backgroundColor: string }) => ({\n position: \"absolute\",\n bottom: \"-2px\",\n right: \"-5px\",\n alignItems: \"center\",\n justifyContent: \"center\",\n heigth: p.size,\n width: p.size,\n borderRadius: \"50%\",\n border: `2px solid ${p.borderColor}`,\n backgroundColor: p.backgroundColor,\n zIndex: 0,\n }),\n)<{ size: number }>``;\n\nfunction Fallback({ name }: FallbackProps) {\n return (\n <Text uppercase color=\"neutral.c70\">\n {name.slice(0, 1)}\n </Text>\n );\n}\n\nconst IconBox = ({\n children,\n color,\n backgroundColor,\n disabled,\n size = 16,\n tokenIcon = \"\",\n}: IconBoxProps) => {\n const { colors } = useTheme();\n if (tokenIcon in icons) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = icons[tokenIcon];\n const defaultColor = Component.DefaultColor;\n const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;\n const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);\n return (\n <Container size={size}>\n {children}\n {tokenIcon && (\n <TokenContainer\n size={size / 3}\n borderColor={colors.background.main}\n backgroundColor={contrastedColor}\n >\n <Component size={size} color={colors.background.main} />\n </TokenContainer>\n )}\n </Container>\n );\n }\n return children;\n};\n\nconst CryptoIcon = ({\n name,\n size = 16,\n color,\n backgroundColor,\n circleIcon,\n disabled,\n tokenIcon,\n fallbackIcon,\n}: Props): JSX.Element => {\n const { colors } = useTheme();\n const maybeIconName = `${name}`;\n if (maybeIconName in icons) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = icons[maybeIconName];\n const defaultColor = Component.DefaultColor;\n const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;\n const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);\n\n return (\n <IconBox size={size} tokenIcon={tokenIcon} color={color} disabled={disabled} name={name}>\n {tokenIcon || circleIcon ? (\n <Circle backgroundColor={contrastedColor} size={size}>\n <Component size={size} color={colors.background.main} />\n </Circle>\n ) : (\n <Component size={size} color={contrastedColor} />\n )}\n </IconBox>\n );\n }\n if (fallbackIcon) {\n return fallbackIcon;\n }\n return <Fallback name={name} />;\n};\n\nexport default CryptoIcon;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,6 +30,24 @@ var import_react = __toModule(require("react"));
|
|
|
30
30
|
var import_styled_components = __toModule(require("styled-components"));
|
|
31
31
|
var import__ = __toModule(require("../../.."));
|
|
32
32
|
var cryptoIcons = __toModule(require("@ledgerhq/crypto-icons-ui/react"));
|
|
33
|
+
const description = `
|
|
34
|
+
### A customizable crypto-icon component.
|
|
35
|
+
|
|
36
|
+
### Props
|
|
37
|
+
|
|
38
|
+
\`\`\`tsx
|
|
39
|
+
type Props = {
|
|
40
|
+
name: string;
|
|
41
|
+
size?: number;
|
|
42
|
+
color?: string;
|
|
43
|
+
backgroundColor?: string; // overrides background color to ensure contrast with icon color
|
|
44
|
+
circleIcon?: boolean; // if icon is in a circle or not
|
|
45
|
+
tokenIcon?: string; // ref to the token icon to show as a sub icon
|
|
46
|
+
disabled?: boolean;
|
|
47
|
+
fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name
|
|
48
|
+
};
|
|
49
|
+
\`\`\`
|
|
50
|
+
`;
|
|
33
51
|
const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
|
|
34
52
|
flex: 1;
|
|
35
53
|
height: auto;
|
|
@@ -79,6 +97,28 @@ const Story = {
|
|
|
79
97
|
type: "select"
|
|
80
98
|
}
|
|
81
99
|
}
|
|
100
|
+
},
|
|
101
|
+
circleIcon: {
|
|
102
|
+
type: "boolean",
|
|
103
|
+
description: "if icon is in a circle or not",
|
|
104
|
+
defaultValue: false
|
|
105
|
+
},
|
|
106
|
+
disabled: {
|
|
107
|
+
type: "boolean",
|
|
108
|
+
description: "if icon is in a disabled or not",
|
|
109
|
+
defaultValue: false
|
|
110
|
+
},
|
|
111
|
+
tokenIcon: {
|
|
112
|
+
type: "string",
|
|
113
|
+
description: "ref to the token icon to show as a sub icon",
|
|
114
|
+
defaultValue: ""
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
parameters: {
|
|
118
|
+
docs: {
|
|
119
|
+
description: {
|
|
120
|
+
component: description
|
|
121
|
+
}
|
|
82
122
|
}
|
|
83
123
|
}
|
|
84
124
|
};
|
|
@@ -88,6 +128,7 @@ const ListTemplate = (args) => {
|
|
|
88
128
|
const [search, setSearch] = (0, import_react.useState)("");
|
|
89
129
|
const s = search.toLowerCase();
|
|
90
130
|
const regexp = new RegExp(s, "i");
|
|
131
|
+
const { tokenIcon, disabled, circleIcon, size } = args;
|
|
91
132
|
return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, {
|
|
92
133
|
value: search,
|
|
93
134
|
onChange: setSearch
|
|
@@ -111,8 +152,11 @@ const ListTemplate = (args) => {
|
|
|
111
152
|
}, /* @__PURE__ */ import_react.default.createElement(import__.CryptoIcon, {
|
|
112
153
|
key: name,
|
|
113
154
|
name,
|
|
114
|
-
size
|
|
115
|
-
color
|
|
155
|
+
size,
|
|
156
|
+
color,
|
|
157
|
+
disabled,
|
|
158
|
+
circleIcon,
|
|
159
|
+
tokenIcon
|
|
116
160
|
})), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
|
|
117
161
|
variant: "extraSmall"
|
|
118
162
|
}, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n defaultValue: 32,\n },\n color: {\n type: \"string\",\n description: \"Color\",\n control: { control: \"color\" },\n },\n name: {\n type: \"enum\",\n defaultValue: \"BTC\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: Object.keys(cryptoIcons),\n control: {\n type: \"select\",\n },\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {Object.keys(cryptoIcons)\n .sort((a, b) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n // @ts-expect-error FIXME I don't know how to make you happy ts\n .map((name: keyof typeof cryptoIcons) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <CryptoIcon
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,eAA0D;AAC1D,kBAA6B;
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean; // if icon is in a circle or not\n tokenIcon?: string; // ref to the token icon to show as a sub icon\n disabled?: boolean;\n fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n defaultValue: 32,\n },\n color: {\n type: \"string\",\n description: \"Color\",\n control: { control: \"color\" },\n },\n name: {\n type: \"enum\",\n defaultValue: \"BTC\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: Object.keys(cryptoIcons),\n control: {\n type: \"select\",\n },\n },\n },\n circleIcon: {\n type: \"boolean\",\n description: \"if icon is in a circle or not\",\n defaultValue: false,\n },\n disabled: {\n type: \"boolean\",\n description: \"if icon is in a disabled or not\",\n defaultValue: false,\n },\n tokenIcon: {\n type: \"string\",\n description: \"ref to the token icon to show as a sub icon\",\n defaultValue: \"\",\n },\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n const { tokenIcon, disabled, circleIcon, size } = args;\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {Object.keys(cryptoIcons)\n .sort((a, b) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n // @ts-expect-error FIXME I don't know how to make you happy ts\n .map((name: keyof typeof cryptoIcons) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <CryptoIcon\n key={name}\n name={name}\n size={size}\n color={color}\n disabled={disabled}\n circleIcon={circleIcon}\n tokenIcon={tokenIcon}\n />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n\n return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -165,7 +165,7 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
165
165
|
overflow: hidden;
|
|
166
166
|
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
167
167
|
text-overflow: ellipsis;
|
|
168
|
-
white-space: nowrap;
|
|
168
|
+
white-space: ${(p) => p.whiteSpace ? p.whiteSpace : "nowrap"};
|
|
169
169
|
max-width: 100%;
|
|
170
170
|
position: relative;
|
|
171
171
|
cursor: ${(p) => p.disabled ? "default" : "pointer"};
|
|
@@ -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 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": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;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 whiteSpace?: string;\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: ${(p) => (p.whiteSpace ? p.whiteSpace : \"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
|
}
|
|
@@ -31,6 +31,7 @@ var import_Text = __toModule(require("../../asorted/Text"));
|
|
|
31
31
|
var import_index = __toModule(require("./index"));
|
|
32
32
|
const Label = (0, import_styled_components.default)(import_Text.default)`
|
|
33
33
|
color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
|
|
34
|
+
width: 266px;
|
|
34
35
|
`;
|
|
35
36
|
const Input = import_styled_components.default.input`
|
|
36
37
|
--ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${(p) => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n border-radius: ${(p) => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${(p) => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${(p) => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${(p) => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioElement\n data-variant={variant}\n {...(isChecked ? { \"data-checked\": true } : {})}\n outlined={outlined}\n >\n <Input\n type=\"radio\"\n data-variant={variant}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Label variant=\"paragraph\">{label}</Label>\n </RadioElement>\n );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,+BAA4B;AAE5B,qBAAqB;AACrB,kBAAiB;AACjB,mBAA6B;AAE7B,MAAM,QAAQ,sCAAO;AAAA,2CACsB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n width: 266px;\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${(p) => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n border-radius: ${(p) => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${(p) => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${(p) => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${(p) => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${(p) => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.success.c100};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n :hover {\n border-color: ${(p) => p.theme.colors.error.c100};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${(p) => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioElement\n data-variant={variant}\n {...(isChecked ? { \"data-checked\": true } : {})}\n outlined={outlined}\n >\n <Input\n type=\"radio\"\n data-variant={variant}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Label variant=\"paragraph\">{label}</Label>\n </RadioElement>\n );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\n\nexport default Element;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/InvertTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport V3dDfaultTheme, { Theme } from \"./theme\";\n\nexport type Props = {\n if?: boolean;\n};\n\nexport const InvertTheme = ({\n if: condition,\n children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n const theme = useTheme();\n const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n theme: revertTheme,\n }),\n [revertTheme],\n );\n\n return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n\nexport const InvertThemeV3 = ({ children }: any): React.ReactElement => {\n const theme = useTheme();\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;AACzB,mBAAsC;AAM/B,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAI;AAAA,EACJ;AAAA,MACwD;AACxD,QAAM,QAAQ;AACd,QAAM,cAAc,MAAM,UAAU,UAAU,SAAS;AACvD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,IACH,QAAQ,KAAK,0BAAS,cAAc,SAAS,0BAAS;AAAA,IACtD,OAAO;AAAA,MAET,CAAC;AAGH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO,YAAY,WAAW;AAAA,KAAQ;AAAA;AAGvD,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACtE,QAAM,QAAQ;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\nimport { defaultTheme } from \".\";\nimport { palettes } from \"@ledgerhq/ui-shared\";\nimport V3dDfaultTheme, { Theme } from \"./theme\";\n\nexport type Props = {\n if?: boolean;\n};\n\nexport const InvertTheme = ({\n if: condition,\n children,\n}: React.PropsWithChildren<Props>): React.ReactElement => {\n const theme = useTheme();\n const revertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n colors: { ...palettes[revertTheme], palette: palettes[revertTheme] },\n theme: revertTheme,\n }),\n [revertTheme],\n );\n\n return <ThemeProvider theme={condition ? newTheme : theme}>{children}</ThemeProvider>;\n};\n\nexport const InvertThemeV3 = ({ children }: any): React.ReactElement => {\n const theme = useTheme();\n const v3RevertTheme = theme.theme === \"light\" ? \"dark\" : \"light\";\n const newTheme: Theme = useMemo(\n () => ({\n ...defaultTheme,\n ...V3dDfaultTheme,\n colors: {\n ...defaultTheme.colors,\n ...palettes[v3RevertTheme],\n palette: palettes[v3RevertTheme],\n },\n theme: v3RevertTheme,\n }),\n [v3RevertTheme],\n );\n return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,+BAAwC;AACxC,eAA6B;AAC7B,uBAAyB;AACzB,mBAAsC;AAM/B,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAI;AAAA,EACJ;AAAA,MACwD;AACxD,QAAM,QAAQ;AACd,QAAM,cAAc,MAAM,UAAU,UAAU,SAAS;AACvD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,IACH,QAAQ,KAAK,0BAAS,cAAc,SAAS,0BAAS;AAAA,IACtD,OAAO;AAAA,MAET,CAAC;AAGH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO,YAAY,WAAW;AAAA,KAAQ;AAAA;AAGvD,MAAM,gBAAgB,CAAC,EAAE,eAAwC;AACtE,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM,UAAU,UAAU,SAAS;AACzD,QAAM,WAAkB,0BACtB,MAAO;AAAA,OACF;AAAA,OACA;AAAA,IACH,QAAQ;AAAA,SACH,sBAAa;AAAA,SACb,0BAAS;AAAA,MACZ,SAAS,0BAAS;AAAA;AAAA,IAEpB,OAAO;AAAA,MAET,CAAC;AAEH,SAAO,mDAAC,wCAAD;AAAA,IAAe,OAAO;AAAA,KAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,11 @@ export declare type Props = {
|
|
|
4
4
|
size?: number;
|
|
5
5
|
color?: string;
|
|
6
6
|
backgroundColor?: string;
|
|
7
|
+
circleIcon?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
tokenIcon?: string;
|
|
10
|
+
fallbackIcon?: JSX.Element;
|
|
7
11
|
};
|
|
8
12
|
export declare const iconNames: string[];
|
|
9
|
-
declare const CryptoIcon: ({ name, size, color, backgroundColor }: Props) => JSX.Element
|
|
13
|
+
declare const CryptoIcon: ({ name, size, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }: Props) => JSX.Element;
|
|
10
14
|
export default CryptoIcon;
|
|
@@ -1,23 +1,77 @@
|
|
|
1
1
|
import * as icons from "@ledgerhq/crypto-icons-ui/react";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { ensureContrast } from "../../../styles";
|
|
4
|
-
import { useTheme } from "styled-components";
|
|
4
|
+
import styled, { useTheme } from "styled-components";
|
|
5
|
+
import Text from "../Text/index";
|
|
6
|
+
import Flex from "../../layout/Flex";
|
|
5
7
|
export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
|
|
6
8
|
const key = rawKey;
|
|
7
9
|
if (!set.has(key))
|
|
8
10
|
set.add(key);
|
|
9
11
|
return set;
|
|
10
12
|
}, new Set()));
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
+
const Container = styled(Flex).attrs((p) => ({
|
|
14
|
+
heigth: p.size,
|
|
15
|
+
width: p.size,
|
|
16
|
+
alignItems: "center",
|
|
17
|
+
justifyContent: "center",
|
|
18
|
+
position: "relative",
|
|
19
|
+
})) ``;
|
|
20
|
+
const Circle = styled(Flex).attrs((p) => ({
|
|
21
|
+
heigth: p.size,
|
|
22
|
+
width: p.size,
|
|
23
|
+
alignItems: "center",
|
|
24
|
+
justifyContent: "center",
|
|
25
|
+
position: "relative",
|
|
26
|
+
borderRadius: "50%",
|
|
27
|
+
backgroundColor: p.backgroundColor,
|
|
28
|
+
})) ``;
|
|
29
|
+
const TokenContainer = styled(Flex).attrs((p) => ({
|
|
30
|
+
position: "absolute",
|
|
31
|
+
bottom: "-2px",
|
|
32
|
+
right: "-5px",
|
|
33
|
+
alignItems: "center",
|
|
34
|
+
justifyContent: "center",
|
|
35
|
+
heigth: p.size,
|
|
36
|
+
width: p.size,
|
|
37
|
+
borderRadius: "50%",
|
|
38
|
+
border: `2px solid ${p.borderColor}`,
|
|
39
|
+
backgroundColor: p.backgroundColor,
|
|
40
|
+
zIndex: 0,
|
|
41
|
+
})) ``;
|
|
42
|
+
function Fallback({ name }) {
|
|
43
|
+
return (React.createElement(Text, { uppercase: true, color: "neutral.c70" }, name.slice(0, 1)));
|
|
44
|
+
}
|
|
45
|
+
const IconBox = ({ children, color, backgroundColor, disabled, size = 16, tokenIcon = "", }) => {
|
|
46
|
+
const { colors } = useTheme();
|
|
47
|
+
if (tokenIcon in icons) {
|
|
48
|
+
// @ts-expect-error FIXME I don't know how to make you happy ts
|
|
49
|
+
const Component = icons[tokenIcon];
|
|
50
|
+
const defaultColor = Component.DefaultColor;
|
|
51
|
+
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
52
|
+
const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
|
|
53
|
+
return (React.createElement(Container, { size: size },
|
|
54
|
+
children,
|
|
55
|
+
tokenIcon && (React.createElement(TokenContainer, { size: size / 3, borderColor: colors.background.main, backgroundColor: contrastedColor },
|
|
56
|
+
React.createElement(Component, { size: size, color: colors.background.main })))));
|
|
57
|
+
}
|
|
58
|
+
return children;
|
|
59
|
+
};
|
|
60
|
+
const CryptoIcon = ({ name, size = 16, color, backgroundColor, circleIcon, disabled, tokenIcon, fallbackIcon, }) => {
|
|
13
61
|
const { colors } = useTheme();
|
|
62
|
+
const maybeIconName = `${name}`;
|
|
14
63
|
if (maybeIconName in icons) {
|
|
15
64
|
// @ts-expect-error FIXME I don't know how to make you happy ts
|
|
16
65
|
const Component = icons[maybeIconName];
|
|
17
66
|
const defaultColor = Component.DefaultColor;
|
|
18
|
-
const
|
|
19
|
-
|
|
67
|
+
const iconColor = disabled ? colors.neutral.c70 : color || defaultColor;
|
|
68
|
+
const contrastedColor = ensureContrast(iconColor, backgroundColor || colors.background.main);
|
|
69
|
+
return (React.createElement(IconBox, { size: size, tokenIcon: tokenIcon, color: color, disabled: disabled, name: name }, tokenIcon || circleIcon ? (React.createElement(Circle, { backgroundColor: contrastedColor, size: size },
|
|
70
|
+
React.createElement(Component, { size: size, color: colors.background.main }))) : (React.createElement(Component, { size: size, color: contrastedColor }))));
|
|
71
|
+
}
|
|
72
|
+
if (fallbackIcon) {
|
|
73
|
+
return fallbackIcon;
|
|
20
74
|
}
|
|
21
|
-
return
|
|
75
|
+
return React.createElement(Fallback, { name: name });
|
|
22
76
|
};
|
|
23
77
|
export default CryptoIcon;
|
|
@@ -14,6 +14,7 @@ interface BaseProps extends BaseStyledProps, BordersProps {
|
|
|
14
14
|
iconPosition?: IconPosition;
|
|
15
15
|
iconButton?: boolean;
|
|
16
16
|
disabled?: boolean;
|
|
17
|
+
whiteSpace?: string;
|
|
17
18
|
}
|
|
18
19
|
export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
|
|
19
20
|
iconName?: string;
|
|
@@ -36,7 +37,7 @@ declare const ButtonWithRef: {
|
|
|
36
37
|
Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
37
38
|
Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
|
|
38
39
|
onToggle?: ((arg0: boolean) => void) | undefined;
|
|
39
|
-
}, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
|
|
40
|
+
}, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton" | "iconName"> & React.RefAttributes<HTMLButtonElement>>;
|
|
40
41
|
};
|
|
41
42
|
export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
|
|
42
43
|
onToggle?: (arg0: boolean) => void;
|
|
@@ -149,7 +149,7 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
149
149
|
overflow: hidden;
|
|
150
150
|
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
151
151
|
text-overflow: ellipsis;
|
|
152
|
-
white-space: nowrap;
|
|
152
|
+
white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : "nowrap")};
|
|
153
153
|
max-width: 100%;
|
|
154
154
|
position: relative;
|
|
155
155
|
cursor: ${(p) => (p.disabled ? "default" : "pointer")};
|
|
@@ -16,6 +16,7 @@ import Text from "../../asorted/Text";
|
|
|
16
16
|
import { RadioContext } from "./index";
|
|
17
17
|
const Label = styled(Text) `
|
|
18
18
|
color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
|
|
19
|
+
width: 266px;
|
|
19
20
|
`;
|
|
20
21
|
const Input = styled.input `
|
|
21
22
|
--ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
|