@ledgerhq/react-ui 0.21.2 → 0.22.0-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/Icons.stories.js.map +2 -2
- package/lib/cjs/components/cta/Toggle/Toggle.stories.js +2 -2
- package/lib/cjs/components/cta/Toggle/Toggle.stories.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js.map +2 -2
- package/lib/cjs/components/form/Radio/Radio.stories.js +4 -4
- package/lib/cjs/components/form/Radio/Radio.stories.js.map +2 -2
- package/lib/cjs/components/form/Switch/Switch.stories.js +2 -2
- package/lib/cjs/components/form/Switch/Switch.stories.js.map +2 -2
- package/lib/cjs/components/layout/Drawer/Drawer.stories.js +2 -2
- package/lib/cjs/components/layout/Drawer/Drawer.stories.js.map +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js.map +2 -2
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js +3 -3
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js +2 -2
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Input/Input.js +69 -0
- package/lib/cjs/pre-ldls/components/Input/Input.js.map +7 -0
- package/lib/cjs/pre-ldls/components/Input/Input.stories.js +66 -0
- package/lib/cjs/pre-ldls/components/Input/Input.stories.js.map +7 -0
- package/lib/cjs/pre-ldls/components/index.js +19 -0
- package/lib/cjs/pre-ldls/components/index.js.map +7 -0
- package/lib/cjs/pre-ldls/index.js +19 -0
- package/lib/cjs/pre-ldls/index.js.map +7 -0
- package/lib/cjs/pre-ldls/libs/design-tokens.js +988 -0
- package/lib/cjs/pre-ldls/libs/design-tokens.js.map +7 -0
- package/lib/cjs/pre-ldls/libs/index.js +58 -0
- package/lib/cjs/pre-ldls/libs/index.js.map +7 -0
- package/lib/cjs/pre-ldls/types.js +17 -0
- package/lib/cjs/pre-ldls/types.js.map +7 -0
- package/lib/pre-ldls/components/Input/Input.d.ts +5 -0
- package/lib/pre-ldls/components/Input/Input.d.ts.map +1 -0
- package/lib/pre-ldls/components/Input/Input.js +30 -0
- package/lib/pre-ldls/components/Input/Input.js.map +1 -0
- package/lib/pre-ldls/components/index.d.ts +2 -0
- package/lib/pre-ldls/components/index.d.ts.map +1 -0
- package/lib/pre-ldls/components/index.js +2 -0
- package/lib/pre-ldls/components/index.js.map +1 -0
- package/lib/pre-ldls/index.d.ts +2 -0
- package/lib/pre-ldls/index.d.ts.map +1 -0
- package/lib/pre-ldls/index.js +2 -0
- package/lib/pre-ldls/index.js.map +1 -0
- package/lib/pre-ldls/libs/design-tokens.d.ts +776 -0
- package/lib/pre-ldls/libs/design-tokens.d.ts.map +1 -0
- package/lib/pre-ldls/libs/design-tokens.js +962 -0
- package/lib/pre-ldls/libs/design-tokens.js.map +1 -0
- package/lib/pre-ldls/libs/index.d.ts +10 -0
- package/lib/pre-ldls/libs/index.d.ts.map +1 -0
- package/lib/pre-ldls/libs/index.js +26 -0
- package/lib/pre-ldls/libs/index.js.map +1 -0
- package/lib/pre-ldls/types.d.ts +4 -0
- package/lib/pre-ldls/types.d.ts.map +1 -0
- package/lib/pre-ldls/types.js +2 -0
- package/lib/pre-ldls/types.js.map +1 -0
- package/package.json +26 -13
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n component: null, // Since we're rendering multiple icons, we don't have a single component to import\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n control: {\n type: \"select\",\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AACb;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACnC,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
|
|
6
6
|
"names": ["import_styled_components", "styled", "React"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(Toggle_stories_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(Toggle_stories_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
37
37
|
var import_index = __toESM(require("./index"));
|
|
38
38
|
var Toggle_stories_default = {
|
|
39
39
|
title: "cta/Toggle",
|
|
@@ -49,7 +49,7 @@ var Toggle_stories_default = {
|
|
|
49
49
|
parameters: { controls: { exclude: /^(?!.*(checked))/ } }
|
|
50
50
|
};
|
|
51
51
|
const Template = (args) => {
|
|
52
|
-
const [currentArgs, updateArgs] = (0,
|
|
52
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
53
53
|
const handleClick = () => updateArgs({ checked: !currentArgs.checked });
|
|
54
54
|
return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onClick: handleClick }, args.children);
|
|
55
55
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Toggle/Toggle.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Toggle from \"./index\";\nimport type { ToggleProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n title: \"cta/Toggle\",\n component: Toggle,\n argTypes: {\n checked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n },\n parameters: { controls: { exclude: /^(?!.*(checked))/ } },\n};\n\nconst Template = (args: ToggleProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleClick = () => updateArgs({ checked: !currentArgs.checked });\n\n return (\n <Toggle {...args} onClick={handleClick}>\n {args.children}\n </Toggle>\n );\n};\n\nexport const Default: StoryTemplate<ToggleProps> = Template.bind({});\nDefault.args = {\n children: \"Max\",\n checked: true,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,EACF;AAAA,EACA,YAAY,EAAE,UAAU,EAAE,SAAS,mBAAmB,EAAE;AAC1D;AAEA,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,cAAc,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY,QAAQ,CAAC;AAEtE,SACE,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAQ,GAAG,MAAM,SAAS,eACxB,KAAK,QACR;AAEJ;AAEO,MAAM,UAAsC,SAAS,KAAK,CAAC,CAAC;AACnE,QAAQ,OAAO;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AACX;",
|
|
6
6
|
"names": ["Toggle", "React"]
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ __export(Checkbox_stories_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(Checkbox_stories_exports);
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
|
-
var
|
|
38
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
39
39
|
var import_index = __toESM(require("./index"));
|
|
40
40
|
var Checkbox_stories_default = {
|
|
41
41
|
title: "Form/SelectionControls/Checkbox",
|
|
@@ -69,7 +69,7 @@ var Checkbox_stories_default = {
|
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
71
|
const Template = (args) => {
|
|
72
|
-
const [currentArgs, updateArgs] = (0,
|
|
72
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
73
73
|
const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });
|
|
74
74
|
return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onChange: handleChange });
|
|
75
75
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Checkbox\",\n component: Checkbox,\n argTypes: {\n isDisabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n isChecked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n variant: {\n type: \"text\",\n description: \"default | success | error\",\n required: false,\n control: false,\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n name: { control: false },\n },\n};\n\nconst Template = (args: CheckboxProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"default\",\n name: \"default checkbox\",\n};\n\nSuccess.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"success\",\n name: \"success checkbox\",\n};\n\nError.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"error\",\n name: \"error checkbox\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,EACzB;AACF;AAEA,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY,UAAU,CAAC;AAE3E,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,UAAU,cAAc;AACrD;AAEO,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAMD,SAAsC,SAAS,KAAK,CAAC,CAAC;AAEnE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEA,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEAA,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;",
|
|
6
6
|
"names": ["Error", "Checkbox", "React"]
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ __export(Radio_stories_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(Radio_stories_exports);
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
|
-
var
|
|
38
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
39
39
|
var import_index = __toESM(require("./index"));
|
|
40
40
|
var Radio_stories_default = {
|
|
41
41
|
title: "Form/Radio",
|
|
@@ -58,7 +58,7 @@ var Radio_stories_default = {
|
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
const TemplateElement = (args) => {
|
|
61
|
-
const [currentArgs, updateArgs] = (0,
|
|
61
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
62
62
|
const handleChange = (value) => {
|
|
63
63
|
updateArgs({ currentValue: value });
|
|
64
64
|
currentArgs.onChange(value);
|
|
@@ -79,7 +79,7 @@ const TemplateElement = (args) => {
|
|
|
79
79
|
);
|
|
80
80
|
};
|
|
81
81
|
const TemplateOutlinedElement = (args) => {
|
|
82
|
-
const [currentArgs, updateArgs] = (0,
|
|
82
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
83
83
|
const handleChange = (value) => {
|
|
84
84
|
updateArgs({ currentValue: value });
|
|
85
85
|
currentArgs.onChange(value);
|
|
@@ -101,7 +101,7 @@ const RadioGroup = TemplateElement.bind({
|
|
|
101
101
|
});
|
|
102
102
|
const RadioGroupOutlined = TemplateOutlinedElement.bind({});
|
|
103
103
|
const TemplateListElement = (args) => {
|
|
104
|
-
const [currentArgs, updateArgs] = (0,
|
|
104
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
105
105
|
const handleChange = (value) => {
|
|
106
106
|
updateArgs({ currentValue: value });
|
|
107
107
|
currentArgs.onChange(value);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/Radio.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Radio from \"./index\";\nimport type { RadioProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n title: \"Form/Radio\",\n argTypes: {\n currentValue: {\n type: \"text\",\n description:\n \"This is the current value. A RadioItem will be checked if its value matches this value.\",\n control: false,\n },\n name: {\n type: \"text\",\n description: \"The name property is used to link all RadioItems\",\n control: false,\n },\n onChange: {\n control: false,\n description: \"The callback receives the value of the pressed RadioItem as parameter\",\n action: \"clicked\",\n },\n },\n};\n\nconst TemplateElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n >\n <Radio.Element label=\"Blue squad\" value=\"blue\" variant=\"default\" />\n <Radio.Element label=\"Black squad\" value=\"black\" variant=\"main\" />\n <Radio.Element label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n <Radio.Element label=\"Core squad\" value=\"core\" variant=\"error\" />\n <Radio.Element label=\"Orange squad\" value=\"orange\" variant=\"default\" disabled />\n <Radio.Element label=\"Purple squad\" value=\"purple\" variant=\"default\" disabled />\n </Radio>\n );\n};\n\nconst TemplateOutlinedElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"20px\" }}\n >\n <Radio.Element outlined label=\"Black squad\" value=\"black\" variant=\"main\" />\n <Radio.Element outlined label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n <Radio.Element outlined label=\"Core squad\" value=\"core\" variant=\"error\" />\n </Radio>\n );\n};\n\nexport const RadioGroup: StoryTemplate<RadioProps> = TemplateElement.bind({\n currentValue: \"purple\",\n});\n\nexport const RadioGroupOutlined: StoryTemplate<RadioProps> = TemplateOutlinedElement.bind({});\n\nconst TemplateListElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n >\n <Radio.ListElement\n label=\"Ledger Verse\"\n value=\"ledgerVerse\"\n disabled\n containerProps={{ flex: 1 }}\n />\n <Radio.ListElement label=\"Live Monad\" value=\"liveMonad\" containerProps={{ flex: 1 }} />\n <Radio.ListElement label=\"Live Hub\" value=\"liveHub\" containerProps={{ flex: 1 }} />\n <Radio.ListElement label=\"Live Meta\" value=\"liveMeta\" containerProps={{ flex: 1 }} />\n </Radio>\n );\n};\n\nexport const RadioGroupList: StoryTemplate<RadioProps> = TemplateListElement.bind({});\n\n// Set the disabled item to be checked on mount\nRadioGroup.args = { currentValue: \"purple\" };\nRadioGroupList.args = { currentValue: \"liveHub\" };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "Radio"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ __export(Switch_stories_exports, {
|
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(Switch_stories_exports);
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
-
var
|
|
37
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
38
38
|
var import_index = __toESM(require("./index"));
|
|
39
39
|
var Switch_stories_default = {
|
|
40
40
|
title: "Form/SelectionControls/Switch",
|
|
@@ -73,7 +73,7 @@ var Switch_stories_default = {
|
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
75
|
const Template = (args) => {
|
|
76
|
-
const [currentArgs, updateArgs] = (0,
|
|
76
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
77
77
|
const handleChange = () => updateArgs({ checked: !currentArgs.checked });
|
|
78
78
|
return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onChange: handleChange });
|
|
79
79
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Switch/Switch.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Switch from \"./index\";\nimport type { SwitchProps } from \"./Switch\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Switch\",\n component: Switch,\n argTypes: {\n name: { control: false },\n onChange: { control: false },\n checked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n disabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n reversed: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n size: {\n options: [\"normal\", \"small\"],\n control: { type: \"select\" },\n },\n },\n};\n\nconst Template = (args: SwitchProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ checked: !currentArgs.checked });\n\n return <Switch {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<SwitchProps> = Template.bind({});\nexport const Reversed: StoryTemplate<SwitchProps> = Template.bind({});\n\nDefault.args = {\n checked: false,\n label: \"Switch with label\",\n name: \"default Switch\",\n size: \"normal\",\n};\n\nReversed.args = {\n checked: false,\n label: \"Reversed Switch with label\",\n name: \"success Switch\",\n reversed: true,\n size: \"normal\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,MAAM;AAAA,IACvB,UAAU,EAAE,SAAS,MAAM;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,OAAO;AAAA,MAC3B,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY,QAAQ,CAAC;AAEvE,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAQ,GAAG,MAAM,UAAU,cAAc;AACnD;AAEO,MAAM,UAAsC,SAAS,KAAK,CAAC,CAAC;AAC5D,MAAM,WAAuC,SAAS,KAAK,CAAC,CAAC;AAEpE,QAAQ,OAAO;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,OAAO;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AACR;",
|
|
6
6
|
"names": ["Switch", "React"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(Drawer_stories_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(Drawer_stories_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
37
37
|
var import_Button = __toESM(require("../../cta/Button"));
|
|
38
38
|
var import_index = __toESM(require("./index"));
|
|
39
39
|
var import__ = require("../index");
|
|
@@ -86,7 +86,7 @@ var Drawer_stories_default = {
|
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
const Template = ({ title, big, ignoreBackdropClick, backgroundColor, direction }) => {
|
|
89
|
-
const [{ isOpen }, updateArgs] = (0,
|
|
89
|
+
const [{ isOpen }, updateArgs] = (0, import_manager_api.useArgs)();
|
|
90
90
|
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: () => updateArgs({ isOpen: true }), style: { flex: 1 } }, "Open"), /* @__PURE__ */ import_react.default.createElement(
|
|
91
91
|
import_index.default,
|
|
92
92
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Drawer/Drawer.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Button from \"../../cta/Button\";\nimport Drawer, { DrawerProps } from \"./index\";\nimport { Flex } from \"../index\";\n\nexport default {\n title: \"Layout/Drawer\",\n component: Drawer,\n argTypes: {\n isOpen: {\n type: \"boolean\",\n value: true,\n description: \"Is open\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n title: {\n type: \"text\",\n description: \"Side default title\",\n defaultValue: \"Default title\",\n control: {\n type: \"text\",\n },\n required: false,\n },\n backgroundColor: {\n control: {\n type: \"color\",\n presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n },\n },\n big: {\n type: \"boolean\",\n value: true,\n description: \"Larger width side drawer.\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n ignoreBackdropClick: {\n type: \"boolean\",\n value: true,\n description: \"Prevent drawer from calling onClose when clicking on the backdrop.\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n },\n};\n\nconst Template = ({ title, big, ignoreBackdropClick, backgroundColor, direction }: DrawerProps) => {\n const [{ isOpen }, updateArgs] = useArgs();\n\n return (\n <div>\n <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: true })} style={{ flex: 1 }}>\n Open\n </Button>\n <Drawer\n isOpen={isOpen}\n onClose={() => updateArgs({ isOpen: false })}\n title={title}\n big={big}\n footer={\n <Flex flex={1} justifyContent=\"flex-end\">\n <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: false })}>\n Close\n </Button>\n </Flex>\n }\n ignoreBackdropClick={ignoreBackdropClick}\n backgroundColor={backgroundColor}\n direction={direction}\n >\n <Flex flexDirection={\"column\"}>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n cursus sit amet a mauris.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n cursus sit amet a mauris.\n </p>\n\n <Flex>\n <Button\n variant={\"main\"}\n onClick={() => updateArgs({ isOpen: false })}\n style={{ flex: 1 }}\n >\n {\"Fermer\"}\n </Button>\n </Flex>\n </Flex>\n </Drawer>\n </div>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAAwB;AAExB,oBAAmB;AACnB,mBAAoC;AACpC,eAAqB;AAErB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ,QAAQ;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,EAAE,OAAO,KAAK,qBAAqB,iBAAiB,UAAU,MAAmB;AACjG,QAAM,CAAC,EAAE,OAAO,GAAG,UAAU,QAAI,4BAAQ;AAEzC,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,KAAK,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,KAAG,MAE1F,GACA,6BAAAD,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,QACE,6BAAAC,QAAA,cAAC,iBAAK,MAAM,GAAG,gBAAe,cAC5B,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC,KAAG,OAEvE,CACF;AAAA,MAEF;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,6BAAAD,QAAA,cAAC,iBAAK,eAAe,YACnB,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GACA,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GAEA,6BAAAA,QAAA,cAAC,qBACC,6BAAAA,QAAA;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,QAC3C,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA,MAEhB;AAAA,IACH,CACF,CACF;AAAA,EACF,CACF;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
|
|
6
6
|
"names": ["Drawer", "React", "Button"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(Popin_stories_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(Popin_stories_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
37
37
|
var import_addon_actions = require("@storybook/addon-actions");
|
|
38
38
|
var import_index = __toESM(require("./index"));
|
|
39
39
|
var import_Text = __toESM(require("../../asorted/Text"));
|
|
@@ -191,7 +191,7 @@ var Popin_stories_default = {
|
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
193
|
const Template = (args) => {
|
|
194
|
-
const [, updateArgs] = (0,
|
|
194
|
+
const [, updateArgs] = (0, import_manager_api.useArgs)();
|
|
195
195
|
const onClose = () => updateArgs({ isOpen: false });
|
|
196
196
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "shade", onClick: () => updateArgs({ isOpen: true }) }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(
|
|
197
197
|
import_index.default.Header,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/Popin.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n <Popin.Footer>\n <Button type=\"main\" onClick={onClick}>\n Next\n </Button>\n </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n title: \"Layout/Popin\",\n component: Popin,\n parameters: {\n docs: {\n description: { component: description },\n source: { code, type: \"code\" },\n },\n },\n argTypes: {\n /** PROPS **/\n width: {\n type: \"number\",\n description: \"Optional popin's width\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.width,\n max: theme.sizes.drawer.popin.max.width,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.width,\n },\n },\n },\n height: {\n type: \"number\",\n description: \"Optional popin's height\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.height,\n max: theme.sizes.drawer.popin.max.height,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.height,\n },\n },\n },\n isOpen: {\n type: \"boolean\",\n description: \"Controls if the popin is mounted or not.\",\n required: true,\n control: { type: \"boolean\" },\n },\n onClose: {\n description:\n \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n control: false,\n },\n\n /** playground **/\n hasHeader: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the header should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n hasFooter: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the footer should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isCloseDisplayed: {\n type: \"boolean\",\n description: \"Controls if the close button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isBackDisplayed: {\n type: \"boolean\",\n description: \"Controls if the back button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n \"Header.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n \"Body.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n },\n args: {\n width: theme.sizes.drawer.popin.max.width,\n height: theme.sizes.drawer.popin.max.height,\n isOpen: true,\n hasHeader: true,\n hasFooter: true,\n isCloseDisplayed: true,\n isBackDisplayed: true,\n \"Body.Children.Text\": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n \"Header.Children.Text\": \"This is a fake title\",\n },\n};\n\ntype playgroundProps = {\n \"Header.Children.Text\": string;\n \"Body.Children.Text\": string;\n hasHeader: boolean;\n hasFooter: boolean;\n isCloseDisplayed: boolean;\n isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n const [, updateArgs] = useArgs();\n\n /* Allow interactive controls from the story. Thanks to this, triggering onClose\n ** function from the component itself (by clicking on the cross icon e.g.)\n ** will update the value of the isOpen props.\n */\n const onClose = () => updateArgs({ isOpen: false });\n\n return (\n <>\n <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n Open the modal\n </Button>\n <Popin {...args}>\n {args.hasHeader ? (\n <Popin.Header\n onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n onClose={args.isCloseDisplayed ? onClose : undefined}\n >\n <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n </Popin.Header>\n ) : null}\n <Popin.Body>\n <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n </Popin.Body>\n {args.hasFooter ? (\n <Popin.Footer flexDirection=\"row-reverse\">\n <Button variant=\"main\" onClick={action(\"next\")}>\n Next\n </Button>\n </Popin.Footer>\n ) : null}\n </Popin>\n </>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n <Popin.Footer>\n <Button type=\"main\" onClick={onClick}>\n Next\n </Button>\n </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n title: \"Layout/Popin\",\n component: Popin,\n parameters: {\n docs: {\n description: { component: description },\n source: { code, type: \"code\" },\n },\n },\n argTypes: {\n /** PROPS **/\n width: {\n type: \"number\",\n description: \"Optional popin's width\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.width,\n max: theme.sizes.drawer.popin.max.width,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.width,\n },\n },\n },\n height: {\n type: \"number\",\n description: \"Optional popin's height\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.height,\n max: theme.sizes.drawer.popin.max.height,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.height,\n },\n },\n },\n isOpen: {\n type: \"boolean\",\n description: \"Controls if the popin is mounted or not.\",\n required: true,\n control: { type: \"boolean\" },\n },\n onClose: {\n description:\n \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n control: false,\n },\n\n /** playground **/\n hasHeader: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the header should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n hasFooter: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the footer should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isCloseDisplayed: {\n type: \"boolean\",\n description: \"Controls if the close button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isBackDisplayed: {\n type: \"boolean\",\n description: \"Controls if the back button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n \"Header.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n \"Body.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n },\n args: {\n width: theme.sizes.drawer.popin.max.width,\n height: theme.sizes.drawer.popin.max.height,\n isOpen: true,\n hasHeader: true,\n hasFooter: true,\n isCloseDisplayed: true,\n isBackDisplayed: true,\n \"Body.Children.Text\": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n \"Header.Children.Text\": \"This is a fake title\",\n },\n};\n\ntype playgroundProps = {\n \"Header.Children.Text\": string;\n \"Body.Children.Text\": string;\n hasHeader: boolean;\n hasFooter: boolean;\n isCloseDisplayed: boolean;\n isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n const [, updateArgs] = useArgs();\n\n /* Allow interactive controls from the story. Thanks to this, triggering onClose\n ** function from the component itself (by clicking on the cross icon e.g.)\n ** will update the value of the isOpen props.\n */\n const onClose = () => updateArgs({ isOpen: false });\n\n return (\n <>\n <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n Open the modal\n </Button>\n <Popin {...args}>\n {args.hasHeader ? (\n <Popin.Header\n onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n onClose={args.isCloseDisplayed ? onClose : undefined}\n >\n <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n </Popin.Header>\n ) : null}\n <Popin.Body>\n <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n </Popin.Body>\n {args.hasFooter ? (\n <Popin.Footer flexDirection=\"row-reverse\">\n <Button variant=\"main\" onClick={action(\"next\")}>\n Next\n </Button>\n </Popin.Footer>\n ) : null}\n </Popin>\n </>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Popin", "theme", "React", "Button", "Text"]
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ module.exports = __toCommonJS(FlowStepper_stories_exports);
|
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_react_transition_group = require("react-transition-group");
|
|
39
39
|
var import_styled_components = __toESM(require("styled-components"));
|
|
40
|
-
var
|
|
40
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
41
41
|
var import__ = require("../../..");
|
|
42
42
|
var import_helpers = require("../../helpers");
|
|
43
43
|
var import_react2 = require("react");
|
|
@@ -178,7 +178,7 @@ var FlowStepper_stories_default = {
|
|
|
178
178
|
const NB_OF_STEPS = 5;
|
|
179
179
|
const Minimal = (args) => {
|
|
180
180
|
const { activeIndex, ...rest } = args;
|
|
181
|
-
const [, updateArgs] = (0,
|
|
181
|
+
const [, updateArgs] = (0, import_manager_api.useArgs)();
|
|
182
182
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
183
183
|
import__.FlowStepper,
|
|
184
184
|
{
|
|
@@ -251,7 +251,7 @@ const Item = ({ label }) => /* @__PURE__ */ import_react.default.createElement(A
|
|
|
251
251
|
const steps = ["Primary", "Neutral", "Success", "Warning", "Error"];
|
|
252
252
|
const StepFooter = ({ label }) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "row", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { whiteSpace: "pre" }, "Footer for step "), /* @__PURE__ */ import_react.default.createElement(import__.Tag, { size: "medium", type: "plain", active: true }, label));
|
|
253
253
|
const Demo = (args) => {
|
|
254
|
-
const [, updateArgs] = (0,
|
|
254
|
+
const [, updateArgs] = (0, import_manager_api.useArgs)();
|
|
255
255
|
return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { height: "90vh" }, /* @__PURE__ */ import_react.default.createElement(
|
|
256
256
|
import__.FlowStepper,
|
|
257
257
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, IconsLegacy, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n activeIndex={1}\n renderStepFooter={ // Optional\n ({activeIndex, stepsLength, children}) => (\n <YourFooterWrapper>\n {children}\n </YourFooterWrapper>\n )\n }\n>\n <YourStepA label=\"StepA\" />\n <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n <YourStepC label=\"StepC\" />\n <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider variant=\"light\" />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => setActiveIndex(i => i - 1)}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => setActiveIndex(i => i + 1)}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n>\n {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n </FlowStepper.Step>\n ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n title: \"Navigation/FlowStepper\",\n component: FlowStepper,\n argTypes: {\n activeIndex: { control: \"number\" },\n extraProps: { control: \"disabled\" },\n extraContainerProps: { control: \"disabled\" },\n extraStepperProps: { control: \"disabled\" },\n extraStepperContainerProps: { control: \"disabled\" },\n children: { control: \"disabled\" },\n renderChildren: { control: \"disabled\" },\n header: { control: \"disabled\" },\n stepHeaders: { control: \"disabled\" },\n renderStepHeader: { control: \"disabled\" },\n footer: { control: \"disabled\" },\n stepFooters: { control: \"disabled\" },\n renderStepFooter: { control: \"disabled\" },\n },\n args: {\n activeIndex: 0,\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const { activeIndex, ...rest } = args;\n const [, updateArgs] = useArgs();\n\n return (\n <FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n {...rest}\n >\n {[\n ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n Navigate to the hidden step.\n </Button>\n </FlowStepper.Step>\n )),\n <FlowStepper.Step label=\"Hidden Step\" hidden>\n <Text key=\"hidden\" variant=\"body\">\n I am hidden.\n </Text>\n </FlowStepper.Step>,\n ]}\n </FlowStepper>\n );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n return (\n <Box position=\"relative\" my={6}>\n {onBack && (\n <Box position=\"absolute\">\n <Link onClick={onBack} Icon={IconsLegacy.ArrowLeftMedium} iconPosition=\"left\">\n Back\n </Link>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n </Flex>\n </Box>\n );\n};\n\nconst Footer = ({\n onContinue,\n children,\n}: {\n onContinue?: () => void;\n children?: React.ReactNode;\n}) => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n {children || <Flex />}\n {onContinue && (\n <Button variant=\"main\" onClick={onContinue}>\n Continue\n </Button>\n )}\n </Flex>\n </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n transition: opacity 500ms;\n width: 100%;\n height: 100%;\n &.step-enter {\n opacity: 0;\n }\n &.step-enter-active {\n opacity: 1;\n }\n &.step-exit {\n opacity: 1;\n }\n &.step-exit-active {\n opacity: 0;\n }\n`;\nconst Item = ({ label }: { label: string }) => (\n <AnimatedItem>\n <Flex\n position=\"absolute\"\n left=\"0\"\n right=\"0\"\n top=\"0\"\n bottom=\"0\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n <Text variant=\"h2\" textTransform=\"capitalize\">\n {label}\n </Text>\n </Flex>\n </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n <Flex flexDirection=\"row\" alignItems=\"center\">\n <Text whiteSpace=\"pre\">Footer for step </Text>\n <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n {label}\n </Tag>\n </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [, updateArgs] = useArgs();\n\n return (\n <Flex height=\"90vh\">\n <FlowStepper\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n updateArgs({ activeIndex: activeIndex - 1 });\n }\n : undefined\n }\n />\n )}\n renderStepFooter={({ stepsLength, activeIndex, children }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n updateArgs({ activeIndex: activeIndex + 1 });\n }\n : undefined\n }\n >\n {children}\n </Footer>\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n renderChildren={({ children }) => (\n <TransitionGroup component={null}>{children}</TransitionGroup>\n )}\n {...args}\n >\n {steps.map(label => (\n <CSSTransition\n key={label}\n label={label}\n footer={<StepFooter label={label} />}\n timeout={500}\n classNames=\"step\"\n mountOnEnter\n unmountOnExit\n >\n <Item label={label} />\n </CSSTransition>\n ))}\n </FlowStepper>\n </Flex>\n );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n const { label, setActiveStep } = props;\n const content = useMemo(() => {\n return steps.map(step => {\n return (\n <Button\n key={step}\n disabled={step === label}\n variant=\"main\"\n onClick={() => setActiveStep(step)}\n >\n Go to \"{step}\"\n </Button>\n );\n });\n }, [setActiveStep, label]);\n return (\n <Flex\n flex={1}\n flexDirection=\"column\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={4}\n rowGap={4}\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n {content}\n </Flex>\n );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [activeStep, setActiveStep] = useState(steps[0]);\n return (\n <Flex height=\"90vh\">\n <FlowStepper.Indexed\n activeKey={activeStep}\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n setActiveStep(steps[activeIndex - 1]);\n }\n : undefined\n }\n />\n )}\n footer={({ stepsLength, activeIndex }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n setActiveStep(steps[activeIndex + 1]);\n }\n : undefined\n }\n />\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n {...args}\n >\n {steps.map(label => (\n <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n </FlowStepper.Indexed.Step>\n ))}\n </FlowStepper.Indexed>\n </Flex>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,oCAA+C;AAC/C,+BAAmB;AAEnB,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, IconsLegacy, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n activeIndex={1}\n renderStepFooter={ // Optional\n ({activeIndex, stepsLength, children}) => (\n <YourFooterWrapper>\n {children}\n </YourFooterWrapper>\n )\n }\n>\n <YourStepA label=\"StepA\" />\n <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n <YourStepC label=\"StepC\" />\n <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider variant=\"light\" />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => setActiveIndex(i => i - 1)}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => setActiveIndex(i => i + 1)}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n>\n {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n </FlowStepper.Step>\n ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n title: \"Navigation/FlowStepper\",\n component: FlowStepper,\n argTypes: {\n activeIndex: { control: \"number\" },\n extraProps: { control: \"disabled\" },\n extraContainerProps: { control: \"disabled\" },\n extraStepperProps: { control: \"disabled\" },\n extraStepperContainerProps: { control: \"disabled\" },\n children: { control: \"disabled\" },\n renderChildren: { control: \"disabled\" },\n header: { control: \"disabled\" },\n stepHeaders: { control: \"disabled\" },\n renderStepHeader: { control: \"disabled\" },\n footer: { control: \"disabled\" },\n stepFooters: { control: \"disabled\" },\n renderStepFooter: { control: \"disabled\" },\n },\n args: {\n activeIndex: 0,\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const { activeIndex, ...rest } = args;\n const [, updateArgs] = useArgs();\n\n return (\n <FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n {...rest}\n >\n {[\n ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n Navigate to the hidden step.\n </Button>\n </FlowStepper.Step>\n )),\n <FlowStepper.Step label=\"Hidden Step\" hidden>\n <Text key=\"hidden\" variant=\"body\">\n I am hidden.\n </Text>\n </FlowStepper.Step>,\n ]}\n </FlowStepper>\n );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n return (\n <Box position=\"relative\" my={6}>\n {onBack && (\n <Box position=\"absolute\">\n <Link onClick={onBack} Icon={IconsLegacy.ArrowLeftMedium} iconPosition=\"left\">\n Back\n </Link>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n </Flex>\n </Box>\n );\n};\n\nconst Footer = ({\n onContinue,\n children,\n}: {\n onContinue?: () => void;\n children?: React.ReactNode;\n}) => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n {children || <Flex />}\n {onContinue && (\n <Button variant=\"main\" onClick={onContinue}>\n Continue\n </Button>\n )}\n </Flex>\n </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n transition: opacity 500ms;\n width: 100%;\n height: 100%;\n &.step-enter {\n opacity: 0;\n }\n &.step-enter-active {\n opacity: 1;\n }\n &.step-exit {\n opacity: 1;\n }\n &.step-exit-active {\n opacity: 0;\n }\n`;\nconst Item = ({ label }: { label: string }) => (\n <AnimatedItem>\n <Flex\n position=\"absolute\"\n left=\"0\"\n right=\"0\"\n top=\"0\"\n bottom=\"0\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n <Text variant=\"h2\" textTransform=\"capitalize\">\n {label}\n </Text>\n </Flex>\n </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n <Flex flexDirection=\"row\" alignItems=\"center\">\n <Text whiteSpace=\"pre\">Footer for step </Text>\n <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n {label}\n </Tag>\n </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [, updateArgs] = useArgs();\n\n return (\n <Flex height=\"90vh\">\n <FlowStepper\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n updateArgs({ activeIndex: activeIndex - 1 });\n }\n : undefined\n }\n />\n )}\n renderStepFooter={({ stepsLength, activeIndex, children }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n updateArgs({ activeIndex: activeIndex + 1 });\n }\n : undefined\n }\n >\n {children}\n </Footer>\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n renderChildren={({ children }) => (\n <TransitionGroup component={null}>{children}</TransitionGroup>\n )}\n {...args}\n >\n {steps.map(label => (\n <CSSTransition\n key={label}\n label={label}\n footer={<StepFooter label={label} />}\n timeout={500}\n classNames=\"step\"\n mountOnEnter\n unmountOnExit\n >\n <Item label={label} />\n </CSSTransition>\n ))}\n </FlowStepper>\n </Flex>\n );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n const { label, setActiveStep } = props;\n const content = useMemo(() => {\n return steps.map(step => {\n return (\n <Button\n key={step}\n disabled={step === label}\n variant=\"main\"\n onClick={() => setActiveStep(step)}\n >\n Go to \"{step}\"\n </Button>\n );\n });\n }, [setActiveStep, label]);\n return (\n <Flex\n flex={1}\n flexDirection=\"column\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={4}\n rowGap={4}\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n {content}\n </Flex>\n );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [activeStep, setActiveStep] = useState(steps[0]);\n return (\n <Flex height=\"90vh\">\n <FlowStepper.Indexed\n activeKey={activeStep}\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n setActiveStep(steps[activeIndex - 1]);\n }\n : undefined\n }\n />\n )}\n footer={({ stepsLength, activeIndex }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n setActiveStep(steps[activeIndex + 1]);\n }\n : undefined\n }\n />\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n {...args}\n >\n {steps.map(label => (\n <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n </FlowStepper.Indexed.Step>\n ))}\n </FlowStepper.Indexed>\n </Flex>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React", "styled"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(SideBar_stories_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(SideBar_stories_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_manager_api = require("@storybook/manager-api");
|
|
37
37
|
var import_SideBar = __toESM(require("./SideBar"));
|
|
38
38
|
var import_addon_actions = require("@storybook/addon-actions");
|
|
39
39
|
var import_PortfolioMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/PortfolioMedium"));
|
|
@@ -60,7 +60,7 @@ var SideBar_stories_default = {
|
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
const Template = (args) => {
|
|
63
|
-
const [currentArgs, updateArgs] = (0,
|
|
63
|
+
const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
|
|
64
64
|
const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });
|
|
65
65
|
const sidebarIconSize = 20;
|
|
66
66
|
return /* @__PURE__ */ import_react.default.createElement(import_SideBar.default, { ...args, onToggle: handleToggle }, /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to portfolio"), label: "portfolio" }, /* @__PURE__ */ import_react.default.createElement(import_PortfolioMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to accounts"), label: "accounts", isActive: true }, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to discover"), label: "discover", isDisabled: true }, /* @__PURE__ */ import_react.default.createElement(import_ManagerMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to send"), label: "send", isDisabled: true }, /* @__PURE__ */ import_react.default.createElement(import_ArrowTopMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to receive"), label: "receive" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowBottomMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to buy / Sell"), label: "buy / Sell" }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoAltMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to exchange"), label: "exchange" }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to lend"), label: "lend" }, /* @__PURE__ */ import_react.default.createElement(import_LendMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to manager"), label: "manager", displayNotificationBadge: true }, /* @__PURE__ */ import_react.default.createElement(import_NanoFoldedMedium.default, { size: sidebarIconSize })));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/navigation/sideBar/SideBar/SideBar.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport SideBar from \"./SideBar\";\nimport type { SideBarProps } from \"./SideBar\";\nimport { action } from \"@storybook/addon-actions\";\nimport PortfolioIcon from \"@ledgerhq/icons-ui/reactLegacy/PortfolioMedium\";\nimport WalletIcon from \"@ledgerhq/icons-ui/reactLegacy/WalletMedium\";\nimport ManagerIcon from \"@ledgerhq/icons-ui/reactLegacy/ManagerMedium\";\nimport ArrowTopIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowTopMedium\";\nimport ArrowBottomIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowBottomMedium\";\nimport BuyCryptoAltIcon from \"@ledgerhq/icons-ui/reactLegacy/BuyCryptoAltMedium\";\nimport BuyCryptoIcon from \"@ledgerhq/icons-ui/reactLegacy/BuyCryptoMedium\";\nimport LendIcon from \"@ledgerhq/icons-ui/reactLegacy/LendMedium\";\nimport NanoFoldedIcon from \"@ledgerhq/icons-ui/reactLegacy/NanoFoldedMedium\";\nimport { StoryTemplate } from \"../../../helpers\";\n\nexport default {\n title: \"Navigation/SideBar/SideBar\",\n component: SideBar,\n argTypes: {\n children: {\n type: \"text\",\n description: \"A list a SideBar.Item\",\n required: true,\n control: false,\n },\n isExpanded: { control: false },\n onToggle: { control: false },\n },\n};\n\nconst Template = (args: SideBarProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });\n\n const sidebarIconSize = 20;\n return (\n <SideBar {...args} onToggle={handleToggle}>\n <SideBar.Item onClick={action(\"go to portfolio\")} label=\"portfolio\">\n <PortfolioIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to accounts\")} label=\"accounts\" isActive>\n <WalletIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to discover\")} label=\"discover\" isDisabled>\n <ManagerIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to send\")} label=\"send\" isDisabled>\n <ArrowTopIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to receive\")} label=\"receive\">\n <ArrowBottomIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to buy / Sell\")} label=\"buy / Sell\">\n <BuyCryptoAltIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to exchange\")} label=\"exchange\">\n <BuyCryptoIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to lend\")} label=\"lend\">\n <LendIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to manager\")} label=\"manager\" displayNotificationBadge>\n <NanoFoldedIcon size={sidebarIconSize} />\n </SideBar.Item>\n </SideBar>\n );\n};\n\nexport const Default: StoryTemplate<SideBarProps> = Template.bind({});\nDefault.args = {\n onToggle: action(\"toggle sidebar\"),\n isExpanded: true,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAAwB;AAExB,qBAAoB;AAEpB,2BAAuB;AACvB,6BAA0B;AAC1B,0BAAuB;AACvB,2BAAwB;AACxB,4BAAyB;AACzB,+BAA4B;AAC5B,gCAA6B;AAC7B,6BAA0B;AAC1B,wBAAqB;AACrB,8BAA2B;AAG3B,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,eAAAA;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,YAAY,EAAE,SAAS,MAAM;AAAA,IAC7B,UAAU,EAAE,SAAS,MAAM;AAAA,EAC7B;AACF;AAEA,MAAM,WAAW,CAAC,SAAuB;AACvC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,YAAY,CAAC,YAAY,WAAW,CAAC;AAE7E,QAAM,kBAAkB;AACxB,SACE,6BAAAC,QAAA,cAAC,eAAAD,SAAA,EAAS,GAAG,MAAM,UAAU,gBAC3B,6BAAAC,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,iBAAiB,GAAG,OAAM,eACtD,6BAAAC,QAAA,cAAC,uBAAAC,SAAA,EAAc,MAAM,iBAAiB,CACxC,GACA,6BAAAD,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,YAAW,UAAQ,QACxE,6BAAAC,QAAA,cAAC,oBAAAE,SAAA,EAAW,MAAM,iBAAiB,CACrC,GACA,6BAAAF,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,YAAW,YAAU,QAC1E,6BAAAC,QAAA,cAAC,qBAAAG,SAAA,EAAY,MAAM,iBAAiB,CACtC,GACA,6BAAAH,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,YAAY,GAAG,OAAM,QAAO,YAAU,QAClE,6BAAAC,QAAA,cAAC,sBAAAI,SAAA,EAAa,MAAM,iBAAiB,CACvC,GACA,6BAAAJ,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,eAAe,GAAG,OAAM,aACpD,6BAAAC,QAAA,cAAC,yBAAAK,SAAA,EAAgB,MAAM,iBAAiB,CAC1C,GACA,6BAAAL,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,kBAAkB,GAAG,OAAM,gBACvD,6BAAAC,QAAA,cAAC,0BAAAM,SAAA,EAAiB,MAAM,iBAAiB,CAC3C,GACA,6BAAAN,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,cACrD,6BAAAC,QAAA,cAAC,uBAAAO,SAAA,EAAc,MAAM,iBAAiB,CACxC,GACA,6BAAAP,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,YAAY,GAAG,OAAM,UACjD,6BAAAC,QAAA,cAAC,kBAAAQ,SAAA,EAAS,MAAM,iBAAiB,CACnC,GACA,6BAAAR,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,eAAe,GAAG,OAAM,WAAU,0BAAwB,QACtF,6BAAAC,QAAA,cAAC,wBAAAS,SAAA,EAAe,MAAM,iBAAiB,CACzC,CACF;AAEJ;AAEO,MAAM,UAAuC,SAAS,KAAK,CAAC,CAAC;AACpE,QAAQ,OAAO;AAAA,EACb,cAAU,6BAAO,gBAAgB;AAAA,EACjC,YAAY;AACd;",
|
|
6
6
|
"names": ["SideBar", "React", "PortfolioIcon", "WalletIcon", "ManagerIcon", "ArrowTopIcon", "ArrowBottomIcon", "BuyCryptoAltIcon", "BuyCryptoIcon", "LendIcon", "NanoFoldedIcon"]
|
|
7
7
|
}
|