@ledgerhq/react-ui 0.14.11-nightly.3 → 0.14.12-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/Tag/Tag.stories.js +1 -1
- package/lib/cjs/components/Tag/Tag.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js +21 -27
- package/lib/cjs/components/asorted/Icon/BoxedIcon.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js +11 -9
- package/lib/cjs/components/asorted/Icon/CryptoIcons.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/IconsLegacy.stories.js +25 -17
- package/lib/cjs/components/asorted/Icon/IconsLegacy.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/Button.stories.js +1 -1
- package/lib/cjs/components/cta/Button/Button.stories.js.map +1 -1
- package/lib/cjs/components/form/Dropdown/Dropdown.stories.js +4 -1
- package/lib/cjs/components/form/Dropdown/Dropdown.stories.js.map +2 -2
- package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js +14 -6
- package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js.map +2 -2
- package/lib/cjs/components/layout/Box/Box.stories.js +11 -4
- package/lib/cjs/components/layout/Box/Box.stories.js.map +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js +11 -9
- package/lib/cjs/components/layout/Popin/Popin.stories.js.map +2 -2
- package/lib/cjs/components/layout/Side/Side.stories.js +4 -1
- package/lib/cjs/components/layout/Side/Side.stories.js.map +2 -2
- package/lib/cjs/components/message/Alert/Alert.stories.js +6 -4
- package/lib/cjs/components/message/Alert/Alert.stories.js.map +2 -2
- package/lib/cjs/components/message/ContinueOnDevice/ContinueOnDevice.stories.js +18 -7
- package/lib/cjs/components/message/ContinueOnDevice/ContinueOnDevice.stories.js.map +2 -2
- package/lib/cjs/components/message/Log/Log.stories.js +4 -2
- package/lib/cjs/components/message/Log/Log.stories.js.map +2 -2
- package/lib/cjs/components/message/Notification/Notification.stories.js +10 -8
- package/lib/cjs/components/message/Notification/Notification.stories.js.map +2 -2
- package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js +4 -2
- package/lib/cjs/components/message/StatusNotification/StatusNotification.stories.js.map +2 -2
- package/lib/cjs/components/message/Tip/Tip.stories.js +5 -2
- package/lib/cjs/components/message/Tip/Tip.stories.js.map +2 -2
- package/lib/cjs/components/message/Tooltip/Tooltip.stories.js +4 -1
- package/lib/cjs/components/message/Tooltip/Tooltip.stories.js.map +2 -2
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js +4 -1
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map +2 -2
- package/lib/cjs/components/styled.stories.js +7 -4
- package/lib/cjs/components/styled.stories.js.map +2 -2
- package/package.json +14 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Tag/Tag.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n title: \"Toasts/Tag\",\n component: Tag,\n argTypes: {\n active: {\n control: {\n type: \"boolean\",\n },\n },\n type: {\n options: types,\n },\n size: {\n options: sizes,\n },\n children: {\n type: \"string\",\n },\n },\n};\n\nexport const Overview = ((): JSX.Element => (\n <Flex flexDirection=\"column\">\n {sizes.map(size => (\n <Flex flexDirection=\"column\" marginBottom={5}>\n <Text variant=\"h5\" marginBottom={5}>\n size=\"{size}\"\n </Text>\n {types.map(type => (\n <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n <div style={{ width: \"150px\" }}>\n <Text variant=\"small\" color=\"neutral.c70\">\n type=\"{type}\"\n </Text>\n </div>\n <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n {states.map(state =>\n [true, false].map((active: boolean) => (\n <Tag size={size} type={type} active={active} {...state}>\n {active ? \"Active\" : \"Inactive\"}\n </Tag>\n )),\n )}\n </Flex>\n </Flex>\n ))}\n </Flex>\n ))}\n </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n active: true,\n children: \"Label\",\n type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n ...defaultArgs,\n type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n ...defaultArgs,\n type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n ...defaultArgs,\n type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n title: \"Toasts/Tag\",\n component: Tag,\n argTypes: {\n active: {\n control: {\n type: \"boolean\",\n },\n },\n type: {\n options: types,\n },\n size: {\n options: sizes,\n },\n children: {\n type: \"string\",\n },\n },\n};\n\nexport const Overview = ((): JSX.Element => (\n <Flex flexDirection=\"column\">\n {sizes.map(size => (\n <Flex flexDirection=\"column\" marginBottom={5}>\n <Text variant=\"h5\" marginBottom={5}>\n size=\"{size}\"\n </Text>\n {types.map(type => (\n <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n <div style={{ width: \"150px\" }}>\n <Text variant=\"small\" color=\"neutral.c70\">\n type=\"{type}\"\n </Text>\n </div>\n <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n {states.map(state =>\n [true, false].map((active: boolean) => (\n <Tag size={size} type={type} active={active} {...state}>\n {active ? \"Active\" : \"Inactive\"}\n </Tag>\n )),\n )}\n </Flex>\n </Flex>\n ))}\n </Flex>\n ))}\n </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n active: true,\n children: \"Label\",\n type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n ...defaultArgs,\n type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n ...defaultArgs,\n type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n ...defaultArgs,\n type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlinedOpacity.args = {\n ...defaultArgs,\n type: \"outlinedOpacity\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,gBAAgB,OAAO;AAAA,EACrB,GAAG;AAAA,EACH,MAAM;AACR;",
|
|
6
6
|
"names": ["Tag", "React", "Flex", "Text"]
|
|
7
7
|
}
|
|
@@ -42,29 +42,18 @@ const Story = {
|
|
|
42
42
|
argTypes: {
|
|
43
43
|
exampleIconName: {
|
|
44
44
|
type: "enum",
|
|
45
|
-
defaultValue: "Activity",
|
|
46
45
|
description: "[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.",
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
control: {
|
|
50
|
-
type: "select"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
46
|
+
options: import_Icon.iconNames,
|
|
47
|
+
control: { type: "select" }
|
|
53
48
|
},
|
|
54
49
|
exampleBadgeName: {
|
|
55
50
|
type: "enum",
|
|
56
|
-
defaultValue: "CircledCheckSolid",
|
|
57
51
|
description: "[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.",
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
control: {
|
|
61
|
-
type: "select"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
52
|
+
options: import_Icon.iconNames,
|
|
53
|
+
control: { type: "select" }
|
|
64
54
|
},
|
|
65
55
|
exampleBadgeEnabled: {
|
|
66
56
|
type: "boolean",
|
|
67
|
-
defaultValue: true,
|
|
68
57
|
description: "[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component."
|
|
69
58
|
},
|
|
70
59
|
Badge: {
|
|
@@ -75,31 +64,36 @@ const Story = {
|
|
|
75
64
|
},
|
|
76
65
|
iconColor: {
|
|
77
66
|
type: "string",
|
|
78
|
-
|
|
79
|
-
control: { control: "color" }
|
|
67
|
+
control: { type: "color" }
|
|
80
68
|
},
|
|
81
69
|
badgeColor: {
|
|
82
70
|
type: "string",
|
|
83
|
-
|
|
84
|
-
control: { control: "color" }
|
|
71
|
+
control: { type: "color" }
|
|
85
72
|
},
|
|
86
73
|
borderColor: {
|
|
87
74
|
type: "string",
|
|
88
|
-
|
|
89
|
-
control: { control: "color" }
|
|
75
|
+
control: { type: "color" }
|
|
90
76
|
},
|
|
91
77
|
iconSize: {
|
|
92
|
-
type: "number"
|
|
93
|
-
defaultValue: import_BoxedIcon.DEFAULT_ICON_SIZE
|
|
78
|
+
type: "number"
|
|
94
79
|
},
|
|
95
80
|
badgeSize: {
|
|
96
|
-
type: "number"
|
|
97
|
-
defaultValue: import_BoxedIcon.DEFAULT_BADGE_SIZE
|
|
81
|
+
type: "number"
|
|
98
82
|
},
|
|
99
83
|
size: {
|
|
100
|
-
type: "number"
|
|
101
|
-
defaultValue: import_BoxedIcon.DEFAULT_BOX_SIZE
|
|
84
|
+
type: "number"
|
|
102
85
|
}
|
|
86
|
+
},
|
|
87
|
+
args: {
|
|
88
|
+
exampleIconName: "Activity",
|
|
89
|
+
exampleBadgeName: "CircledCheckSolid",
|
|
90
|
+
exampleBadgeEnabled: true,
|
|
91
|
+
iconColor: "hsla(110, 50%, 57%, 1)",
|
|
92
|
+
badgeColor: "hsla(110, 50%, 57%, 1)",
|
|
93
|
+
borderColor: "success.c40",
|
|
94
|
+
iconSize: import_BoxedIcon.DEFAULT_ICON_SIZE,
|
|
95
|
+
badgeSize: import_BoxedIcon.DEFAULT_BADGE_SIZE,
|
|
96
|
+
size: import_BoxedIcon.DEFAULT_BOX_SIZE
|
|
103
97
|
}
|
|
104
98
|
};
|
|
105
99
|
var BoxedIcon_stories_default = Story;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/BoxedIcon.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n BoxedIconProps,\n IconProps,\n DEFAULT_BOX_SIZE,\n DEFAULT_ICON_SIZE,\n DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n title: \"Asorted/Icons/BoxedIcon\",\n component: BoxedIconC,\n argTypes: {\n exampleIconName: {\n type: \"enum\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,KAAK,MACvC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,EAAE,MAAM,MAAM,GAAG;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW,iBAAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport Icon, { iconNames } from \"./Icon\";\nimport BoxedIconC, {\n BoxedIconProps,\n IconProps,\n DEFAULT_BOX_SIZE,\n DEFAULT_ICON_SIZE,\n DEFAULT_BADGE_SIZE,\n} from \"./BoxedIcon\";\n\nconst ExampleIcon = ({ size, color, name }: IconProps & { name: string }) => (\n <Icon name={name} {...{ size, color }} />\n);\n\nconst Story = {\n title: \"Asorted/Icons/BoxedIcon\",\n component: BoxedIconC,\n argTypes: {\n exampleIconName: {\n type: \"enum\",\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Icon` prop.\",\n options: iconNames,\n control: { type: \"select\" },\n },\n exampleBadgeName: {\n type: \"enum\",\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Badge icon name. Value is passed to the `Icon` component of this UI library which is then used for the `Badge` prop.\",\n options: iconNames,\n control: { type: \"select\" },\n },\n exampleBadgeEnabled: {\n type: \"boolean\",\n description:\n \"[Not a BoxedIcon prop, only for this Storybook example] - Controls whether a `Badge` prop is passed to the `BoxedIcon` component.\",\n },\n Badge: {\n control: false,\n },\n Icon: {\n control: false,\n },\n iconColor: {\n type: \"string\",\n control: { type: \"color\" },\n },\n badgeColor: {\n type: \"string\",\n control: { type: \"color\" },\n },\n borderColor: {\n type: \"string\",\n control: { type: \"color\" },\n },\n iconSize: {\n type: \"number\",\n },\n badgeSize: {\n type: \"number\",\n },\n size: {\n type: \"number\",\n },\n },\n args: {\n exampleIconName: \"Activity\",\n exampleBadgeName: \"CircledCheckSolid\",\n exampleBadgeEnabled: true,\n iconColor: \"hsla(110, 50%, 57%, 1)\",\n badgeColor: \"hsla(110, 50%, 57%, 1)\",\n borderColor: \"success.c40\",\n iconSize: DEFAULT_ICON_SIZE,\n badgeSize: DEFAULT_BADGE_SIZE,\n size: DEFAULT_BOX_SIZE,\n },\n};\n\nexport default Story;\n\nconst BoxedIconTemplate = (\n args: BoxedIconProps & {\n exampleIconName: string;\n exampleBadgeName: string;\n exampleBadgeEnabled: boolean;\n },\n) => {\n const badgeColor = args.badgeColor;\n const badgeSize = args.badgeSize;\n const borderColor = args.borderColor;\n const iconColor = args.iconColor;\n const IconComp =\n args.Icon || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleIconName} />);\n const BadgeComp =\n args.Badge || ((props: IconProps) => <ExampleIcon {...props} name={args.exampleBadgeName} />);\n const iconSize = args.iconSize;\n const size = args.size;\n\n return (\n <BoxedIconC\n Icon={IconComp}\n Badge={args.exampleBadgeEnabled ? BadgeComp : undefined}\n badgeColor={badgeColor}\n badgeSize={badgeSize}\n borderColor={borderColor}\n iconColor={iconColor}\n iconSize={iconSize}\n size={size}\n />\n );\n};\n\nexport const BoxedIcon = BoxedIconTemplate.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAgC;AAChC,uBAMO;AAEP,MAAM,cAAc,CAAC,EAAE,MAAM,OAAO,KAAK,MACvC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,EAAE,MAAM,MAAM,GAAG;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,WAAW,iBAAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,aACE;AAAA,MACF,SAAS;AAAA,MACT,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,aACE;AAAA,MACF,SAAS;AAAA,MACT,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;AAEA,IAAO,4BAAQ;AAEf,MAAM,oBAAoB,CACxB,SAKG;AACH,QAAM,aAAa,KAAK;AACxB,QAAM,YAAY,KAAK;AACvB,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK;AACvB,QAAM,WACJ,KAAK,SAAS,CAAC,UAAqB,6BAAAF,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,iBAAiB;AAC1F,QAAM,YACJ,KAAK,UAAU,CAAC,UAAqB,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAM,KAAK,kBAAkB;AAC5F,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAElB,SACE,6BAAAA,QAAA;AAAA,IAAC,iBAAAE;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO,KAAK,sBAAsB,YAAY;AAAA,MAC9C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,kBAAkB,KAAK,CAAC,CAAC;",
|
|
6
6
|
"names": ["React", "Icon", "BoxedIconC"]
|
|
7
7
|
}
|
|
@@ -86,8 +86,7 @@ const Story = {
|
|
|
86
86
|
argTypes: {
|
|
87
87
|
size: {
|
|
88
88
|
type: "number",
|
|
89
|
-
description: "Icon size for preview"
|
|
90
|
-
defaultValue: 32
|
|
89
|
+
description: "Icon size for preview"
|
|
91
90
|
},
|
|
92
91
|
color: {
|
|
93
92
|
type: "string",
|
|
@@ -96,7 +95,6 @@ const Story = {
|
|
|
96
95
|
},
|
|
97
96
|
name: {
|
|
98
97
|
type: "enum",
|
|
99
|
-
defaultValue: "BTC",
|
|
100
98
|
description: "[Only for single icon], Icon name",
|
|
101
99
|
control: {
|
|
102
100
|
options: Object.keys(cryptoIcons),
|
|
@@ -107,20 +105,24 @@ const Story = {
|
|
|
107
105
|
},
|
|
108
106
|
circleIcon: {
|
|
109
107
|
type: "boolean",
|
|
110
|
-
description: "if icon is in a circle or not"
|
|
111
|
-
defaultValue: false
|
|
108
|
+
description: "if icon is in a circle or not"
|
|
112
109
|
},
|
|
113
110
|
disabled: {
|
|
114
111
|
type: "boolean",
|
|
115
|
-
description: "if icon is in a disabled or not"
|
|
116
|
-
defaultValue: false
|
|
112
|
+
description: "if icon is in a disabled or not"
|
|
117
113
|
},
|
|
118
114
|
tokenIcon: {
|
|
119
115
|
type: "string",
|
|
120
|
-
description: "ref to the token icon to show as a sub icon"
|
|
121
|
-
defaultValue: ""
|
|
116
|
+
description: "ref to the token icon to show as a sub icon"
|
|
122
117
|
}
|
|
123
118
|
},
|
|
119
|
+
args: {
|
|
120
|
+
size: 32,
|
|
121
|
+
name: "BTC",
|
|
122
|
+
circleIcon: false,
|
|
123
|
+
disabled: false,
|
|
124
|
+
tokenIcon: ""
|
|
125
|
+
},
|
|
124
126
|
parameters: {
|
|
125
127
|
docs: {
|
|
126
128
|
description: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/CryptoIcons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean; // if icon is in a circle or not\n tokenIcon?: string; // ref to the token icon to show as a sub icon\n disabled?: boolean;\n fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,eAA0D;AAC1D,kBAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BpB,MAAM,iBAAa,yBAAAA,SAAO,aAAI;AAAA;AAAA;AAAA,IAG1B,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA;AAG3B,MAAM,gBAAY,yBAAAA,SAAO,aAAI,EAAE,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AACL,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,oBAAgB,yBAAAA,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AACL,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,OAAO,yBAAAA,QAAO;AAAA,WACT,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1C,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Text, SearchInput, Flex, Grid, CryptoIcon } from \"../../..\";\nimport * as cryptoIcons from \"@ledgerhq/crypto-icons-ui/react\";\n\nconst description = `\n### A customizable crypto-icon component.\n\n### Props\n\n\\`\\`\\`tsx\ntype Props = {\n name: string;\n size?: number;\n color?: string;\n backgroundColor?: string; // overrides background color to ensure contrast with icon color\n circleIcon?: boolean; // if icon is in a circle or not\n tokenIcon?: string; // ref to the token icon to show as a sub icon\n disabled?: boolean;\n fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name\n};\n\\`\\`\\`\n`;\n\ntype CryptoIconsProps = {\n name: keyof typeof cryptoIcons;\n size?: number;\n color?: string;\n circleIcon?: boolean;\n disabled?: boolean;\n tokenIcon?: string;\n};\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${p => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${p => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/CryptoIcons\",\n argTypes: {\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n },\n color: {\n type: \"string\",\n description: \"Color\",\n control: { control: \"color\" },\n },\n name: {\n type: \"enum\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: Object.keys(cryptoIcons),\n control: {\n type: \"select\",\n },\n },\n },\n circleIcon: {\n type: \"boolean\",\n description: \"if icon is in a circle or not\",\n },\n disabled: {\n type: \"boolean\",\n description: \"if icon is in a disabled or not\",\n },\n tokenIcon: {\n type: \"string\",\n description: \"ref to the token icon to show as a sub icon\",\n },\n },\n args: {\n size: 32,\n name: \"BTC\",\n circleIcon: false,\n disabled: false,\n tokenIcon: \"\",\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n const { tokenIcon, disabled, circleIcon, size } = args;\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {Object.keys(cryptoIcons)\n .sort((a, b) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n // @ts-expect-error FIXME I don't know how to make you happy ts\n .map((name: keyof typeof cryptoIcons) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <CryptoIcon\n key={name}\n name={name}\n size={size}\n color={color}\n disabled={disabled}\n circleIcon={circleIcon}\n tokenIcon={tokenIcon}\n />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst IconTemplate = (args: CryptoIconsProps) => {\n const color = args.color || undefined;\n\n return <CryptoIcon {...args} color={color} />;\n};\n\nexport const ListCryptoIcons = ListTemplate.bind({});\nexport const SingleCryptoIcon = IconTemplate.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -70,35 +70,43 @@ const Story = {
|
|
|
70
70
|
weight: {
|
|
71
71
|
type: "enum",
|
|
72
72
|
description: "Weight (Deprecated)",
|
|
73
|
-
|
|
74
|
-
control: {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
73
|
+
options: ["Medium"],
|
|
74
|
+
control: { type: "select" },
|
|
75
|
+
table: {
|
|
76
|
+
type: { summary: "enum" },
|
|
77
|
+
defaultValue: { summary: "Medium" }
|
|
79
78
|
}
|
|
80
79
|
},
|
|
81
80
|
size: {
|
|
82
81
|
type: "number",
|
|
83
82
|
description: "Icon size for preview",
|
|
84
|
-
|
|
83
|
+
table: {
|
|
84
|
+
type: { summary: "number" },
|
|
85
|
+
defaultValue: { summary: "32" }
|
|
86
|
+
}
|
|
85
87
|
},
|
|
86
88
|
color: {
|
|
87
89
|
type: "string",
|
|
88
|
-
description: "
|
|
89
|
-
|
|
90
|
+
description: "Icon color",
|
|
91
|
+
table: {
|
|
92
|
+
type: { summary: "string" },
|
|
93
|
+
defaultValue: { summary: "theme.colors.neutral.c100" }
|
|
94
|
+
}
|
|
90
95
|
},
|
|
91
96
|
name: {
|
|
92
97
|
type: "enum",
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
control: {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
type: "select"
|
|
99
|
-
}
|
|
98
|
+
description: "Icon name",
|
|
99
|
+
options: import_Icon.iconNames,
|
|
100
|
+
control: { type: "select" },
|
|
101
|
+
table: {
|
|
102
|
+
type: { summary: "enum" }
|
|
100
103
|
}
|
|
101
104
|
}
|
|
105
|
+
},
|
|
106
|
+
args: {
|
|
107
|
+
weight: "Medium",
|
|
108
|
+
size: 32,
|
|
109
|
+
name: "Activity"
|
|
102
110
|
}
|
|
103
111
|
};
|
|
104
112
|
var IconsLegacy_stories_default = Story;
|
|
@@ -140,6 +148,6 @@ const IconTemplate = (args) => {
|
|
|
140
148
|
const color = args.color || theme.colors.neutral.c100;
|
|
141
149
|
return /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { ...args, color });
|
|
142
150
|
};
|
|
143
|
-
const List = ListTemplate.bind({});
|
|
144
151
|
const SingleIcon = IconTemplate.bind({});
|
|
152
|
+
const List = ListTemplate.bind({});
|
|
145
153
|
//# sourceMappingURL=IconsLegacy.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/IconsLegacy.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\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/Icons(legacy)\",\n argTypes: {\n weight: {\n type: \"enum\",\n description: \"Weight (Deprecated)\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAoD;AACpD,IAAAA,4BAAyB;AACzB,eAA8C;AAE9C,MAAM,iBAAa,yBAAAC,SAAO,aAAI;AAAA;AAAA;AAAA,IAG1B,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA;AAG3B,MAAM,gBAAY,yBAAAA,SAAO,aAAI,EAAE,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AACL,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,oBAAgB,yBAAAA,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AACL,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,OAAO,yBAAAA,QAAO;AAAA,WACT,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG1C,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Icon, { iconNames, Props as IconProps } from \"./Icon\";\nimport { useTheme } from \"styled-components\";\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/Icons(legacy)\",\n argTypes: {\n weight: {\n type: \"enum\",\n description: \"Weight (Deprecated)\",\n options: [\"Medium\"],\n control: { type: \"select\" },\n table: {\n type: { summary: \"enum\" },\n defaultValue: { summary: \"Medium\" },\n },\n },\n size: {\n type: \"number\",\n description: \"Icon size for preview\",\n table: {\n type: { summary: \"number\" },\n defaultValue: { summary: \"32\" },\n },\n },\n color: {\n type: \"string\",\n description: \"Icon color\",\n table: {\n type: { summary: \"string\" },\n defaultValue: { summary: \"theme.colors.neutral.c100\" },\n },\n },\n name: {\n type: \"enum\",\n description: \"Icon name\",\n options: iconNames,\n control: { type: \"select\" },\n table: {\n type: { summary: \"enum\" },\n },\n },\n },\n args: {\n weight: \"Medium\",\n size: 32,\n name: \"Activity\",\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: IconProps) => {\n const theme = useTheme();\n const color = args.color || theme.colors.neutral.c100;\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 <Icon\n key={name}\n name={name}\n weight={args.weight}\n size={args.size}\n color={color}\n />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst IconTemplate = (args: IconProps) => {\n const theme = useTheme();\n const color = args.color || theme.colors.neutral.c100;\n\n return <Icon {...args} color={color} />;\n};\n\nexport const SingleIcon = IconTemplate.bind({});\nexport const List = ListTemplate.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_styled_components", "styled", "React", "Icon"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ module.exports = __toCommonJS(Button_stories_exports);
|
|
|
39
39
|
var import_react = __toESM(require("react"));
|
|
40
40
|
var import_index = __toESM(require("./index"));
|
|
41
41
|
var import_Text = __toESM(require("../../asorted/Text"));
|
|
42
|
-
var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy
|
|
42
|
+
var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
|
|
43
43
|
var import_InvertTheme = require("../../../styles/InvertTheme");
|
|
44
44
|
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
45
45
|
var import_Grid = __toESM(require("../../layout/Grid"));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy
|
|
4
|
+
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n size: {\n options: [undefined, \"small\", \"medium\", \"large\"],\n control: { type: \"radio\" },\n },\n fontSize: {\n options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n control: {\n type: \"radio\",\n },\n },\n children: {\n type: \"text\",\n },\n iconPosition: {\n options: iconPositions,\n control: {\n type: \"radio\",\n },\n },\n disabled: {\n type: \"boolean\",\n },\n outline: {\n type: \"boolean\",\n },\n },\n};\n\nexport const Overview = ((args: ButtonProps) => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.flatMap((buttonType, i) =>\n [false, true].map((outline, j) => (\n <Fragment key={`${i}:${j}`}>\n <Text variant=\"small\" color=\"neutral.c70\">\n variant=\"{buttonType}\"<br />\n outline={`{${outline.toString()}}`}\n </Text>\n {propsArr.map(buttonProps => (\n <Flex flex={1} columnGap={4}>\n {[false, true].map(disabled => (\n <Button\n size={args.size}\n variant={buttonType}\n outline={outline}\n disabled={disabled}\n {...buttonProps}\n />\n ))}\n </Flex>\n ))}\n </Fragment>\n )),\n )}\n </Grid>\n );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = args => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = args => {\n return (\n <Flex flexDirection=\"column\">\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Regular button\"}</Button>\n </Flex>\n <InvertTheme>\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Inverted button\"}</Button>\n </Flex>\n </InvertTheme>\n </Flex>\n );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = args => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n children: \"\",\n Icon: WalletAddMedium,\n iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n const [show, setShow] = React.useState(false);\n return (\n <>\n <Button.Expand {...args} onToggle={setShow}>\n {args.children}\n </Button.Expand>\n {show && (\n <div\n style={{\n padding: \"1rem\",\n }}\n >\n Hello world!\n </div>\n )}\n </>\n );\n};\nExpand.args = {\n children: \"Show all\",\n};\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Button", "React", "Grid", "Text", "Flex"]
|
|
7
7
|
}
|
|
@@ -45,7 +45,10 @@ var Dropdown_stories_default = {
|
|
|
45
45
|
isDisabled: { type: "boolean" },
|
|
46
46
|
error: { type: "string" },
|
|
47
47
|
menuIsOpen: { type: "boolean" },
|
|
48
|
-
label: { type: "string"
|
|
48
|
+
label: { type: "string" }
|
|
49
|
+
},
|
|
50
|
+
args: {
|
|
51
|
+
label: "Label"
|
|
49
52
|
}
|
|
50
53
|
};
|
|
51
54
|
const options = [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Dropdown/Dropdown.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n title: \"Form/SelectAndDialogs/Dropdown\",\n component: DropdownComponent,\n argTypes: {\n value: { table: { disable: true } },\n renderLeft: { table: { disable: true } },\n renderRight: { table: { disable: true } },\n rowHeight: { table: { disable: true } },\n isDisabled: { type: \"boolean\" },\n error: { type: \"string\" },\n menuIsOpen: { type: \"boolean\" },\n label: { type: \"string\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n title: \"Form/SelectAndDialogs/Dropdown\",\n component: DropdownComponent,\n argTypes: {\n value: { table: { disable: true } },\n renderLeft: { table: { disable: true } },\n renderRight: { table: { disable: true } },\n rowHeight: { table: { disable: true } },\n isDisabled: { type: \"boolean\" },\n error: { type: \"string\" },\n menuIsOpen: { type: \"boolean\" },\n label: { type: \"string\" },\n },\n args: {\n label: \"Label\",\n },\n};\n\nconst options = [\n { value: \"chocolate\", label: \"Chocolate\" },\n { value: \"strawberry\", label: \"Strawberry\" },\n { value: \"lemon\", label: \"Lemon\" },\n { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = (typeof options)[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n const [value, setValue] = React.useState<Option | null>(null);\n\n return (\n <DropdownComponent\n options={options}\n value={value}\n onChange={setValue}\n menuPortalTarget={document.body}\n {...args}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,YAAY,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACvC,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACxC,WAAW,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IACtC,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,IACxB,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,OAAO,EAAE,MAAM,SAAS;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,EACT;AACF;AAEA,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,EACzC,EAAE,OAAO,cAAc,OAAO,aAAa;AAAA,EAC3C,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,WAAW,OAAO,UAAU;AACvC;AAGO,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAAC,QAAM,SAAwB,IAAI;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["DropdownComponent", "React"]
|
|
7
7
|
}
|
|
@@ -105,12 +105,20 @@ var DropdownGeneric_stories_default = {
|
|
|
105
105
|
title: "Form/SelectAndDialogs",
|
|
106
106
|
component: import__.default,
|
|
107
107
|
argTypes: {
|
|
108
|
-
label: { type: "string"
|
|
109
|
-
placement: { control: { type: "select"
|
|
110
|
-
closeOnClickOutside: { type: "boolean"
|
|
111
|
-
closeOnClickInside: { type: "boolean"
|
|
112
|
-
disabled: { type: "boolean"
|
|
113
|
-
flipDisabled: { type: "boolean"
|
|
108
|
+
label: { type: "string" },
|
|
109
|
+
placement: { control: { type: "select" } },
|
|
110
|
+
closeOnClickOutside: { type: "boolean" },
|
|
111
|
+
closeOnClickInside: { type: "boolean" },
|
|
112
|
+
disabled: { type: "boolean" },
|
|
113
|
+
flipDisabled: { type: "boolean" }
|
|
114
|
+
},
|
|
115
|
+
args: {
|
|
116
|
+
label: "Label",
|
|
117
|
+
placement: "bottom",
|
|
118
|
+
closeOnClickOutside: true,
|
|
119
|
+
closeOnClickInside: false,
|
|
120
|
+
disabled: false,
|
|
121
|
+
flipDisabled: false
|
|
114
122
|
}
|
|
115
123
|
};
|
|
116
124
|
//# sourceMappingURL=DropdownGeneric.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/DropdownGeneric/DropdownGeneric.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n <Flex\n height={200}\n width={180}\n padding={10}\n backgroundColor=\"neutral.c30\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n I'm a simple div with a grey background and no margin passed as children of the dropdown\n component.\n </Text>\n </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n <Box\n padding={10}\n flexDirection=\"column\"\n width=\"300px\"\n justifyContent=\"center\"\n alignItems=\"center\"\n {...containerProps}\n >\n <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n If the children node of the dropdown is bigger than the available space, the dropdown will\n restrict its own height to avoid overflowing and its inner container will scroll.\n </Text>\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n </Box>\n);\n\nconst BottomPlaceholder = () => (\n <Flex\n width=\"100%\"\n height=\"100px\"\n backgroundColor=\"neutral.c30\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={20}\n >\n <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n component\n </Text>\n </Flex>\n);\n\nconst DropdownStoryTemplate = (\n props: Omit<DropdownGenericProps, \"children\"> & {\n big?: boolean;\n bigWithMaxHeight?: boolean;\n containerProps: Record<string, unknown>;\n },\n) => {\n const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n return (\n <Flex flexDirection=\"column\" {...containerProps}>\n <DropdownGenericComponent {...rest}>\n {big ? (\n bigWithMaxHeight ? (\n <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n ) : (\n <BigChild />\n )\n ) : (\n <SmallChild />\n )}\n </DropdownGenericComponent>\n <BottomPlaceholder />\n </Flex>\n );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n return (\n <Flex flexDirection=\"column\" rowGap={5}>\n {/**\n * Calling DropdownTemplate as a function here to trick storybook into displaying\n * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n * */}\n <Text variant=\"h5\">Small content:</Text>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, containerProps }),\n )}\n <Divider />\n <Text variant=\"h5\">Big content:</Text>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, big: true, containerProps }),\n )}\n <Divider />\n <Text variant=\"h5\">Big content (max height on child)</Text>\n <Alert\n type=\"info\"\n title=\"In the following examples, the component passed as a child has its own internal maxHeight\n setup\"\n ></Alert>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n )}\n </Flex>\n );\n};\n\nexport default {\n title: \"Form/SelectAndDialogs\",\n component: DropdownGenericComponent,\n argTypes: {\n label: { type: \"string\"
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n <Flex\n height={200}\n width={180}\n padding={10}\n backgroundColor=\"neutral.c30\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n I'm a simple div with a grey background and no margin passed as children of the dropdown\n component.\n </Text>\n </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n <Box\n padding={10}\n flexDirection=\"column\"\n width=\"300px\"\n justifyContent=\"center\"\n alignItems=\"center\"\n {...containerProps}\n >\n <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n If the children node of the dropdown is bigger than the available space, the dropdown will\n restrict its own height to avoid overflowing and its inner container will scroll.\n </Text>\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n </Box>\n);\n\nconst BottomPlaceholder = () => (\n <Flex\n width=\"100%\"\n height=\"100px\"\n backgroundColor=\"neutral.c30\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={20}\n >\n <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n component\n </Text>\n </Flex>\n);\n\nconst DropdownStoryTemplate = (\n props: Omit<DropdownGenericProps, \"children\"> & {\n big?: boolean;\n bigWithMaxHeight?: boolean;\n containerProps: Record<string, unknown>;\n },\n) => {\n const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n return (\n <Flex flexDirection=\"column\" {...containerProps}>\n <DropdownGenericComponent {...rest}>\n {big ? (\n bigWithMaxHeight ? (\n <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n ) : (\n <BigChild />\n )\n ) : (\n <SmallChild />\n )}\n </DropdownGenericComponent>\n <BottomPlaceholder />\n </Flex>\n );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n return (\n <Flex flexDirection=\"column\" rowGap={5}>\n {/**\n * Calling DropdownTemplate as a function here to trick storybook into displaying\n * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n * */}\n <Text variant=\"h5\">Small content:</Text>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, containerProps }),\n )}\n <Divider />\n <Text variant=\"h5\">Big content:</Text>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, big: true, containerProps }),\n )}\n <Divider />\n <Text variant=\"h5\">Big content (max height on child)</Text>\n <Alert\n type=\"info\"\n title=\"In the following examples, the component passed as a child has its own internal maxHeight\n setup\"\n ></Alert>\n {containerPropsPossibilities.map(containerProps =>\n DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n )}\n </Flex>\n );\n};\n\nexport default {\n title: \"Form/SelectAndDialogs\",\n component: DropdownGenericComponent,\n argTypes: {\n label: { type: \"string\" },\n placement: { control: { type: \"select\" } },\n closeOnClickOutside: { type: \"boolean\" },\n closeOnClickInside: { type: \"boolean\" },\n disabled: { type: \"boolean\" },\n flipDisabled: { type: \"boolean\" },\n },\n args: {\n label: \"Label\",\n placement: \"bottom\",\n closeOnClickOutside: true,\n closeOnClickInside: false,\n disabled: false,\n flipDisabled: false,\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "Flex", "Text", "Box", "DropdownGenericComponent", "Divider", "Alert"]
|
|
7
7
|
}
|
|
@@ -41,25 +41,32 @@ var Box_stories_default = {
|
|
|
41
41
|
backgroundColor: {
|
|
42
42
|
type: "text",
|
|
43
43
|
control: "color",
|
|
44
|
-
defaultValue: "#0EBDCD",
|
|
45
44
|
description: "This property defines the backgroundColor of the box. This property any color format."
|
|
46
45
|
},
|
|
47
46
|
width: {
|
|
48
47
|
type: "text",
|
|
49
|
-
defaultValue: "200px",
|
|
50
48
|
description: "Width of the box."
|
|
51
49
|
},
|
|
52
50
|
py: {
|
|
53
51
|
type: "text",
|
|
54
|
-
defaultValue: "20px",
|
|
55
52
|
description: "Padding top and bottom."
|
|
56
53
|
},
|
|
54
|
+
px: {
|
|
55
|
+
type: "text",
|
|
56
|
+
description: "Padding left and right."
|
|
57
|
+
},
|
|
57
58
|
mx: {
|
|
58
59
|
type: "text",
|
|
59
|
-
defaultValue: "20px",
|
|
60
60
|
description: "Margin left and right."
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
|
+
args: {
|
|
64
|
+
backgroundColor: "#0EBDCD",
|
|
65
|
+
width: "200px",
|
|
66
|
+
py: "20px",
|
|
67
|
+
px: "20px",
|
|
68
|
+
mx: "20px"
|
|
69
|
+
},
|
|
63
70
|
parameters: {
|
|
64
71
|
docs: {
|
|
65
72
|
description: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Box/Box.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport Box, { BoxProps } from \".\";\nexport default {\n title: \"Layout/Box\",\n component: Box,\n argTypes: {\n backgroundColor: {\n type: \"text\",\n control: \"color\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport Box, { BoxProps } from \".\";\nexport default {\n title: \"Layout/Box\",\n component: Box,\n argTypes: {\n backgroundColor: {\n type: \"text\",\n control: \"color\",\n description:\n \"This property defines the backgroundColor of the box. This property any color format.\",\n },\n width: {\n type: \"text\",\n description: \"Width of the box.\",\n },\n py: {\n type: \"text\",\n description: \"Padding top and bottom.\",\n },\n px: {\n type: \"text\",\n description: \"Padding left and right.\",\n },\n mx: {\n type: \"text\",\n description: \"Margin left and right.\",\n },\n },\n args: {\n backgroundColor: \"#0EBDCD\",\n width: \"200px\",\n py: \"20px\",\n px: \"20px\",\n mx: \"20px\",\n },\n parameters: {\n docs: {\n description: {\n component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.\n \nIt include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.\n \n[See more about styled-system utilities](https://styled-system.com/api)`,\n },\n },\n actions: { argTypesRegex: false },\n },\n};\n\nconst Template = (args: BoxProps) => (\n <Box {...args}>\n A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline\n props\n </Box>\n);\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA8B;AAC9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,IACF;AAAA,IACA,SAAS,EAAE,eAAe,MAAM;AAAA,EAClC;AACF;AAEA,MAAM,WAAW,CAAC,SAChB,6BAAAC,QAAA,cAAC,SAAAD,SAAA,EAAK,GAAG,QAAM,sGAGf;AAGK,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
|
|
6
6
|
"names": ["Box", "React"]
|
|
7
7
|
}
|