@ledgerhq/react-ui 0.9.3-nightly.0 → 0.10.0-nightly.1
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/PaymentIcon.js +10 -2
- package/lib/cjs/components/asorted/Icon/PaymentIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js +1 -9
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js +11 -3
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/Providers.stories.js +1 -9
- package/lib/cjs/components/asorted/Icon/Providers.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Text/styles.js +18 -0
- package/lib/cjs/components/asorted/Text/styles.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +10 -1
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/layout/Drawer/index.js +12 -15
- package/lib/cjs/components/layout/Drawer/index.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +3 -5
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +2 -2
- package/lib/cjs/styles/theme.js +4 -0
- package/lib/cjs/styles/theme.js.map +2 -2
- package/lib/components/asorted/Icon/PaymentIcon.d.ts +5 -1
- package/lib/components/asorted/Icon/PaymentIcon.js +10 -3
- package/lib/components/asorted/Icon/ProviderIcon.d.ts +5 -1
- package/lib/components/asorted/Icon/ProviderIcon.js +11 -5
- package/lib/components/asorted/Text/styles.js +18 -0
- package/lib/components/cta/Button/index.d.ts +1 -1
- package/lib/components/cta/Button/index.js +10 -1
- package/lib/components/layout/Drawer/index.js +4 -11
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +2 -4
- package/lib/styles/theme.d.ts +1 -1
- package/lib/styles/theme.js +4 -0
- package/package.json +1 -1
|
@@ -42,10 +42,18 @@ const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey)
|
|
|
42
42
|
set.add(key);
|
|
43
43
|
return set;
|
|
44
44
|
}, new Set()));
|
|
45
|
+
const getIconCaseInsensitive = ({ search, object }) => {
|
|
46
|
+
const asLower = search.toLowerCase();
|
|
47
|
+
const key = Object.keys(object).find((key2) => key2.toLowerCase() === asLower);
|
|
48
|
+
return key ? object[key] : null;
|
|
49
|
+
};
|
|
45
50
|
const PaymentIcon = ({ name, size = "S" }) => {
|
|
46
51
|
const maybeIconName = `${name}`;
|
|
47
|
-
|
|
48
|
-
|
|
52
|
+
const Component = getIconCaseInsensitive({
|
|
53
|
+
search: maybeIconName,
|
|
54
|
+
object: paymentProviders
|
|
55
|
+
});
|
|
56
|
+
if (Component) {
|
|
49
57
|
return /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
50
58
|
size: sizes[size]
|
|
51
59
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/PaymentIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as paymentProviders from \"@ledgerhq/icons-ui/react/_Payment\";\nimport React from \"react\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type PaymentIconSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: PaymentIconSizes;\n};\n\nexport const iconNames = Array.from(\n Object.keys(paymentProviders).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst PaymentIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAkC;
|
|
4
|
+
"sourcesContent": ["import * as paymentProviders from \"@ledgerhq/icons-ui/react/_Payment\";\n\nimport React from \"react\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type PaymentIconSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: PaymentIconSizes;\n};\n\nexport const iconNames = Array.from(\n Object.keys(paymentProviders).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nexport type IconGetterProps = {\n search: string;\n object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n const asLower = search.toLowerCase();\n const key = Object.keys(object).find((key) => key.toLowerCase() === asLower);\n return key ? object[key] : null;\n};\n\nconst PaymentIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n\n const Component = getIconCaseInsensitive({\n search: maybeIconName,\n object: paymentProviders,\n }) as React.ElementType;\n if (Component) {\n return <Component size={sizes[size]} />;\n }\n return null;\n};\n\nexport default PaymentIcon;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAkC;AAElC,mBAAkB;AAEX,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAUC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,kBAAkB,OAAO,CAAC,KAAK,WAAW;AACpD,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAQT,MAAM,yBAAyB,CAAC,EAAE,QAAQ,aAA8B;AACtE,QAAM,UAAU,OAAO;AACvB,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK,CAAC,SAAQ,KAAI,kBAAkB;AACpE,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,UAAqC;AACvE,QAAM,gBAAgB,GAAG;AAEzB,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA;AAEV,MAAI,WAAW;AACb,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -68,15 +68,7 @@ const Story = {
|
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
name: {
|
|
71
|
-
type: "
|
|
72
|
-
defaultValue: "France",
|
|
73
|
-
description: "[Only for single icon], Icon name",
|
|
74
|
-
control: {
|
|
75
|
-
options: import_PaymentIcon.iconNames,
|
|
76
|
-
control: {
|
|
77
|
-
type: "select"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
71
|
+
type: "string"
|
|
80
72
|
}
|
|
81
73
|
}
|
|
82
74
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/PaymentIcon.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport PaymentIcon, {\n iconNames,\n Props as PaymentIconProps,\n sizes as flagSizes,\n} from \"./PaymentIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\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/Icons/Payment\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(flagSizes),\n },\n },\n name: {\n type: \"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,yBAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport PaymentIcon, {\n iconNames,\n Props as PaymentIconProps,\n sizes as flagSizes,\n} from \"./PaymentIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\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/Icons/Payment\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(flagSizes),\n },\n },\n name: {\n type: \"string\",\n // defaultValue: \"France\",\n // description: \"[Only for single icon], Icon name\",\n // control: {\n // options: iconNames,\n // control: {\n // type: \"select\",\n // },\n // },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: PaymentIconProps) => {\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 {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\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 <PaymentIcon key={name} name={name} size={args.size} />\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 FlagTemplate = (args: PaymentIconProps) => {\n return <PaymentIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,yBAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA;AAAA;AAAA;AAYZ,IAAO,8BAAQ;AAEf,MAAM,eAAe,CAAC,SAA2B;AAC/C,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,6BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,4BAAD;AAAA,MAAa,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAEjD,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA2B;AAC/C,SAAO,mDAAC,4BAAD;AAAA,OAAiB;AAAA;AAAA;AAGnB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -47,17 +47,25 @@ const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
|
|
|
47
47
|
const Favicon = import_styled_components.default.img`
|
|
48
48
|
border-radius: 8px;
|
|
49
49
|
`;
|
|
50
|
+
const getIconCaseInsensitive = ({ search, object }) => {
|
|
51
|
+
const asLower = search.toLowerCase();
|
|
52
|
+
const key = Object.keys(object).find((key2) => key2.toLowerCase() === asLower);
|
|
53
|
+
return key ? object[key] : null;
|
|
54
|
+
};
|
|
50
55
|
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
51
56
|
const maybeIconName = `${name}`;
|
|
52
57
|
if (boxed) {
|
|
53
58
|
return /* @__PURE__ */ import_react.default.createElement(Favicon, {
|
|
54
59
|
width: sizes[size],
|
|
55
60
|
height: sizes[size],
|
|
56
|
-
src: favicons
|
|
61
|
+
src: getIconCaseInsensitive({ search: maybeIconName, object: favicons })
|
|
57
62
|
});
|
|
58
63
|
}
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
const Component = getIconCaseInsensitive({
|
|
65
|
+
search: maybeIconName,
|
|
66
|
+
object: providers
|
|
67
|
+
});
|
|
68
|
+
if (Component) {
|
|
61
69
|
return /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
62
70
|
size: sizes[size]
|
|
63
71
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/ProviderIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos\";\nimport * as favicons from \"./ProvidersFavicons\";\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: ProviderSizes;\n boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n Object.keys(providers).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst Favicon = styled.img`\n border-radius: 8px;\n`;\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n if (boxed) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,eAA0B;AAE1B,mBAAkB;AAClB,+BAAmB;AAEZ,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,UAAU,iCAAO;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as providers from \"@ledgerhq/icons-ui/react/_ProvidersLogos\";\nimport * as favicons from \"./ProvidersFavicons\";\n\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\n M: 40,\n L: 48,\n XL: 56,\n};\n\nexport type ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: ProviderSizes;\n boxed?: boolean;\n};\n\nexport const iconNames = Array.from(\n Object.keys(providers).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst Favicon = styled.img`\n border-radius: 8px;\n`;\n\nexport type IconGetterProps = {\n search: string;\n object: Record<string, React.ReactNode>;\n};\n\nconst getIconCaseInsensitive = ({ search, object }: IconGetterProps) => {\n const asLower = search.toLowerCase();\n const key = Object.keys(object).find((key) => key.toLowerCase() === asLower);\n return key ? object[key] : null;\n};\n\nconst ProviderIcon = ({ name, size = \"S\", boxed = false }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n\n if (boxed) {\n return (\n <Favicon\n width={sizes[size]}\n height={sizes[size]}\n src={getIconCaseInsensitive({ search: maybeIconName, object: favicons }) as string}\n />\n );\n }\n const Component = getIconCaseInsensitive({\n search: maybeIconName,\n object: providers,\n }) as React.ElementType;\n if (Component) {\n return <Component size={sizes[size]} />;\n }\n return null;\n};\n\nexport default ProviderIcon;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,eAA0B;AAE1B,mBAAkB;AAClB,+BAAmB;AAEZ,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA;AAWC,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,WAAW,OAAO,CAAC,KAAK,WAAW;AAC7C,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,UAAU,iCAAO;AAAA;AAAA;AASvB,MAAM,yBAAyB,CAAC,EAAE,QAAQ,aAA8B;AACtE,QAAM,UAAU,OAAO;AACvB,QAAM,MAAM,OAAO,KAAK,QAAQ,KAAK,CAAC,SAAQ,KAAI,kBAAkB;AACpE,SAAO,MAAM,OAAO,OAAO;AAAA;AAG7B,MAAM,eAAe,CAAC,EAAE,MAAM,OAAO,KAAK,QAAQ,YAAuC;AACvF,QAAM,gBAAgB,GAAG;AAEzB,MAAI,OAAO;AACT,WACE,mDAAC,SAAD;AAAA,MACE,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,KAAK,uBAAuB,EAAE,QAAQ,eAAe,QAAQ;AAAA;AAAA;AAInE,QAAM,YAAY,uBAAuB;AAAA,IACvC,QAAQ;AAAA,IACR,QAAQ;AAAA;AAEV,MAAI,WAAW;AACb,WAAO,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAEhC,SAAO;AAAA;AAGT,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -73,15 +73,7 @@ const Story = {
|
|
|
73
73
|
defaultValue: false
|
|
74
74
|
},
|
|
75
75
|
name: {
|
|
76
|
-
type: "
|
|
77
|
-
defaultValue: "France",
|
|
78
|
-
description: "[Only for single icon], Icon name",
|
|
79
|
-
control: {
|
|
80
|
-
options: import_ProviderIcon.iconNames,
|
|
81
|
-
control: {
|
|
82
|
-
type: "select"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
76
|
+
type: "string"
|
|
85
77
|
}
|
|
86
78
|
}
|
|
87
79
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/Providers.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport ProviderIcon, {\n iconNames,\n Props as ProviderIconProps,\n sizes as providerSizes,\n} from \"./ProviderIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\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/Icons/ProviderIcons\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(providerSizes),\n },\n },\n boxed: {\n type: \"boolean\",\n description: \"Boxed\",\n defaultValue: false,\n },\n name: {\n type: \"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,0BAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,IAEhB,MAAM;AAAA,MACJ,MAAM;AAAA
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport ProviderIcon, {\n iconNames,\n Props as ProviderIconProps,\n sizes as providerSizes,\n} from \"./ProviderIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\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/Icons/ProviderIcons\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(providerSizes),\n },\n },\n boxed: {\n type: \"boolean\",\n description: \"Boxed\",\n defaultValue: false,\n },\n name: {\n type: \"string\",\n // defaultValue: \"Aave\",\n // description: \"[Only for single icon], Icon name\",\n // control: {\n // options: iconNames,\n // control: {\n // type: \"select\",\n // },\n // },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: ProviderIconProps) => {\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 {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\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 <ProviderIcon key={name} name={name} size={args.size} boxed={args.boxed} />\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 FlagTemplate = (args: ProviderIconProps) => {\n return <ProviderIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,0BAIO;AACP,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,IAEhB,MAAM;AAAA,MACJ,MAAM;AAAA;AAAA;AAAA;AAYZ,IAAO,4BAAQ;AAEf,MAAM,eAAe,CAAC,SAA4B;AAChD,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,8BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,6BAAD;AAAA,MAAc,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,MAAM,OAAO,KAAK;AAAA,SAEpE,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAA4B;AAChD,SAAO,mDAAC,6BAAD;AAAA,OAAkB;AAAA;AAAA;AAGpB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -87,16 +87,30 @@ const textVariantStyle = {
|
|
|
87
87
|
fontWeight: 500,
|
|
88
88
|
"text-transform": "uppercase"
|
|
89
89
|
},
|
|
90
|
+
h1Inter: {
|
|
91
|
+
fontFamily: "Inter, Sans",
|
|
92
|
+
fontWeight: 500,
|
|
93
|
+
"text-transform": "uppercase"
|
|
94
|
+
},
|
|
90
95
|
h2: {
|
|
91
96
|
fontFamily: "Alpha, Inter, Sans",
|
|
92
97
|
fontWeight: 500,
|
|
93
98
|
"text-transform": "uppercase"
|
|
94
99
|
},
|
|
100
|
+
h2Inter: {
|
|
101
|
+
fontFamily: "Inter, Sans",
|
|
102
|
+
fontWeight: 500,
|
|
103
|
+
"text-transform": "uppercase"
|
|
104
|
+
},
|
|
95
105
|
h3: {
|
|
96
106
|
fontFamily: "Alpha, Inter, Sans",
|
|
97
107
|
fontWeight: 500,
|
|
98
108
|
"text-transform": "uppercase"
|
|
99
109
|
},
|
|
110
|
+
h3Inter: {
|
|
111
|
+
fontFamily: "Inter, Sans",
|
|
112
|
+
fontWeight: 500
|
|
113
|
+
},
|
|
100
114
|
h4: {
|
|
101
115
|
fontFamily: "Alpha, Inter, Sans",
|
|
102
116
|
fontWeight: 500,
|
|
@@ -111,6 +125,10 @@ const textVariantStyle = {
|
|
|
111
125
|
fontWeight: 500,
|
|
112
126
|
"text-transform": "uppercase"
|
|
113
127
|
},
|
|
128
|
+
h5Inter: {
|
|
129
|
+
fontFamily: "Inter, Sans",
|
|
130
|
+
fontWeight: 500
|
|
131
|
+
},
|
|
114
132
|
large: {
|
|
115
133
|
fontFamily: "Inter, Sans"
|
|
116
134
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Text/styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { GlobalStyleProps } from \"../../../styles/global\";\nimport { css } from \"styled-components\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst getFontSource = (name: string) => (props: GlobalStyleProps) => {\n const fontsPath = props.fontsPath ?? \"assets/fonts\";\n const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;\n return `url(\"${fontsPath}/${fontName}\") format(\"woff2\")`;\n};\n\nexport const fontStyles = css`\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-ExtraLight-BETA\")};\n font-weight: 100;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Light-BETA\")};\n font-weight: 300;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Regular\")};\n font-weight: 400;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Medium\")};\n font-weight: 500;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-SemiBold\")};\n font-weight: 600;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-ExtraBold\")};\n font-weight: 900;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Alpha\";\n src: ${getFontSource(\"HMAlphaMono-Medium\")};\n font-weight: 500;\n font-style: normal;\n }\n`;\n\nexport const textVariantStyle: Record<\n TextVariants,\n {\n fontFamily: string;\n lineHeight?: string | number;\n fontWeight?: number;\n \"text-transform\"?: string;\n }\n> = {\n h1: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h2: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h3: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h4: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h4Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 600,\n },\n h5: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n large: {\n fontFamily: \"Inter, Sans\",\n },\n largeLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n body: {\n fontFamily: \"Inter, Sans\",\n },\n bodyLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n paragraph: {\n fontFamily: \"Inter, Sans\",\n },\n paragraphLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n small: {\n fontFamily: \"Inter, Sans\",\n },\n extraSmall: {\n fontFamily: \"Inter, Sans\",\n },\n tiny: {\n fontFamily: \"Inter, Sans\",\n },\n micro: {\n fontFamily: \"Inter, Sans\",\n },\n subtitle: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 600,\n \"text-transform\": \"uppercase\",\n },\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA,+BAAoB;AAGpB,MAAM,gBAAgB,CAAC,SAAiB,CAAC,UAA4B;AACnE,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,WAAY,MAAM,gBAAgB,MAAM,aAAa,SAAU,GAAG;AACxE,SAAO,QAAQ,aAAa;AAAA;AAGvB,MAAM,aAAa;AAAA;AAAA;AAAA,WAGf,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,mBAQT;AAAA,EACF,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,WAAW;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,YAAY;AAAA,IACV,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA;",
|
|
4
|
+
"sourcesContent": ["import { GlobalStyleProps } from \"../../../styles/global\";\nimport { css } from \"styled-components\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst getFontSource = (name: string) => (props: GlobalStyleProps) => {\n const fontsPath = props.fontsPath ?? \"assets/fonts\";\n const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;\n return `url(\"${fontsPath}/${fontName}\") format(\"woff2\")`;\n};\n\nexport const fontStyles = css`\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-ExtraLight-BETA\")};\n font-weight: 100;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Light-BETA\")};\n font-weight: 300;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Regular\")};\n font-weight: 400;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-Medium\")};\n font-weight: 500;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-SemiBold\")};\n font-weight: 600;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Inter\";\n src: ${getFontSource(\"Inter-ExtraBold\")};\n font-weight: 900;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"Alpha\";\n src: ${getFontSource(\"HMAlphaMono-Medium\")};\n font-weight: 500;\n font-style: normal;\n }\n`;\n\nexport const textVariantStyle: Record<\n TextVariants,\n {\n fontFamily: string;\n lineHeight?: string | number;\n fontWeight?: number;\n \"text-transform\"?: string;\n }\n> = {\n h1: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h1Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h2: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h2Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h3: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h3Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 500,\n },\n h4: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h4Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 600,\n },\n h5: {\n fontFamily: \"Alpha, Inter, Sans\",\n fontWeight: 500,\n \"text-transform\": \"uppercase\",\n },\n h5Inter: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 500,\n },\n large: {\n fontFamily: \"Inter, Sans\",\n },\n largeLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n body: {\n fontFamily: \"Inter, Sans\",\n },\n bodyLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n paragraph: {\n fontFamily: \"Inter, Sans\",\n },\n paragraphLineHeight: {\n fontFamily: \"Inter, Sans\",\n lineHeight: 1.7,\n },\n small: {\n fontFamily: \"Inter, Sans\",\n },\n extraSmall: {\n fontFamily: \"Inter, Sans\",\n },\n tiny: {\n fontFamily: \"Inter, Sans\",\n },\n micro: {\n fontFamily: \"Inter, Sans\",\n },\n subtitle: {\n fontFamily: \"Inter, Sans\",\n fontWeight: 600,\n \"text-transform\": \"uppercase\",\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AACA,+BAAoB;AAGpB,MAAM,gBAAgB,CAAC,SAAiB,CAAC,UAA4B;AACnE,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,WAAY,MAAM,gBAAgB,MAAM,aAAa,SAAU,GAAG;AACxE,SAAO,QAAQ,aAAa;AAAA;AAGvB,MAAM,aAAa;AAAA;AAAA;AAAA,WAGf,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOd,cAAc;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,mBAQT;AAAA,EACF,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA,EAEpB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,WAAW;AAAA,IACT,YAAY;AAAA;AAAA,EAEd,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,YAAY;AAAA,IACV,YAAY;AAAA;AAAA,EAEd,MAAM;AAAA,IACJ,YAAY;AAAA;AAAA,EAEd,OAAO;AAAA,IACL,YAAY;AAAA;AAAA,EAEd,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,kBAAkB;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -98,6 +98,13 @@ const getVariantColors = (p) => ({
|
|
|
98
98
|
}
|
|
99
99
|
`
|
|
100
100
|
},
|
|
101
|
+
neutral: `
|
|
102
|
+
color: ${p.theme.colors.neutral.c100};
|
|
103
|
+
background-color: ${p.theme.colors.neutral.c30};
|
|
104
|
+
&:hover {
|
|
105
|
+
background-color: ${p.theme.colors.neutral.c40};
|
|
106
|
+
}
|
|
107
|
+
`,
|
|
101
108
|
color: {
|
|
102
109
|
outline: `
|
|
103
110
|
border-color: ${p.theme.colors.primary.c80};
|
|
@@ -190,13 +197,15 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
190
197
|
return p.outline ? variants.error.outline : variants.error.filled;
|
|
191
198
|
case "color":
|
|
192
199
|
return p.outline ? variants.color.outline : variants.color.filled;
|
|
200
|
+
case "neutral":
|
|
201
|
+
return variants.neutral;
|
|
193
202
|
case "default":
|
|
194
203
|
default:
|
|
195
204
|
return variants.default;
|
|
196
205
|
}
|
|
197
206
|
}}
|
|
198
207
|
${(p) => p.iconButton ? import_styled_components.css`
|
|
199
|
-
width: ${p.theme.space[
|
|
208
|
+
width: ${p.theme.space[12]}px;
|
|
200
209
|
padding: 0;
|
|
201
210
|
${IconContainer} {
|
|
202
211
|
margin: 0;
|
|
@@ -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 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 &: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[
|
|
5
|
-
"mappings": "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",
|
|
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\" | \"neutral\";\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 &: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 neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\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 \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}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
|
}
|
|
@@ -35,6 +35,7 @@ var import_ArrowLeftRegular = __toModule(require("@ledgerhq/icons-ui/react/Arrow
|
|
|
35
35
|
var import_TransitionSlide = __toModule(require("../../transitions/TransitionSlide"));
|
|
36
36
|
var import_TransitionInOut = __toModule(require("../../transitions/TransitionInOut"));
|
|
37
37
|
var import_Text = __toModule(require("../../asorted/Text"));
|
|
38
|
+
var import_Button = __toModule(require("../../cta/Button"));
|
|
38
39
|
var Direction;
|
|
39
40
|
(function(Direction2) {
|
|
40
41
|
Direction2["Left"] = "left";
|
|
@@ -70,13 +71,7 @@ const ScrollWrapper = (0, import_styled_components.default)(import_Flex.default)
|
|
|
70
71
|
}
|
|
71
72
|
`;
|
|
72
73
|
const ButtonPlaceholder = import_styled_components.default.div`
|
|
73
|
-
min-width: ${(p) => p.theme.space[
|
|
74
|
-
`;
|
|
75
|
-
const Button = import_styled_components.default.button`
|
|
76
|
-
background: unset;
|
|
77
|
-
border: unset;
|
|
78
|
-
cursor: pointer;
|
|
79
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
74
|
+
min-width: ${(p) => p.theme.space[12]}px;
|
|
80
75
|
`;
|
|
81
76
|
const DrawerContent = import_react.default.forwardRef(({
|
|
82
77
|
isOpen,
|
|
@@ -136,19 +131,21 @@ const DrawerContent = import_react.default.forwardRef(({
|
|
|
136
131
|
p: 12,
|
|
137
132
|
pb: 10,
|
|
138
133
|
...extraHeaderProps
|
|
139
|
-
}, !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
})
|
|
134
|
+
}, !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
|
|
135
|
+
variant: "neutral",
|
|
136
|
+
onClick: onBack,
|
|
137
|
+
Icon: import_ArrowLeftRegular.default
|
|
138
|
+
}) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
|
|
144
139
|
variant: "h3",
|
|
145
140
|
flex: 1,
|
|
146
141
|
textAlign: "center"
|
|
147
142
|
}, title) || /* @__PURE__ */ import_react.default.createElement("div", null), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
148
143
|
alignSelf: "flex-start"
|
|
149
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
150
|
-
|
|
151
|
-
|
|
144
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
|
|
145
|
+
variant: "neutral",
|
|
146
|
+
onClick: onClose,
|
|
147
|
+
Icon: import_CloseMedium.default
|
|
148
|
+
}))), /* @__PURE__ */ import_react.default.createElement(ScrollWrapper, {
|
|
152
149
|
flexDirection: "column",
|
|
153
150
|
alignItems: "stretch",
|
|
154
151
|
overflow: "scroll",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\n\nexport enum Direction {\n Left = \"left\",\n Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n width: 100%;\n height: 100%;\n flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n big?: boolean;\n}>`\n height: 100%;\n width: ${(p) =>\n p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n z-index: ${(p) => p.theme.zIndexes[8]};\n`;\nconst Overlay = styled.div<{ direction: Direction }>`\n display: flex;\n position: fixed;\n justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 999;\n background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\nconst ScrollWrapper = styled(FlexBox)`\n &::-webkit-scrollbar {\n display: none;\n }\n`;\nconst ButtonPlaceholder = styled.div`\n min-width: ${(p) => p.theme.space[
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqB;AACrB,+BAAmB;AACnB,kBAAsC;AACtC,qBAA+C;AAC/C,yBAAkB;AAClB,8BAAsB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n Left = \"left\",\n Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n width: 100%;\n height: 100%;\n flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n big?: boolean;\n}>`\n height: 100%;\n width: ${(p) =>\n p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-between;\n z-index: ${(p) => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n display: flex;\n position: fixed;\n justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 999;\n background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst ButtonPlaceholder = styled.div`\n min-width: ${(p) => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n isOpen: boolean;\n children: React.ReactNode;\n title?: React.ReactNode;\n footer?: React.ReactNode;\n big?: boolean;\n ignoreBackdropClick?: boolean;\n backgroundColor?: string;\n onClose: () => void;\n onBack?: () => void;\n setTransitionsEnabled?: (arg0: boolean) => void;\n hideNavigation?: boolean;\n menuPortalTarget?: Element | null;\n direction?: Direction;\n extraContainerProps?: Partial<FlexBoxProps>;\n extraHeaderProps?: Partial<FlexBoxProps>;\n extraFooterProps?: Partial<FlexBoxProps>;\n extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n (\n {\n isOpen,\n title,\n children,\n footer,\n big,\n onClose,\n backgroundColor,\n setTransitionsEnabled = () => 0,\n onBack,\n extraContainerProps,\n extraHeaderProps,\n extraFooterProps,\n extraFooterDividerProps,\n ignoreBackdropClick = false,\n hideNavigation = true,\n direction = Direction.Left,\n }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n ) => {\n const disableChildAnimations = useCallback(\n () => setTransitionsEnabled(false),\n [setTransitionsEnabled],\n );\n const enableChildAnimations = useCallback(\n () => setTransitionsEnabled(true),\n [setTransitionsEnabled],\n );\n\n const handleBackdropClick = useCallback(() => {\n if (!ignoreBackdropClick) {\n onClose();\n }\n }, [onClose, ignoreBackdropClick]);\n\n const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n }, []);\n\n return (\n <TransitionInOut\n in={isOpen}\n appear\n mountOnEnter\n unmountOnExit\n onEntering={disableChildAnimations}\n onEntered={enableChildAnimations}\n onExiting={disableChildAnimations}\n >\n <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n <TransitionSlide\n in={isOpen}\n direction={direction}\n fixed\n reverseExit\n appear\n mountOnEnter\n unmountOnExit\n >\n <Wrapper\n big={big}\n onClick={stopClickPropagation}\n backgroundColor={backgroundColor ?? \"background.main\"}\n >\n <Container>\n <FlexBox\n justifyContent=\"space-between\"\n alignItems=\"center\"\n p={12}\n pb={10}\n {...extraHeaderProps}\n >\n {!hideNavigation && (\n <>\n {onBack != null ? (\n <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n ) : (\n <ButtonPlaceholder />\n )}\n </>\n )}\n {(\n <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n {title}\n </Text>\n ) || <div />}\n <FlexBox alignSelf=\"flex-start\">\n <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n </FlexBox>\n </FlexBox>\n <ScrollWrapper\n flexDirection=\"column\"\n alignItems=\"stretch\"\n overflow=\"scroll\"\n position=\"relative\"\n p={12}\n pt={0}\n flex={1}\n {...extraContainerProps}\n >\n {children}\n </ScrollWrapper>\n {footer && (\n <>\n <Divider variant=\"light\" {...extraFooterDividerProps} />\n <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n {footer}\n </FlexBox>\n </>\n )}\n </Container>\n </Wrapper>\n </TransitionSlide>\n </Overlay>\n </TransitionInOut>\n );\n },\n);\n\nconst Drawer = (\n { children, menuPortalTarget, ...sideProps }: DrawerProps,\n ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== undefined\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return (\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>\n );\n } else {\n return ReactDOM.createPortal(\n <DrawerContent ref={ref} {...sideProps}>\n {children}\n </DrawerContent>,\n $root,\n );\n }\n};\n\nexport default React.forwardRef(Drawer);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,7 +54,6 @@ const getContainerBorder = (theme, status, isLastItem) => {
|
|
|
54
54
|
};
|
|
55
55
|
const Container = (0, import_styled_components.default)(import__2.Flex)`
|
|
56
56
|
flex: 1;
|
|
57
|
-
width: 404px;
|
|
58
57
|
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
59
58
|
background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
|
|
60
59
|
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
@@ -86,10 +85,9 @@ function TimelineItem({ item, isFirstItem, isLastItem }) {
|
|
|
86
85
|
active: true,
|
|
87
86
|
disabled: true,
|
|
88
87
|
textProps: { color: colors.neutral.c100 }
|
|
89
|
-
}, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.
|
|
90
|
-
position: "relative"
|
|
91
|
-
}, /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
|
|
88
|
+
}, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, {
|
|
89
|
+
position: "relative",
|
|
92
90
|
pt: 6
|
|
93
|
-
}, item.renderBody(item.status === "active"))))
|
|
91
|
+
}, item.renderBody(item.status === "active"))));
|
|
94
92
|
}
|
|
95
93
|
//# sourceMappingURL=TimelineItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c100;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.primary.c80;\n }\n return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem && status === \"completed\") {\n return theme.colors.success.c30;\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c100;\n } else if (status === \"completed\") {\n return theme.colors.primary.c20;\n } else if (status === \"active\") {\n return theme.colors.primary.c80;\n }\n return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n border-radius: ${(p) => p.theme.radii[2]}px;\n background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\n border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\">\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n <TimelineIndicatorContentHeader>\n <Text\n variant=\"body\"\n color={\n item.status === \"inactive\"\n ? \"neutral.c80\"\n : isLastItem\n ? \"success.c100\"\n : \"primary.c90\"\n }\n >\n {item.title}\n </Text>\n {item?.estimatedTime && item.status === \"active\" && (\n <Tag\n size=\"small\"\n type=\"opacity\"\n active\n disabled\n textProps={{ color: colors.neutral.c100 }}\n >{`${item.estimatedTime / 60} min`}</Tag>\n )}\n </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </Container>\n </Flex>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAA0B;AAC1B,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA,mBAEN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,eAAD;AAAA,IAAK,UAAS;AAAA,IAAW,IAAI;AAAA,KAC1B,KAAK,WAAW,KAAK,WAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/styles/theme.js
CHANGED
|
@@ -83,7 +83,11 @@ fontSizes.largeLineHeight = fontSizes.large;
|
|
|
83
83
|
fontSizes.bodyLineHeight = fontSizes.body;
|
|
84
84
|
fontSizes.paragraphLineHeight = fontSizes.paragraph;
|
|
85
85
|
fontSizes.subtitle = fontSizes.extraSmall;
|
|
86
|
+
fontSizes.h1Inter = fontSizes.h1;
|
|
87
|
+
fontSizes.h2Inter = fontSizes.h2;
|
|
88
|
+
fontSizes.h3Inter = fontSizes.h3;
|
|
86
89
|
fontSizes.h4Inter = fontSizes.h4;
|
|
90
|
+
fontSizes.h5Inter = fontSizes.h5;
|
|
87
91
|
const fontWeights = {
|
|
88
92
|
extraLight: "100",
|
|
89
93
|
light: "300",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/theme.ts"],
|
|
4
|
-
"sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\nexport const space = [\n /* space indexes:\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */\n 0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"h4Inter\"\n | \"h5\"\n | \"large\"\n | \"largeLineHeight\"\n | \"body\"\n | \"bodyLineHeight\"\n | \"paragraph\"\n | \"paragraphLineHeight\"\n | \"small\"\n | \"extraSmall\"\n | \"tiny\"\n | \"micro\"\n | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n number,\n TextVariants\n>;\n\n[\n fontSizes.micro,\n fontSizes.tiny,\n fontSizes.extraSmall,\n fontSizes.small,\n fontSizes.paragraph,\n fontSizes.body,\n fontSizes.large,\n fontSizes.h5,\n fontSizes.h4,\n fontSizes.h3,\n fontSizes.h2,\n fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\nfontSizes.h4Inter = fontSizes.h4;\n\nconst fontWeights = {\n extraLight: \"100\",\n light: \"300\",\n regular: \"400\",\n medium: \"500\",\n semiBold: \"600\",\n bold: \"700\",\n extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n Inter: {\n ExtraLight: {\n weight: 100,\n style: \"normal\",\n },\n Light: {\n weight: 300,\n style: \"normal\",\n },\n Regular: {\n weight: 400,\n style: \"normal\",\n },\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n SemiBold: {\n weight: 600,\n style: \"normal\",\n },\n Bold: {\n weight: 700,\n style: \"normal\",\n },\n ExtraBold: {\n weight: 800,\n style: \"normal\",\n },\n },\n Alpha: {\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n properties = [\"all\"],\n duration = animationDuration,\n easing = easings.outQuadratic,\n) => css`\n transition-property: ${properties.join(\",\")};\n transition-duration: ${duration};\n transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n `;\nconst fadeOut = keyframes`\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n `;\nconst fadeInGrowX = keyframes`\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n`;\nconst fadeInUp = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(66%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0%);\n }\n `;\nconst animations = {\n fadeIn: () =>\n css`\n ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeOut: () =>\n css`\n ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeInGrowX: () =>\n css`\n ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n `,\n fadeInUp: () =>\n css`\n ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n};\nconst overflow = {\n x: css`\n overflow-y: hidden;\n overflow-x: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n y: css`\n overflow-x: hidden;\n overflow-y: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n yAuto: css`\n overflow-x: hidden;\n overflow-y: auto;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n xy: css`\n overflow: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n export interface Font {\n weight: number;\n style: string;\n }\n export interface DefaultTheme {\n theme: string;\n animations: typeof animations;\n transition: typeof transition;\n overflow: typeof overflow;\n sizes: {\n topBarHeight: number;\n sideBarWidth: number;\n drawer: {\n side: {\n big: {\n width: number;\n };\n small: {\n width: number;\n };\n };\n popin: {\n min: {\n height: number;\n width: number;\n };\n max: {\n height: number;\n width: number;\n };\n };\n };\n };\n radii: number[];\n fontFamilies: Record<string, Record<string, Font>>;\n fontSizes: number[];\n space: number[];\n shadows: string[];\n colors: ColorPalette & {\n /**\n * @deprecated Do not use the .palette prefix anymore!\n */\n palette: ColorPalette;\n };\n fontWeights: Record<string, string>;\n breakpoints: Record<screensBreakpoints, string>;\n zIndexes: number[];\n }\n}\n\nconst theme: DefaultTheme = {\n theme: \"light\",\n sizes: {\n drawer: {\n side: {\n big: {\n width: 580,\n },\n small: {\n width: 420,\n },\n },\n popin: {\n min: {\n height: 158,\n width: 462,\n },\n max: {\n height: 522,\n width: 622,\n },\n },\n },\n topBarHeight: 58,\n sideBarWidth: 230,\n },\n radii,\n fontFamilies,\n fontSizes,\n fontWeights,\n space,\n shadows,\n colors: {\n palette: palettes.light,\n ...palettes.light,\n },\n animations,\n overflow,\n transition,\n zIndexes,\n breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA6C;AAC7C,uBAAuC;AAIhC,MAAM,cAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,QAAQ;AAAA,EAGnB;AAAA,EAAG;AAAA,EAAG;AAAA,EAAG;AAAA,EAAG;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA;
|
|
4
|
+
"sourcesContent": ["import { keyframes, css, DefaultTheme } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\nexport const space = [\n /* space indexes:\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */\n 0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n | \"h1\"\n | \"h1Inter\"\n | \"h2\"\n | \"h2Inter\"\n | \"h3\"\n | \"h3Inter\"\n | \"h4\"\n | \"h4Inter\"\n | \"h5\"\n | \"h5Inter\"\n | \"large\"\n | \"largeLineHeight\"\n | \"body\"\n | \"bodyLineHeight\"\n | \"paragraph\"\n | \"paragraphLineHeight\"\n | \"small\"\n | \"extraSmall\"\n | \"tiny\"\n | \"micro\"\n | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n number,\n TextVariants\n>;\n\n[\n fontSizes.micro,\n fontSizes.tiny,\n fontSizes.extraSmall,\n fontSizes.small,\n fontSizes.paragraph,\n fontSizes.body,\n fontSizes.large,\n fontSizes.h5,\n fontSizes.h4,\n fontSizes.h3,\n fontSizes.h2,\n fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\nfontSizes.h1Inter = fontSizes.h1;\nfontSizes.h2Inter = fontSizes.h2;\nfontSizes.h3Inter = fontSizes.h3;\nfontSizes.h4Inter = fontSizes.h4;\nfontSizes.h5Inter = fontSizes.h5;\n\nconst fontWeights = {\n extraLight: \"100\",\n light: \"300\",\n regular: \"400\",\n medium: \"500\",\n semiBold: \"600\",\n bold: \"700\",\n extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n Inter: {\n ExtraLight: {\n weight: 100,\n style: \"normal\",\n },\n Light: {\n weight: 300,\n style: \"normal\",\n },\n Regular: {\n weight: 400,\n style: \"normal\",\n },\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n SemiBold: {\n weight: 600,\n style: \"normal\",\n },\n Bold: {\n weight: 700,\n style: \"normal\",\n },\n ExtraBold: {\n weight: 800,\n style: \"normal\",\n },\n },\n Alpha: {\n Medium: {\n weight: 500,\n style: \"normal\",\n },\n },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n properties = [\"all\"],\n duration = animationDuration,\n easing = easings.outQuadratic,\n) => css`\n transition-property: ${properties.join(\",\")};\n transition-duration: ${duration};\n transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n `;\nconst fadeOut = keyframes`\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n `;\nconst fadeInGrowX = keyframes`\n 0% {\n opacity: 0;\n transform: scaleX(0);\n }\n 100% {\n opacity: 1;\n transform: scaleX(1);\n }\n`;\nconst fadeInUp = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(66%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0%);\n }\n `;\nconst animations = {\n fadeIn: () =>\n css`\n ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeOut: () =>\n css`\n ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n fadeInGrowX: () =>\n css`\n ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n `,\n fadeInUp: () =>\n css`\n ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n `,\n};\nconst overflow = {\n x: css`\n overflow-y: hidden;\n overflow-x: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n y: css`\n overflow-x: hidden;\n overflow-y: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n yAuto: css`\n overflow-x: hidden;\n overflow-y: auto;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n xy: css`\n overflow: scroll;\n will-change: transform;\n &:hover {\n --track-color: ${(p) => p.theme.colors.neutral.c30};\n }\n `,\n trackSize: 12,\n};\n\ndeclare module \"styled-components\" {\n export interface Font {\n weight: number;\n style: string;\n }\n export interface DefaultTheme {\n theme: string;\n animations: typeof animations;\n transition: typeof transition;\n overflow: typeof overflow;\n sizes: {\n topBarHeight: number;\n sideBarWidth: number;\n drawer: {\n side: {\n big: {\n width: number;\n };\n small: {\n width: number;\n };\n };\n popin: {\n min: {\n height: number;\n width: number;\n };\n max: {\n height: number;\n width: number;\n };\n };\n };\n };\n radii: number[];\n fontFamilies: Record<string, Record<string, Font>>;\n fontSizes: number[];\n space: number[];\n shadows: string[];\n colors: ColorPalette & {\n /**\n * @deprecated Do not use the .palette prefix anymore!\n */\n palette: ColorPalette;\n };\n fontWeights: Record<string, string>;\n breakpoints: Record<screensBreakpoints, string>;\n zIndexes: number[];\n }\n}\n\nconst theme: DefaultTheme = {\n theme: \"light\",\n sizes: {\n drawer: {\n side: {\n big: {\n width: 580,\n },\n small: {\n width: 420,\n },\n },\n popin: {\n min: {\n height: 158,\n width: 462,\n },\n max: {\n height: 522,\n width: 622,\n },\n },\n },\n topBarHeight: 58,\n sideBarWidth: 230,\n },\n radii,\n fontFamilies,\n fontSizes,\n fontWeights,\n space,\n shadows,\n colors: {\n palette: palettes.light,\n ...palettes.light,\n },\n animations,\n overflow,\n transition,\n zIndexes,\n breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
export declare const sizes: {
|
|
3
3
|
XXS: number;
|
|
4
4
|
XS: number;
|
|
@@ -13,5 +13,9 @@ export declare type Props = {
|
|
|
13
13
|
size?: PaymentIconSizes;
|
|
14
14
|
};
|
|
15
15
|
export declare const iconNames: string[];
|
|
16
|
+
export declare type IconGetterProps = {
|
|
17
|
+
search: string;
|
|
18
|
+
object: Record<string, React.ReactNode>;
|
|
19
|
+
};
|
|
16
20
|
declare const PaymentIcon: ({ name, size }: Props) => JSX.Element | null;
|
|
17
21
|
export default PaymentIcon;
|
|
@@ -16,11 +16,18 @@ export const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, r
|
|
|
16
16
|
set.add(key);
|
|
17
17
|
return set;
|
|
18
18
|
}, new Set()));
|
|
19
|
+
const getIconCaseInsensitive = ({ search, object }) => {
|
|
20
|
+
const asLower = search.toLowerCase();
|
|
21
|
+
const key = Object.keys(object).find((key) => key.toLowerCase() === asLower);
|
|
22
|
+
return key ? object[key] : null;
|
|
23
|
+
};
|
|
19
24
|
const PaymentIcon = ({ name, size = "S" }) => {
|
|
20
25
|
const maybeIconName = `${name}`;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
const Component = getIconCaseInsensitive({
|
|
27
|
+
search: maybeIconName,
|
|
28
|
+
object: paymentProviders,
|
|
29
|
+
});
|
|
30
|
+
if (Component) {
|
|
24
31
|
return React.createElement(Component, { size: sizes[size] });
|
|
25
32
|
}
|
|
26
33
|
return null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
2
|
export declare const sizes: {
|
|
3
3
|
XXS: number;
|
|
4
4
|
XS: number;
|
|
@@ -14,5 +14,9 @@ export declare type Props = {
|
|
|
14
14
|
boxed?: boolean;
|
|
15
15
|
};
|
|
16
16
|
export declare const iconNames: string[];
|
|
17
|
+
export declare type IconGetterProps = {
|
|
18
|
+
search: string;
|
|
19
|
+
object: Record<string, React.ReactNode>;
|
|
20
|
+
};
|
|
17
21
|
declare const ProviderIcon: ({ name, size, boxed }: Props) => JSX.Element | null;
|
|
18
22
|
export default ProviderIcon;
|
|
@@ -21,15 +21,21 @@ export const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey)
|
|
|
21
21
|
const Favicon = styled.img `
|
|
22
22
|
border-radius: 8px;
|
|
23
23
|
`;
|
|
24
|
+
const getIconCaseInsensitive = ({ search, object }) => {
|
|
25
|
+
const asLower = search.toLowerCase();
|
|
26
|
+
const key = Object.keys(object).find((key) => key.toLowerCase() === asLower);
|
|
27
|
+
return key ? object[key] : null;
|
|
28
|
+
};
|
|
24
29
|
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
25
30
|
const maybeIconName = `${name}`;
|
|
26
31
|
if (boxed) {
|
|
27
|
-
|
|
28
|
-
return React.createElement(Favicon, { width: sizes[size], height: sizes[size], src: favicons[maybeIconName] });
|
|
32
|
+
return (React.createElement(Favicon, { width: sizes[size], height: sizes[size], src: getIconCaseInsensitive({ search: maybeIconName, object: favicons }) }));
|
|
29
33
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
const Component = getIconCaseInsensitive({
|
|
35
|
+
search: maybeIconName,
|
|
36
|
+
object: providers,
|
|
37
|
+
});
|
|
38
|
+
if (Component) {
|
|
33
39
|
return React.createElement(Component, { size: sizes[size] });
|
|
34
40
|
}
|
|
35
41
|
return null;
|
|
@@ -61,16 +61,30 @@ export const textVariantStyle = {
|
|
|
61
61
|
fontWeight: 500,
|
|
62
62
|
"text-transform": "uppercase",
|
|
63
63
|
},
|
|
64
|
+
h1Inter: {
|
|
65
|
+
fontFamily: "Inter, Sans",
|
|
66
|
+
fontWeight: 500,
|
|
67
|
+
"text-transform": "uppercase",
|
|
68
|
+
},
|
|
64
69
|
h2: {
|
|
65
70
|
fontFamily: "Alpha, Inter, Sans",
|
|
66
71
|
fontWeight: 500,
|
|
67
72
|
"text-transform": "uppercase",
|
|
68
73
|
},
|
|
74
|
+
h2Inter: {
|
|
75
|
+
fontFamily: "Inter, Sans",
|
|
76
|
+
fontWeight: 500,
|
|
77
|
+
"text-transform": "uppercase",
|
|
78
|
+
},
|
|
69
79
|
h3: {
|
|
70
80
|
fontFamily: "Alpha, Inter, Sans",
|
|
71
81
|
fontWeight: 500,
|
|
72
82
|
"text-transform": "uppercase",
|
|
73
83
|
},
|
|
84
|
+
h3Inter: {
|
|
85
|
+
fontFamily: "Inter, Sans",
|
|
86
|
+
fontWeight: 500,
|
|
87
|
+
},
|
|
74
88
|
h4: {
|
|
75
89
|
fontFamily: "Alpha, Inter, Sans",
|
|
76
90
|
fontWeight: 500,
|
|
@@ -85,6 +99,10 @@ export const textVariantStyle = {
|
|
|
85
99
|
fontWeight: 500,
|
|
86
100
|
"text-transform": "uppercase",
|
|
87
101
|
},
|
|
102
|
+
h5Inter: {
|
|
103
|
+
fontFamily: "Inter, Sans",
|
|
104
|
+
fontWeight: 500,
|
|
105
|
+
},
|
|
88
106
|
large: {
|
|
89
107
|
fontFamily: "Inter, Sans",
|
|
90
108
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { BaseStyledProps } from "../../styled";
|
|
3
3
|
import { BordersProps } from "styled-system";
|
|
4
|
-
export declare type ButtonVariants = "main" | "shade" | "error" | "color";
|
|
4
|
+
export declare type ButtonVariants = "main" | "shade" | "error" | "color" | "neutral";
|
|
5
5
|
export declare type IconPosition = "right" | "left";
|
|
6
6
|
interface BaseProps extends BaseStyledProps, BordersProps {
|
|
7
7
|
ff?: string;
|
|
@@ -79,6 +79,13 @@ const getVariantColors = (p) => ({
|
|
|
79
79
|
}
|
|
80
80
|
`,
|
|
81
81
|
},
|
|
82
|
+
neutral: `
|
|
83
|
+
color: ${p.theme.colors.neutral.c100};
|
|
84
|
+
background-color: ${p.theme.colors.neutral.c30};
|
|
85
|
+
&:hover {
|
|
86
|
+
background-color: ${p.theme.colors.neutral.c40};
|
|
87
|
+
}
|
|
88
|
+
`,
|
|
82
89
|
color: {
|
|
83
90
|
outline: `
|
|
84
91
|
border-color: ${p.theme.colors.primary.c80};
|
|
@@ -177,6 +184,8 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
177
184
|
return p.outline ? variants.error.outline : variants.error.filled;
|
|
178
185
|
case "color":
|
|
179
186
|
return p.outline ? variants.color.outline : variants.color.filled;
|
|
187
|
+
case "neutral":
|
|
188
|
+
return variants.neutral;
|
|
180
189
|
case "default":
|
|
181
190
|
default:
|
|
182
191
|
return variants.default;
|
|
@@ -184,7 +193,7 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
184
193
|
}}
|
|
185
194
|
${(p) => p.iconButton
|
|
186
195
|
? css `
|
|
187
|
-
width: ${p.theme.space[
|
|
196
|
+
width: ${p.theme.space[12]}px;
|
|
188
197
|
padding: 0;
|
|
189
198
|
${IconContainer} {
|
|
190
199
|
margin: 0;
|
|
@@ -19,6 +19,7 @@ import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
|
|
|
19
19
|
import TransitionSlide from "../../transitions/TransitionSlide";
|
|
20
20
|
import TransitionInOut from "../../transitions/TransitionInOut";
|
|
21
21
|
import Text from "../../asorted/Text";
|
|
22
|
+
import Button from "../../cta/Button";
|
|
22
23
|
export var Direction;
|
|
23
24
|
(function (Direction) {
|
|
24
25
|
Direction["Left"] = "left";
|
|
@@ -54,13 +55,7 @@ const ScrollWrapper = styled(FlexBox) `
|
|
|
54
55
|
}
|
|
55
56
|
`;
|
|
56
57
|
const ButtonPlaceholder = styled.div `
|
|
57
|
-
min-width: ${(p) => p.theme.space[
|
|
58
|
-
`;
|
|
59
|
-
const Button = styled.button `
|
|
60
|
-
background: unset;
|
|
61
|
-
border: unset;
|
|
62
|
-
cursor: pointer;
|
|
63
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
58
|
+
min-width: ${(p) => p.theme.space[12]}px;
|
|
64
59
|
`;
|
|
65
60
|
const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, extraContainerProps, extraHeaderProps, extraFooterProps, extraFooterDividerProps, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
|
|
66
61
|
const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
|
|
@@ -79,12 +74,10 @@ const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big,
|
|
|
79
74
|
React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "background.main" },
|
|
80
75
|
React.createElement(Container, null,
|
|
81
76
|
React.createElement(FlexBox, Object.assign({ justifyContent: "space-between", alignItems: "center", p: 12, pb: 10 }, extraHeaderProps),
|
|
82
|
-
!hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { onClick: onBack },
|
|
83
|
-
React.createElement(ArrowLeft, { size: 21 }))) : (React.createElement(ButtonPlaceholder, null)))),
|
|
77
|
+
!hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { variant: "neutral", onClick: onBack, Icon: ArrowLeft })) : (React.createElement(ButtonPlaceholder, null)))),
|
|
84
78
|
(React.createElement(Text, { variant: "h3", flex: 1, textAlign: "center" }, title)) || React.createElement("div", null),
|
|
85
79
|
React.createElement(FlexBox, { alignSelf: "flex-start" },
|
|
86
|
-
React.createElement(Button, { onClick: onClose },
|
|
87
|
-
React.createElement(Close, null)))),
|
|
80
|
+
React.createElement(Button, { variant: "neutral", onClick: onClose, Icon: Close }))),
|
|
88
81
|
React.createElement(ScrollWrapper, Object.assign({ flexDirection: "column", alignItems: "stretch", overflow: "scroll", position: "relative", p: 12, pt: 0, flex: 1 }, extraContainerProps), children),
|
|
89
82
|
footer && (React.createElement(React.Fragment, null,
|
|
90
83
|
React.createElement(Divider, Object.assign({ variant: "light" }, extraFooterDividerProps)),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled, { useTheme } from "styled-components";
|
|
3
|
-
import { Flex } from "../..";
|
|
3
|
+
import { Flex, Box } from "../..";
|
|
4
4
|
import { Text } from "../../..";
|
|
5
5
|
import Tag from "../../../Tag";
|
|
6
6
|
import TimelineIndicator from "./TimelineIndicator";
|
|
@@ -33,7 +33,6 @@ const getContainerBorder = (theme, status, isLastItem) => {
|
|
|
33
33
|
};
|
|
34
34
|
const Container = styled(Flex) `
|
|
35
35
|
flex: 1;
|
|
36
|
-
width: 404px;
|
|
37
36
|
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
38
37
|
background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
|
|
39
38
|
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
@@ -54,6 +53,5 @@ export default function TimelineItem({ item, isFirstItem, isLastItem }) {
|
|
|
54
53
|
? "success.c100"
|
|
55
54
|
: "primary.c90" }, item.title),
|
|
56
55
|
(item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))),
|
|
57
|
-
item.renderBody && item.status === "active" && (React.createElement(
|
|
58
|
-
React.createElement(Flex, { pt: 6 }, item.renderBody(item.status === "active")))))));
|
|
56
|
+
item.renderBody && item.status === "active" && (React.createElement(Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))))));
|
|
59
57
|
}
|
package/lib/styles/theme.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { ColorPalette } from "@ledgerhq/ui-shared";
|
|
|
3
3
|
export declare type screensBreakpoints = "sm" | "md" | "lg" | "xl" | "xxl";
|
|
4
4
|
export declare const breakpoints: Record<screensBreakpoints, string>;
|
|
5
5
|
export declare const space: number[];
|
|
6
|
-
export declare type TextVariants = "h1" | "h2" | "h3" | "h4" | "h4Inter" | "h5" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
|
|
6
|
+
export declare type TextVariants = "h1" | "h1Inter" | "h2" | "h2Inter" | "h3" | "h3Inter" | "h4" | "h4Inter" | "h5" | "h5Inter" | "large" | "largeLineHeight" | "body" | "bodyLineHeight" | "paragraph" | "paragraphLineHeight" | "small" | "extraSmall" | "tiny" | "micro" | "subtitle";
|
|
7
7
|
export declare type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;
|
|
8
8
|
export declare const fontSizes: ThemeScale<number, TextVariants>;
|
|
9
9
|
export declare const radii: number[];
|
package/lib/styles/theme.js
CHANGED
|
@@ -31,7 +31,11 @@ fontSizes.largeLineHeight = fontSizes.large;
|
|
|
31
31
|
fontSizes.bodyLineHeight = fontSizes.body;
|
|
32
32
|
fontSizes.paragraphLineHeight = fontSizes.paragraph;
|
|
33
33
|
fontSizes.subtitle = fontSizes.extraSmall;
|
|
34
|
+
fontSizes.h1Inter = fontSizes.h1;
|
|
35
|
+
fontSizes.h2Inter = fontSizes.h2;
|
|
36
|
+
fontSizes.h3Inter = fontSizes.h3;
|
|
34
37
|
fontSizes.h4Inter = fontSizes.h4;
|
|
38
|
+
fontSizes.h5Inter = fontSizes.h5;
|
|
35
39
|
const fontWeights = {
|
|
36
40
|
extraLight: "100",
|
|
37
41
|
light: "300",
|