@ledgerhq/react-ui 0.9.2 → 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 +23 -3
- package/lib/cjs/components/asorted/Icon/ProviderIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/Providers.stories.js +8 -10
- package/lib/cjs/components/asorted/Icon/Providers.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/ProvidersFavicons/index.d.js +92 -0
- package/lib/cjs/components/asorted/Icon/ProvidersFavicons/index.d.js.map +7 -0
- package/lib/cjs/components/asorted/Text/styles.js +22 -0
- package/lib/cjs/components/asorted/Text/styles.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +10 -2
- 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 +5 -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 +7 -2
- package/lib/components/asorted/Icon/ProviderIcon.js +19 -4
- package/lib/components/asorted/Icon/ProvidersFavicons/index.d.ts +35 -0
- package/lib/components/asorted/Icon/ProvidersFavicons/index.js +34 -0
- package/lib/components/asorted/Text/styles.js +22 -0
- package/lib/components/cta/Button/index.d.ts +1 -1
- package/lib/components/cta/Button/index.js +10 -2
- 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 +7 -3
- 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
|
}
|
|
@@ -27,7 +27,9 @@ __export(exports, {
|
|
|
27
27
|
sizes: () => sizes
|
|
28
28
|
});
|
|
29
29
|
var providers = __toModule(require("@ledgerhq/icons-ui/react/_ProvidersLogos"));
|
|
30
|
+
var favicons = __toModule(require("./ProvidersFavicons"));
|
|
30
31
|
var import_react = __toModule(require("react"));
|
|
32
|
+
var import_styled_components = __toModule(require("styled-components"));
|
|
31
33
|
const sizes = {
|
|
32
34
|
XXS: 16,
|
|
33
35
|
XS: 24,
|
|
@@ -42,10 +44,28 @@ const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey) => {
|
|
|
42
44
|
set.add(key);
|
|
43
45
|
return set;
|
|
44
46
|
}, new Set()));
|
|
45
|
-
const
|
|
47
|
+
const Favicon = import_styled_components.default.img`
|
|
48
|
+
border-radius: 8px;
|
|
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
|
+
};
|
|
55
|
+
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
46
56
|
const maybeIconName = `${name}`;
|
|
47
|
-
if (
|
|
48
|
-
|
|
57
|
+
if (boxed) {
|
|
58
|
+
return /* @__PURE__ */ import_react.default.createElement(Favicon, {
|
|
59
|
+
width: sizes[size],
|
|
60
|
+
height: sizes[size],
|
|
61
|
+
src: getIconCaseInsensitive({ search: maybeIconName, object: favicons })
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
const Component = getIconCaseInsensitive({
|
|
65
|
+
search: maybeIconName,
|
|
66
|
+
object: providers
|
|
67
|
+
});
|
|
68
|
+
if (Component) {
|
|
49
69
|
return /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
50
70
|
size: sizes[size]
|
|
51
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 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 ProviderSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: ProviderSizes;\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 ProviderIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAA2B;AAC3B,mBAAkB;
|
|
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
|
}
|
|
@@ -67,16 +67,13 @@ const Story = {
|
|
|
67
67
|
options: Object.keys(import_ProviderIcon.sizes)
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
|
+
boxed: {
|
|
71
|
+
type: "boolean",
|
|
72
|
+
description: "Boxed",
|
|
73
|
+
defaultValue: false
|
|
74
|
+
},
|
|
70
75
|
name: {
|
|
71
|
-
type: "
|
|
72
|
-
defaultValue: "France",
|
|
73
|
-
description: "[Only for single icon], Icon name",
|
|
74
|
-
control: {
|
|
75
|
-
options: import_ProviderIcon.iconNames,
|
|
76
|
-
control: {
|
|
77
|
-
type: "select"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
76
|
+
type: "string"
|
|
80
77
|
}
|
|
81
78
|
}
|
|
82
79
|
};
|
|
@@ -108,7 +105,8 @@ const ListTemplate = (args) => {
|
|
|
108
105
|
}, /* @__PURE__ */ import_react.default.createElement(import_ProviderIcon.default, {
|
|
109
106
|
key: name,
|
|
110
107
|
name,
|
|
111
|
-
size: args.size
|
|
108
|
+
size: args.size,
|
|
109
|
+
boxed: args.boxed
|
|
112
110
|
})), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
|
|
113
111
|
variant: "extraSmall"
|
|
114
112
|
}, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/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 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,
|
|
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
|
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
__markAsModule(target);
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toModule = (module2) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
__export(exports, {
|
|
25
|
+
Aave: () => import_Aave.default,
|
|
26
|
+
Baanx: () => import_Baanx.default,
|
|
27
|
+
Banxa: () => import_Banxa.default,
|
|
28
|
+
Bitrefill: () => import_Bitrefill.default,
|
|
29
|
+
BtcDirect: () => import_BtcDirect.default,
|
|
30
|
+
Changelly: () => import_Changelly.default,
|
|
31
|
+
CoinGecko: () => import_CoinGecko.default,
|
|
32
|
+
Coinify: () => import_Coinify.default,
|
|
33
|
+
Compound: () => import_Compound.default,
|
|
34
|
+
Deversifi: () => import_Deversifi.default,
|
|
35
|
+
Ftx: () => import_Ftx.default,
|
|
36
|
+
Ftxus: () => import_Ftxus.default,
|
|
37
|
+
Kiln: () => import_Kiln.default,
|
|
38
|
+
LedgerBlack: () => import_LedgerBlack.default,
|
|
39
|
+
LedgerCard: () => import_LedgerCard.default,
|
|
40
|
+
LedgerWhite: () => import_LedgerWhite.default,
|
|
41
|
+
Lido: () => import_Lido.default,
|
|
42
|
+
LoopiPay: () => import_LoopiPay.default,
|
|
43
|
+
Mercuryo: () => import_Mercuryo.default,
|
|
44
|
+
Moonpay: () => import_Moonpay.default,
|
|
45
|
+
Opensea: () => import_Opensea.default,
|
|
46
|
+
PancakeSwap: () => import_PancakeSwap.default,
|
|
47
|
+
Paraswap: () => import_Paraswap.default,
|
|
48
|
+
Poap: () => import_Poap.default,
|
|
49
|
+
RainbowMe: () => import_RainbowMe.default,
|
|
50
|
+
Ramp: () => import_Ramp.default,
|
|
51
|
+
Rarible: () => import_Rarible.default,
|
|
52
|
+
Simplex: () => import_Simplex.default,
|
|
53
|
+
SushiSwap: () => import_SushiSwap.default,
|
|
54
|
+
Transak: () => import_Transak.default,
|
|
55
|
+
Wyre: () => import_Wyre.default,
|
|
56
|
+
Zerion: () => import_Zerion.default,
|
|
57
|
+
_1Inch: () => import_Inch.default
|
|
58
|
+
});
|
|
59
|
+
var import_Inch = __toModule(require("./_1Inch.png"));
|
|
60
|
+
var import_Aave = __toModule(require("./Aave.png"));
|
|
61
|
+
var import_Baanx = __toModule(require("./Baanx.png"));
|
|
62
|
+
var import_Banxa = __toModule(require("./Banxa.png"));
|
|
63
|
+
var import_Bitrefill = __toModule(require("./Bitrefill.png"));
|
|
64
|
+
var import_BtcDirect = __toModule(require("./BtcDirect.png"));
|
|
65
|
+
var import_Changelly = __toModule(require("./Changelly.png"));
|
|
66
|
+
var import_CoinGecko = __toModule(require("./CoinGecko.png"));
|
|
67
|
+
var import_Coinify = __toModule(require("./Coinify.png"));
|
|
68
|
+
var import_Compound = __toModule(require("./Compound.png"));
|
|
69
|
+
var import_Deversifi = __toModule(require("./Deversifi.png"));
|
|
70
|
+
var import_Ftx = __toModule(require("./Ftx.png"));
|
|
71
|
+
var import_Ftxus = __toModule(require("./Ftxus.png"));
|
|
72
|
+
var import_Kiln = __toModule(require("./Kiln.png"));
|
|
73
|
+
var import_LedgerBlack = __toModule(require("./LedgerBlack.png"));
|
|
74
|
+
var import_LedgerWhite = __toModule(require("./LedgerWhite.png"));
|
|
75
|
+
var import_LedgerCard = __toModule(require("./LedgerCard.png"));
|
|
76
|
+
var import_Lido = __toModule(require("./Lido.png"));
|
|
77
|
+
var import_LoopiPay = __toModule(require("./LoopiPay.png"));
|
|
78
|
+
var import_Mercuryo = __toModule(require("./Mercuryo.png"));
|
|
79
|
+
var import_Moonpay = __toModule(require("./Moonpay.png"));
|
|
80
|
+
var import_Opensea = __toModule(require("./Opensea.png"));
|
|
81
|
+
var import_PancakeSwap = __toModule(require("./PancakeSwap.png"));
|
|
82
|
+
var import_Paraswap = __toModule(require("./Paraswap.png"));
|
|
83
|
+
var import_Poap = __toModule(require("./Poap.png"));
|
|
84
|
+
var import_RainbowMe = __toModule(require("./RainbowMe.png"));
|
|
85
|
+
var import_Ramp = __toModule(require("./Ramp.png"));
|
|
86
|
+
var import_Rarible = __toModule(require("./Rarible.png"));
|
|
87
|
+
var import_Simplex = __toModule(require("./Simplex.png"));
|
|
88
|
+
var import_SushiSwap = __toModule(require("./SushiSwap.png"));
|
|
89
|
+
var import_Transak = __toModule(require("./Transak.png"));
|
|
90
|
+
var import_Wyre = __toModule(require("./Wyre.png"));
|
|
91
|
+
var import_Zerion = __toModule(require("./Zerion.png"));
|
|
92
|
+
//# sourceMappingURL=index.d.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../src/components/asorted/Icon/ProvidersFavicons/index.d.ts"],
|
|
4
|
+
"sourcesContent": ["declare module \"*.png\" {\n const value: any;\n export = value;\n}\n\nimport _1Inch from \"./_1Inch.png\";\nimport Aave from \"./Aave.png\";\nimport Baanx from \"./Baanx.png\";\nimport Banxa from \"./Banxa.png\";\nimport Bitrefill from \"./Bitrefill.png\";\nimport BtcDirect from \"./BtcDirect.png\";\nimport Changelly from \"./Changelly.png\";\nimport CoinGecko from \"./CoinGecko.png\";\nimport Coinify from \"./Coinify.png\";\nimport Compound from \"./Compound.png\";\nimport Deversifi from \"./Deversifi.png\";\nimport Ftx from \"./Ftx.png\";\nimport Ftxus from \"./Ftxus.png\";\nimport Kiln from \"./Kiln.png\";\nimport LedgerBlack from \"./LedgerBlack.png\";\nimport LedgerWhite from \"./LedgerWhite.png\";\nimport LedgerCard from \"./LedgerCard.png\";\nimport Lido from \"./Lido.png\";\nimport LoopiPay from \"./LoopiPay.png\";\nimport Mercuryo from \"./Mercuryo.png\";\nimport Moonpay from \"./Moonpay.png\";\nimport Opensea from \"./Opensea.png\";\nimport PancakeSwap from \"./PancakeSwap.png\";\nimport Paraswap from \"./Paraswap.png\";\nimport Poap from \"./Poap.png\";\nimport RainbowMe from \"./RainbowMe.png\";\nimport Ramp from \"./Ramp.png\";\nimport Rarible from \"./Rarible.png\";\nimport Simplex from \"./Simplex.png\";\nimport SushiSwap from \"./SushiSwap.png\";\nimport Transak from \"./Transak.png\";\nimport Wyre from \"./Wyre.png\";\nimport Zerion from \"./Zerion.png\";\n\nexport {\n _1Inch,\n Aave,\n Baanx,\n Banxa,\n Bitrefill,\n BtcDirect,\n Changelly,\n CoinGecko,\n Coinify,\n Compound,\n Deversifi,\n Ftx,\n Ftxus,\n Kiln,\n LedgerBlack,\n LedgerWhite,\n LedgerCard,\n Lido,\n LoopiPay,\n Mercuryo,\n Moonpay,\n Opensea,\n PancakeSwap,\n Paraswap,\n Poap,\n RainbowMe,\n Ramp,\n Rarible,\n Simplex,\n SushiSwap,\n Transak,\n Wyre,\n Zerion,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,kBAAmB;AACnB,kBAAiB;AACjB,mBAAkB;AAClB,mBAAkB;AAClB,uBAAsB;AACtB,uBAAsB;AACtB,uBAAsB;AACtB,uBAAsB;AACtB,qBAAoB;AACpB,sBAAqB;AACrB,uBAAsB;AACtB,iBAAgB;AAChB,mBAAkB;AAClB,kBAAiB;AACjB,yBAAwB;AACxB,yBAAwB;AACxB,wBAAuB;AACvB,kBAAiB;AACjB,sBAAqB;AACrB,sBAAqB;AACrB,qBAAoB;AACpB,qBAAoB;AACpB,yBAAwB;AACxB,sBAAqB;AACrB,kBAAiB;AACjB,uBAAsB;AACtB,kBAAiB;AACjB,qBAAoB;AACpB,qBAAoB;AACpB,uBAAsB;AACtB,qBAAoB;AACpB,kBAAiB;AACjB,oBAAmB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -87,26 +87,48 @@ 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,
|
|
103
117
|
"text-transform": "uppercase"
|
|
104
118
|
},
|
|
119
|
+
h4Inter: {
|
|
120
|
+
fontFamily: "Inter, Sans",
|
|
121
|
+
fontWeight: 600
|
|
122
|
+
},
|
|
105
123
|
h5: {
|
|
106
124
|
fontFamily: "Alpha, Inter, Sans",
|
|
107
125
|
fontWeight: 500,
|
|
108
126
|
"text-transform": "uppercase"
|
|
109
127
|
},
|
|
128
|
+
h5Inter: {
|
|
129
|
+
fontFamily: "Inter, Sans",
|
|
130
|
+
fontWeight: 500
|
|
131
|
+
},
|
|
110
132
|
large: {
|
|
111
133
|
fontFamily: "Inter, Sans"
|
|
112
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 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,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
|
}
|
|
@@ -66,7 +66,6 @@ const getVariantColors = (p) => ({
|
|
|
66
66
|
shade: `
|
|
67
67
|
border-color: ${p.theme.colors.neutral.c40};
|
|
68
68
|
color: ${p.theme.colors.neutral.c100};
|
|
69
|
-
background-color: ${p.theme.colors.neutral.c00};
|
|
70
69
|
&:focus {
|
|
71
70
|
border-color: ${p.theme.colors.primary.c80};
|
|
72
71
|
}
|
|
@@ -99,6 +98,13 @@ const getVariantColors = (p) => ({
|
|
|
99
98
|
}
|
|
100
99
|
`
|
|
101
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
|
+
`,
|
|
102
108
|
color: {
|
|
103
109
|
outline: `
|
|
104
110
|
border-color: ${p.theme.colors.primary.c80};
|
|
@@ -191,13 +197,15 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
191
197
|
return p.outline ? variants.error.outline : variants.error.filled;
|
|
192
198
|
case "color":
|
|
193
199
|
return p.outline ? variants.color.outline : variants.color.filled;
|
|
200
|
+
case "neutral":
|
|
201
|
+
return variants.neutral;
|
|
194
202
|
case "default":
|
|
195
203
|
default:
|
|
196
204
|
return variants.default;
|
|
197
205
|
}
|
|
198
206
|
}}
|
|
199
207
|
${(p) => p.iconButton ? import_styled_components.css`
|
|
200
|
-
width: ${p.theme.space[
|
|
208
|
+
width: ${p.theme.space[12]}px;
|
|
201
209
|
padding: 0;
|
|
202
210
|
${IconContainer} {
|
|
203
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,kCAA0B;AAC1B,kBAA0B;AA0B1B,MAAM,gBAAgB,iCAAO;AAAA;AAAA,IAIzB,CAAC,MAAM,GAAG,EAAE,iBAAiB,SAAS,iBAAiB,kBAAkB,EAAE,MAAM,MAAM;AAAA;AAAA;AAI3F,MAAM,mBAAmB,CAAC,MAA+B;AAAA,EACvD,MAAM;AAAA,IACJ,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,8BAGV,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,8BAGlC,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA,IAG5D,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AAAA,sBACa,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA
|
|
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,6 +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;
|
|
89
|
+
fontSizes.h4Inter = fontSizes.h4;
|
|
90
|
+
fontSizes.h5Inter = fontSizes.h5;
|
|
86
91
|
const fontWeights = {
|
|
87
92
|
extraLight: "100",
|
|
88
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\n/* space indexes:\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
|
|
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;
|
|
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;
|
|
@@ -11,7 +11,12 @@ export declare type ProviderSizes = keyof typeof sizes;
|
|
|
11
11
|
export declare type Props = {
|
|
12
12
|
name: string;
|
|
13
13
|
size?: ProviderSizes;
|
|
14
|
+
boxed?: boolean;
|
|
14
15
|
};
|
|
15
16
|
export declare const iconNames: string[];
|
|
16
|
-
declare
|
|
17
|
+
export declare type IconGetterProps = {
|
|
18
|
+
search: string;
|
|
19
|
+
object: Record<string, React.ReactNode>;
|
|
20
|
+
};
|
|
21
|
+
declare const ProviderIcon: ({ name, size, boxed }: Props) => JSX.Element | null;
|
|
17
22
|
export default ProviderIcon;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as providers from "@ledgerhq/icons-ui/react/_ProvidersLogos";
|
|
2
|
+
import * as favicons from "./ProvidersFavicons";
|
|
2
3
|
import React from "react";
|
|
4
|
+
import styled from "styled-components";
|
|
3
5
|
export const sizes = {
|
|
4
6
|
XXS: 16,
|
|
5
7
|
XS: 24,
|
|
@@ -16,11 +18,24 @@ export const iconNames = Array.from(Object.keys(providers).reduce((set, rawKey)
|
|
|
16
18
|
set.add(key);
|
|
17
19
|
return set;
|
|
18
20
|
}, new Set()));
|
|
19
|
-
const
|
|
21
|
+
const Favicon = styled.img `
|
|
22
|
+
border-radius: 8px;
|
|
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
|
+
};
|
|
29
|
+
const ProviderIcon = ({ name, size = "S", boxed = false }) => {
|
|
20
30
|
const maybeIconName = `${name}`;
|
|
21
|
-
if (
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
if (boxed) {
|
|
32
|
+
return (React.createElement(Favicon, { width: sizes[size], height: sizes[size], src: getIconCaseInsensitive({ search: maybeIconName, object: favicons }) }));
|
|
33
|
+
}
|
|
34
|
+
const Component = getIconCaseInsensitive({
|
|
35
|
+
search: maybeIconName,
|
|
36
|
+
object: providers,
|
|
37
|
+
});
|
|
38
|
+
if (Component) {
|
|
24
39
|
return React.createElement(Component, { size: sizes[size] });
|
|
25
40
|
}
|
|
26
41
|
return null;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="src/assets/images/images" />
|
|
2
|
+
import _1Inch from "*.png";
|
|
3
|
+
import Aave from "*.png";
|
|
4
|
+
import Baanx from "*.png";
|
|
5
|
+
import Banxa from "*.png";
|
|
6
|
+
import Bitrefill from "*.png";
|
|
7
|
+
import BtcDirect from "*.png";
|
|
8
|
+
import Changelly from "*.png";
|
|
9
|
+
import CoinGecko from "*.png";
|
|
10
|
+
import Coinify from "*.png";
|
|
11
|
+
import Compound from "*.png";
|
|
12
|
+
import Deversifi from "*.png";
|
|
13
|
+
import Ftx from "*.png";
|
|
14
|
+
import Ftxus from "*.png";
|
|
15
|
+
import Kiln from "*.png";
|
|
16
|
+
import LedgerBlack from "*.png";
|
|
17
|
+
import LedgerWhite from "*.png";
|
|
18
|
+
import LedgerCard from "*.png";
|
|
19
|
+
import Lido from "*.png";
|
|
20
|
+
import LoopiPay from "*.png";
|
|
21
|
+
import Mercuryo from "*.png";
|
|
22
|
+
import Moonpay from "*.png";
|
|
23
|
+
import Opensea from "*.png";
|
|
24
|
+
import PancakeSwap from "*.png";
|
|
25
|
+
import Paraswap from "*.png";
|
|
26
|
+
import Poap from "*.png";
|
|
27
|
+
import RainbowMe from "*.png";
|
|
28
|
+
import Ramp from "*.png";
|
|
29
|
+
import Rarible from "*.png";
|
|
30
|
+
import Simplex from "*.png";
|
|
31
|
+
import SushiSwap from "*.png";
|
|
32
|
+
import Transak from "*.png";
|
|
33
|
+
import Wyre from "*.png";
|
|
34
|
+
import Zerion from "*.png";
|
|
35
|
+
export { _1Inch, Aave, Baanx, Banxa, Bitrefill, BtcDirect, Changelly, CoinGecko, Coinify, Compound, Deversifi, Ftx, Ftxus, Kiln, LedgerBlack, LedgerWhite, LedgerCard, Lido, LoopiPay, Mercuryo, Moonpay, Opensea, PancakeSwap, Paraswap, Poap, RainbowMe, Ramp, Rarible, Simplex, SushiSwap, Transak, Wyre, Zerion };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _1Inch from "./_1Inch.png";
|
|
2
|
+
import Aave from "./Aave.png";
|
|
3
|
+
import Baanx from "./Baanx.png";
|
|
4
|
+
import Banxa from "./Banxa.png";
|
|
5
|
+
import Bitrefill from "./Bitrefill.png";
|
|
6
|
+
import BtcDirect from "./BtcDirect.png";
|
|
7
|
+
import Changelly from "./Changelly.png";
|
|
8
|
+
import CoinGecko from "./CoinGecko.png";
|
|
9
|
+
import Coinify from "./Coinify.png";
|
|
10
|
+
import Compound from "./Compound.png";
|
|
11
|
+
import Deversifi from "./Deversifi.png";
|
|
12
|
+
import Ftx from "./Ftx.png";
|
|
13
|
+
import Ftxus from "./Ftxus.png";
|
|
14
|
+
import Kiln from "./Kiln.png";
|
|
15
|
+
import LedgerBlack from "./LedgerBlack.png";
|
|
16
|
+
import LedgerWhite from "./LedgerWhite.png";
|
|
17
|
+
import LedgerCard from "./LedgerCard.png";
|
|
18
|
+
import Lido from "./Lido.png";
|
|
19
|
+
import LoopiPay from "./LoopiPay.png";
|
|
20
|
+
import Mercuryo from "./Mercuryo.png";
|
|
21
|
+
import Moonpay from "./Moonpay.png";
|
|
22
|
+
import Opensea from "./Opensea.png";
|
|
23
|
+
import PancakeSwap from "./PancakeSwap.png";
|
|
24
|
+
import Paraswap from "./Paraswap.png";
|
|
25
|
+
import Poap from "./Poap.png";
|
|
26
|
+
import RainbowMe from "./RainbowMe.png";
|
|
27
|
+
import Ramp from "./Ramp.png";
|
|
28
|
+
import Rarible from "./Rarible.png";
|
|
29
|
+
import Simplex from "./Simplex.png";
|
|
30
|
+
import SushiSwap from "./SushiSwap.png";
|
|
31
|
+
import Transak from "./Transak.png";
|
|
32
|
+
import Wyre from "./Wyre.png";
|
|
33
|
+
import Zerion from "./Zerion.png";
|
|
34
|
+
export { _1Inch, Aave, Baanx, Banxa, Bitrefill, BtcDirect, Changelly, CoinGecko, Coinify, Compound, Deversifi, Ftx, Ftxus, Kiln, LedgerBlack, LedgerWhite, LedgerCard, Lido, LoopiPay, Mercuryo, Moonpay, Opensea, PancakeSwap, Paraswap, Poap, RainbowMe, Ramp, Rarible, Simplex, SushiSwap, Transak, Wyre, Zerion, };
|
|
@@ -61,26 +61,48 @@ 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,
|
|
77
91
|
"text-transform": "uppercase",
|
|
78
92
|
},
|
|
93
|
+
h4Inter: {
|
|
94
|
+
fontFamily: "Inter, Sans",
|
|
95
|
+
fontWeight: 600,
|
|
96
|
+
},
|
|
79
97
|
h5: {
|
|
80
98
|
fontFamily: "Alpha, Inter, Sans",
|
|
81
99
|
fontWeight: 500,
|
|
82
100
|
"text-transform": "uppercase",
|
|
83
101
|
},
|
|
102
|
+
h5Inter: {
|
|
103
|
+
fontFamily: "Inter, Sans",
|
|
104
|
+
fontWeight: 500,
|
|
105
|
+
},
|
|
84
106
|
large: {
|
|
85
107
|
fontFamily: "Inter, Sans",
|
|
86
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;
|
|
@@ -47,7 +47,6 @@ const getVariantColors = (p) => ({
|
|
|
47
47
|
shade: `
|
|
48
48
|
border-color: ${p.theme.colors.neutral.c40};
|
|
49
49
|
color: ${p.theme.colors.neutral.c100};
|
|
50
|
-
background-color: ${p.theme.colors.neutral.c00};
|
|
51
50
|
&:focus {
|
|
52
51
|
border-color: ${p.theme.colors.primary.c80};
|
|
53
52
|
}
|
|
@@ -80,6 +79,13 @@ const getVariantColors = (p) => ({
|
|
|
80
79
|
}
|
|
81
80
|
`,
|
|
82
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
|
+
`,
|
|
83
89
|
color: {
|
|
84
90
|
outline: `
|
|
85
91
|
border-color: ${p.theme.colors.primary.c80};
|
|
@@ -178,6 +184,8 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
178
184
|
return p.outline ? variants.error.outline : variants.error.filled;
|
|
179
185
|
case "color":
|
|
180
186
|
return p.outline ? variants.color.outline : variants.color.filled;
|
|
187
|
+
case "neutral":
|
|
188
|
+
return variants.neutral;
|
|
181
189
|
case "default":
|
|
182
190
|
default:
|
|
183
191
|
return variants.default;
|
|
@@ -185,7 +193,7 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
185
193
|
}}
|
|
186
194
|
${(p) => p.iconButton
|
|
187
195
|
? css `
|
|
188
|
-
width: ${p.theme.space[
|
|
196
|
+
width: ${p.theme.space[12]}px;
|
|
189
197
|
padding: 0;
|
|
190
198
|
${IconContainer} {
|
|
191
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" | "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
|
@@ -7,10 +7,9 @@ export const breakpoints = {
|
|
|
7
7
|
xl: "1280px",
|
|
8
8
|
xxl: "1536px",
|
|
9
9
|
};
|
|
10
|
-
/* space indexes:
|
|
11
|
-
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
|
|
12
|
-
*/
|
|
13
10
|
export const space = [
|
|
11
|
+
/* space indexes:
|
|
12
|
+
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */
|
|
14
13
|
0, 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,
|
|
15
14
|
];
|
|
16
15
|
export const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36];
|
|
@@ -32,6 +31,11 @@ fontSizes.largeLineHeight = fontSizes.large;
|
|
|
32
31
|
fontSizes.bodyLineHeight = fontSizes.body;
|
|
33
32
|
fontSizes.paragraphLineHeight = fontSizes.paragraph;
|
|
34
33
|
fontSizes.subtitle = fontSizes.extraSmall;
|
|
34
|
+
fontSizes.h1Inter = fontSizes.h1;
|
|
35
|
+
fontSizes.h2Inter = fontSizes.h2;
|
|
36
|
+
fontSizes.h3Inter = fontSizes.h3;
|
|
37
|
+
fontSizes.h4Inter = fontSizes.h4;
|
|
38
|
+
fontSizes.h5Inter = fontSizes.h5;
|
|
35
39
|
const fontWeights = {
|
|
36
40
|
extraLight: "100",
|
|
37
41
|
light: "300",
|