@ledgerhq/react-ui 0.10.1 → 0.10.2-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/asorted/Icon/PaymentIcon.js +2 -5
- package/lib/cjs/components/asorted/Icon/PaymentIcon.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js +4 -3
- package/lib/cjs/components/asorted/Icon/PaymentIcon.stories.js.map +2 -2
- package/lib/components/asorted/Icon/PaymentIcon.d.ts +0 -3
- package/lib/components/asorted/Icon/PaymentIcon.js +1 -4
- package/package.json +2 -2
|
@@ -31,10 +31,7 @@ var import_react = __toModule(require("react"));
|
|
|
31
31
|
const sizes = {
|
|
32
32
|
XXS: 16,
|
|
33
33
|
XS: 24,
|
|
34
|
-
S: 32
|
|
35
|
-
M: 40,
|
|
36
|
-
L: 48,
|
|
37
|
-
XL: 56
|
|
34
|
+
S: 32
|
|
38
35
|
};
|
|
39
36
|
const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey) => {
|
|
40
37
|
const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
|
|
@@ -55,7 +52,7 @@ const PaymentIcon = ({ name, size = "S" }) => {
|
|
|
55
52
|
});
|
|
56
53
|
if (Component) {
|
|
57
54
|
return /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
58
|
-
|
|
55
|
+
height: sizes[size]
|
|
59
56
|
});
|
|
60
57
|
}
|
|
61
58
|
return null;
|
|
@@ -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/index\";\n\nimport React from \"react\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\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
|
|
4
|
+
"sourcesContent": ["import * as paymentProviders from \"@ledgerhq/icons-ui/react/Payment/index\";\n\nimport React from \"react\";\n\nexport const sizes = {\n XXS: 16,\n XS: 24,\n S: 32,\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 height={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;AAUE,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,QAAQ,MAAM;AAAA;AAAA;AAElC,SAAO;AAAA;AAGT,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,13 +62,14 @@ const Story = {
|
|
|
62
62
|
size: {
|
|
63
63
|
type: "enum",
|
|
64
64
|
description: "Icon size",
|
|
65
|
-
defaultValue: "
|
|
65
|
+
defaultValue: "S",
|
|
66
66
|
control: {
|
|
67
67
|
options: Object.keys(import_PaymentIcon.sizes)
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
name: {
|
|
71
|
-
type: "string"
|
|
71
|
+
type: "string",
|
|
72
|
+
defaultValue: "Ach"
|
|
72
73
|
}
|
|
73
74
|
}
|
|
74
75
|
};
|
|
@@ -81,7 +82,7 @@ const ListTemplate = (args) => {
|
|
|
81
82
|
value: search,
|
|
82
83
|
onChange: setSearch
|
|
83
84
|
}), /* @__PURE__ */ import_react.default.createElement(ScrollArea, {
|
|
84
|
-
gridTemplateColumns: "repeat(auto-fill,
|
|
85
|
+
gridTemplateColumns: "repeat(auto-fill, 120px);",
|
|
85
86
|
gridTemplateRows: "repeat(auto-fill, 100px);",
|
|
86
87
|
gridGap: 4,
|
|
87
88
|
mt: 4
|
|
@@ -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: \"
|
|
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;
|
|
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: \"S\",\n control: {\n options: Object.keys(flagSizes),\n },\n },\n name: {\n type: \"string\",\n defaultValue: \"Ach\",\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, 120px);\"\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,MACN,cAAc;AAAA;AAAA;AAAA;AAIpB,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
|
}
|
|
@@ -4,9 +4,6 @@ export const sizes = {
|
|
|
4
4
|
XXS: 16,
|
|
5
5
|
XS: 24,
|
|
6
6
|
S: 32,
|
|
7
|
-
M: 40,
|
|
8
|
-
L: 48,
|
|
9
|
-
XL: 56,
|
|
10
7
|
};
|
|
11
8
|
export const iconNames = Array.from(Object.keys(paymentProviders).reduce((set, rawKey) => {
|
|
12
9
|
const key = rawKey
|
|
@@ -28,7 +25,7 @@ const PaymentIcon = ({ name, size = "S" }) => {
|
|
|
28
25
|
object: paymentProviders,
|
|
29
26
|
});
|
|
30
27
|
if (Component) {
|
|
31
|
-
return React.createElement(Component, {
|
|
28
|
+
return React.createElement(Component, { height: sizes[size] });
|
|
32
29
|
}
|
|
33
30
|
return null;
|
|
34
31
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2-next.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^0.2.1",
|
|
79
|
-
"@ledgerhq/icons-ui": "^0.3.
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.3.2-next.0",
|
|
80
80
|
"@ledgerhq/ui-shared": "^0.1.10"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|