@ledgerhq/react-ui 0.14.11 → 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/Icons.stories.js +46 -0
- package/lib/cjs/components/asorted/Icon/Icons.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/List/VerticalTimeline/TimelineItem.js +2 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +3 -3
- package/lib/cjs/components/layout/List/VerticalTimeline/index.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/loaders/ProgressLoader/index.js +1 -1
- package/lib/cjs/components/loaders/ProgressLoader/index.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/navigation/progress/Stepper/index.js +25 -5
- package/lib/cjs/components/navigation/progress/Stepper/index.js.map +2 -2
- package/lib/cjs/components/styled.stories.js +7 -4
- package/lib/cjs/components/styled.stories.js.map +2 -2
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +3 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -0
- package/lib/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/components/loaders/ProgressLoader/index.js +1 -1
- package/lib/components/loaders/ProgressLoader/index.js.map +1 -1
- package/lib/components/navigation/progress/Stepper/index.d.ts +9 -1
- package/lib/components/navigation/progress/Stepper/index.js +15 -5
- package/lib/components/navigation/progress/Stepper/index.js.map +1 -1
- package/package.json +14 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Notification/Notification.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport Notification, { Props } from \"./index\";\n\nexport default {\n title: \"Messages/Notifications\",\n component: Notification,\n argTypes: {\n title: {\n type: \"string\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport Notification, { Props } from \"./index\";\n\nexport default {\n title: \"Messages/Notifications\",\n component: Notification,\n argTypes: {\n title: {\n type: \"string\",\n },\n description: {\n type: \"string\",\n },\n link: {\n type: \"string\",\n },\n active: {\n type: \"boolean\",\n },\n badge: {\n control: false,\n },\n theme: { table: { disable: true } },\n as: { table: { disable: true } },\n forwardedAs: { table: { disable: true } },\n },\n args: {\n title: \"Informational title\",\n description:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh felis, pom id...\",\n link: \"Learn more\",\n active: false,\n },\n};\n\nexport function Notifications(args: Props & { active: boolean }): JSX.Element {\n const { description, link, ...props } = args;\n\n const warningBadge = (\n <Notification.Badge\n color=\"warning.c50\"\n backgroundColor=\"warning.c10\"\n icon={<Icon name=\"Warning\" size={24} />}\n active={args.active}\n />\n );\n\n const infoBadge = (\n <Notification.Badge\n color=\"primary.c100\"\n backgroundColor=\"primary.c10\"\n icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n active={args.active}\n />\n );\n\n return (\n <FlexBox flexDirection=\"column\" rowGap={5}>\n <Notification {...props} badge={warningBadge} hasBackground />\n <Notification {...props} badge={infoBadge} />\n <Notification {...props} description={description} badge={warningBadge} hasBackground />\n <Notification {...props} description={description} badge={infoBadge} />\n <Notification\n description={description}\n link={link}\n {...props}\n badge={warningBadge}\n hasBackground\n />\n <Notification {...props} description={description} link={link} badge={infoBadge} />\n </FlexBox>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAoC;AAEpC,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAEO,SAAS,cAAc,MAAgD;AAC5E,QAAM,EAAE,aAAa,MAAM,GAAG,MAAM,IAAI;AAExC,QAAM,eACJ,6BAAAC,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA,MACrC,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,QAAM,YACJ,6BAAAD,QAAA;AAAA,IAAC,aAAAD,QAAa;AAAA,IAAb;AAAA,MACC,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA,MAClD,QAAQ,KAAK;AAAA;AAAA,EACf;AAGF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,cAAc,eAAa,MAAC,GAC5D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,OAAO,WAAW,GAC3C,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,cAAc,eAAa,MAAC,GACtF,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,OAAO,WAAW,GACrE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,eAAa;AAAA;AAAA,EACf,GACA,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAc,GAAG,OAAO,aAA0B,MAAY,OAAO,WAAW,CACnF;AAEJ;",
|
|
6
6
|
"names": ["Notification", "React", "Icon", "FlexBox"]
|
|
7
7
|
}
|
|
@@ -41,8 +41,7 @@ var StatusNotification_stories_default = {
|
|
|
41
41
|
component: import_index.default,
|
|
42
42
|
argTypes: {
|
|
43
43
|
text: {
|
|
44
|
-
type: "string"
|
|
45
|
-
defaultValue: "Ledger Live is Experiencing Issues"
|
|
44
|
+
type: "string"
|
|
46
45
|
},
|
|
47
46
|
badge: {
|
|
48
47
|
control: false
|
|
@@ -53,6 +52,9 @@ var StatusNotification_stories_default = {
|
|
|
53
52
|
theme: { table: { disable: true } },
|
|
54
53
|
as: { table: { disable: true } },
|
|
55
54
|
forwardedAs: { table: { disable: true } }
|
|
55
|
+
},
|
|
56
|
+
args: {
|
|
57
|
+
text: "Ledger Live is Experiencing Issues"
|
|
56
58
|
}
|
|
57
59
|
};
|
|
58
60
|
function StatusNotifications(args) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/StatusNotification/StatusNotification.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n title: \"Messages/Status Notifications\",\n component: StatusNotification,\n argTypes: {\n text: {\n type: \"string\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\nimport StatusNotification, { Props } from \"./index\";\n\nexport default {\n title: \"Messages/Status Notifications\",\n component: StatusNotification,\n argTypes: {\n text: {\n type: \"string\",\n },\n badge: {\n control: false,\n },\n columnGap: { control: false },\n rowGap: { control: false },\n hasBorder: { type: \"boolean\" },\n theme: { table: { disable: true } },\n as: { table: { disable: true } },\n forwardedAs: { table: { disable: true } },\n },\n args: {\n text: \"Ledger Live is Experiencing Issues\",\n },\n};\n\nexport function StatusNotifications(args: Props & { active: boolean }): JSX.Element {\n const { ...props } = args;\n\n const warningBadge = <Icon name=\"Warning\" size={50} color=\"error.c50\" weight=\"Medium\" />;\n const infoBadge = <Icon name=\"Info\" size={50} color=\"primary.c100\" weight=\"Medium\" />;\n\n return (\n <FlexBox justifyContent=\"center\">\n <FlexBox width=\"502px\" flexDirection=\"column\" rowGap={5}>\n <StatusNotification {...props} badge={warningBadge} hasBorder />\n <StatusNotification {...props} badge={infoBadge} />\n <StatusNotification {...props} badge={warningBadge} hasBorder />\n <StatusNotification {...props} badge={infoBadge} />\n </FlexBox>\n </FlexBox>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,mBAA0C;AAE1C,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW,EAAE,SAAS,MAAM;AAAA,IAC5B,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,WAAW,EAAE,MAAM,UAAU;AAAA,IAC7B,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,EACR;AACF;AAEO,SAAS,oBAAoB,MAAgD;AAClF,QAAM,EAAE,GAAG,MAAM,IAAI;AAErB,QAAM,eAAe,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI,OAAM,aAAY,QAAO,UAAS;AACtF,QAAM,YAAY,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,OAAM,gBAAe,QAAO,UAAS;AAEnF,SACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,OAAM,SAAQ,eAAc,UAAS,QAAQ,KACpD,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,GACjD,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,cAAc,WAAS,MAAC,GAC9D,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAoB,GAAG,OAAO,OAAO,WAAW,CACnD,CACF;AAEJ;",
|
|
6
6
|
"names": ["StatusNotification", "React", "Icon", "FlexBox"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tip/Tip.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport Tip, { TipProps } from \"./index\";\nexport default {\n title: \"Messages/Tips\",\n argTypes: {\n type: {\n options: [\"success\", \"warning\", \"error\", undefined],\n control: {\n type: \"radio\",\n },\n },\n label: {\n control: {\n type: \"text\",\n },\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA8B;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport Tip, { TipProps } from \"./index\";\n\nexport default {\n title: \"Messages/Tips\",\n argTypes: {\n type: {\n options: [\"success\", \"warning\", \"error\", undefined],\n control: {\n type: \"radio\",\n },\n },\n label: {\n control: {\n type: \"text\",\n },\n },\n },\n args: {\n type: \"sucess\",\n label: \"Label\",\n },\n};\n\nexport const Default = (args: TipProps): JSX.Element => {\n return <Tip {...args} />;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA8B;AAE9B,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,WAAW,WAAW,SAAS,MAAS;AAAA,MAClD,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,UAAU,CAAC,SAAgC;AACtD,SAAO,6BAAAA,QAAA,cAAC,aAAAC,SAAA,EAAK,GAAG,MAAM;AACxB;",
|
|
6
6
|
"names": ["React", "Tip"]
|
|
7
7
|
}
|
|
@@ -76,7 +76,7 @@ var Tooltip_stories_default = {
|
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
argTypes: {
|
|
79
|
-
content: { type: "string"
|
|
79
|
+
content: { type: "string" },
|
|
80
80
|
visible: { options: [true, false, void 0] },
|
|
81
81
|
disabled: { type: "boolean" },
|
|
82
82
|
placement: {
|
|
@@ -99,6 +99,9 @@ var Tooltip_stories_default = {
|
|
|
99
99
|
"auto-end"
|
|
100
100
|
]
|
|
101
101
|
}
|
|
102
|
+
},
|
|
103
|
+
args: {
|
|
104
|
+
content: "Hello World!"
|
|
102
105
|
}
|
|
103
106
|
};
|
|
104
107
|
const Tooltip = (args) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "50px" } }, /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tooltip/Tooltip.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n title: \"Messages/Tooltip\",\n component: TooltipComponent,\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n argTypes: {\n content: { type: \"string\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BpB,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { StoryTemplate } from \"src/components/helpers\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport TooltipComponent, { Props } from \"./index\";\n\nconst description = `\n### Tooltips display informative text when users hover over an element.\n\nThis component is based on [tippyjs](https://atomiks.github.io/tippyjs/) which is powerful library.\nPlease check [the documentation](https://github.com/atomiks/tippyjs-react#-props) for the full props list and usage.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Tooltip } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nWrap some jsx that will make the tooltip visible on mouse over.<br/>\n_**Note:** this jsx will automatically be wrapped inside a \\`span\\` element if the ref cannot be forwarded. \\\nSee [here](https://github.com/atomiks/tippyjs-react#component-children) for a detailed explanation._\n\nTo set the tooltip inner contents, use the \\`content\\` prop.\n\n\\`\\`\\`js\n<Tooltip content=\"Hello!\" {...props}>\n <div>Hover me</div>\n</Tooltip>\n\\`\\`\\`\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.\n`;\n\nexport default {\n title: \"Messages/Tooltip\",\n component: TooltipComponent,\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n argTypes: {\n content: { type: \"string\" },\n visible: { options: [true, false, undefined] },\n disabled: { type: \"boolean\" },\n placement: {\n control: { type: \"radio\" },\n options: [\n \"top\",\n \"top-start\",\n \"top-end\",\n \"right\",\n \"right-start\",\n \"right-end\",\n \"bottom\",\n \"bottom-start\",\n \"bottom-end\",\n \"left\",\n \"left-start\",\n \"left-end\",\n \"auto\",\n \"auto-start\",\n \"auto-end\",\n ],\n },\n },\n args: {\n content: \"Hello World!\",\n },\n};\n\nexport const Tooltip: StoryTemplate<Props> = args => (\n <FlexBox alignItems=\"center\" justifyContent=\"center\">\n <TooltipComponent {...args}>\n <div style={{ margin: \"50px\" }}>\n <Text\n as=\"div\"\n fontWeight=\"semiBold\"\n color=\"neutral.c100\"\n style={{ border: \"2px solid #AAA\", borderRadius: \"5px\" }}\n p={10}\n textAlign=\"center\"\n >\n Hover\n <br />\n me\n </Text>\n </div>\n </TooltipComponent>\n </FlexBox>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAwC;AAExC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BpB,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,SAAS;AAAA,IAC1B,SAAS,EAAE,SAAS,CAAC,MAAM,OAAO,MAAS,EAAE;AAAA,IAC7C,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,QAAQ;AAAA,MACzB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,UAAgC,UAC3C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,gBAAe,YAC1C,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAkB,GAAG,QACpB,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,KAC3B,6BAAAA,QAAA;AAAA,EAAC,YAAAE;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,YAAW;AAAA,IACX,OAAM;AAAA,IACN,OAAO,EAAE,QAAQ,kBAAkB,cAAc,MAAM;AAAA,IACvD,GAAG;AAAA,IACH,WAAU;AAAA;AAAA,EACX;AAAA,EAEC,6BAAAF,QAAA,cAAC,UAAG;AAAA,EAAE;AAER,CACF,CACF,CACF;",
|
|
6
6
|
"names": ["TooltipComponent", "React", "FlexBox", "Text"]
|
|
7
7
|
}
|
|
@@ -150,7 +150,7 @@ var FlowStepper_stories_default = {
|
|
|
150
150
|
title: "Navigation/FlowStepper",
|
|
151
151
|
component: import__.FlowStepper,
|
|
152
152
|
argTypes: {
|
|
153
|
-
activeIndex: { control: "number"
|
|
153
|
+
activeIndex: { control: "number" },
|
|
154
154
|
extraProps: { control: "disabled" },
|
|
155
155
|
extraContainerProps: { control: "disabled" },
|
|
156
156
|
extraStepperProps: { control: "disabled" },
|
|
@@ -164,6 +164,9 @@ var FlowStepper_stories_default = {
|
|
|
164
164
|
stepFooters: { control: "disabled" },
|
|
165
165
|
renderStepFooter: { control: "disabled" }
|
|
166
166
|
},
|
|
167
|
+
args: {
|
|
168
|
+
activeIndex: 0
|
|
169
|
+
},
|
|
167
170
|
parameters: {
|
|
168
171
|
docs: {
|
|
169
172
|
description: {
|
|
@@ -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\", defaultValue: 0 },\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 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,wBAAwB;AAExB,eAAsF;AAEtF,qBAAsC;AACtC,IAAAA,gBAAyB;AAEzB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0GpB,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,aAAa,EAAE,SAAS,
|
|
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": "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",
|
|
6
6
|
"names": ["import_react", "React", "styled"]
|
|
7
7
|
}
|
|
@@ -80,6 +80,7 @@ const Item = {
|
|
|
80
80
|
};
|
|
81
81
|
const StepText = (0, import_styled_components.default)(import_Text.default)`
|
|
82
82
|
text-align: center;
|
|
83
|
+
white-space: pre-wrap;
|
|
83
84
|
color: ${(p) => {
|
|
84
85
|
if (p.state === "errored") {
|
|
85
86
|
return p.theme.colors.error.c50;
|
|
@@ -122,7 +123,10 @@ const Step = (0, import_react.memo)(function Step2({
|
|
|
122
123
|
const nextInactive = state === "pending";
|
|
123
124
|
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", alignItems: "center", flex: 20 }, /* @__PURE__ */ import_react.default.createElement(Item.Spacer, { mb: 5 }, !hideLeftSeparator && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive, position: "left" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" }), stepContentsByState[state], nextState && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive: nextInactive, position: "right" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" })), typeof Label === "string" ? /* @__PURE__ */ import_react.default.createElement(StepText, { state, variant: "small" }, Label) : /* @__PURE__ */ import_react.default.createElement(Label, { state }));
|
|
124
125
|
});
|
|
125
|
-
function getState(activeIndex, index, errored, disabled) {
|
|
126
|
+
function getState(activeIndex, index, errored, disabled, completed) {
|
|
127
|
+
if (completed) {
|
|
128
|
+
return "completed";
|
|
129
|
+
}
|
|
126
130
|
if (disabled) {
|
|
127
131
|
return "disabled";
|
|
128
132
|
}
|
|
@@ -134,10 +138,26 @@ function getState(activeIndex, index, errored, disabled) {
|
|
|
134
138
|
}
|
|
135
139
|
return "completed";
|
|
136
140
|
}
|
|
137
|
-
function Stepper({
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
function Stepper({
|
|
142
|
+
steps,
|
|
143
|
+
activeIndex = 0,
|
|
144
|
+
errored,
|
|
145
|
+
disabledIndexes,
|
|
146
|
+
filterDuplicate,
|
|
147
|
+
isOver,
|
|
148
|
+
...extraProps
|
|
149
|
+
}) {
|
|
150
|
+
const displayedSteps = filterDuplicate ? steps.filter((step, index) => index === 0 || step !== steps[index - 1]) : steps;
|
|
151
|
+
const dislayedActiveIndex = filterDuplicate ? displayedSteps.findIndex((step) => step === steps[activeIndex]) : activeIndex;
|
|
152
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexWrap: "nowrap", justifyContent: "space-between", ...extraProps }, displayedSteps.map((step, idx) => {
|
|
153
|
+
const state = getState(
|
|
154
|
+
dislayedActiveIndex,
|
|
155
|
+
idx,
|
|
156
|
+
errored,
|
|
157
|
+
disabledIndexes == null ? void 0 : disabledIndexes.includes(idx),
|
|
158
|
+
isOver
|
|
159
|
+
);
|
|
160
|
+
const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : void 0;
|
|
141
161
|
return /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement(Separator.Step, { inactive: state === "pending" }), /* @__PURE__ */ import_react.default.createElement(Step, { label: step, state, nextState, hideLeftSeparator: idx === 0 }));
|
|
142
162
|
}));
|
|
143
163
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/navigation/progress/Stepper/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { IconsLegacy } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n /**\n * An array of labels that will determine the progress bar steps.\n * A label is either a string or a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n * A styled StepText component is exported to allow easy styling of such a custom label.\n */\n steps: LabelType[];\n /**\n * Index of the active step, starting at zero and defaulting to 0 if omitted.\n */\n activeIndex?: number;\n /**\n * If true the current step is considered as a failure.\n */\n errored?: boolean;\n /**\n * Steps with indexes contained inside the array will be shown as disabled.\n */\n disabledIndexes?: number[];\n}\n\nexport type StepProps = {\n /**\n * State of the step.\n */\n state: StepState;\n /**\n * The label to display. To display more than text, this can be a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n * A styled StepText component is exported to allow easy styling of such a custom Label\n */\n label: LabelType;\n /**\n * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n */\n hideLeftSeparator: boolean;\n /**\n * The next step state, or undefined if the current step is the last one.\n */\n nextState?: StepState;\n};\n\nexport const Item = {\n Container: styled.div.attrs({\n mx: \"8px\",\n })<ColorProps & BorderProps & SpaceProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${p => p.theme.space[8]}px;\n height: ${p => p.theme.space[8]}px;\n ${color}\n ${border}\n ${space}\n `,\n Spacer: styled.div<SpaceProps>`\n display: flex;\n align-self: stretch;\n ${space}\n `,\n Current: styled.div.attrs({\n backgroundColor: \"primary.c90\",\n })<ColorProps>`\n width: 6px;\n height: 6px;\n border-radius: 6px;\n ${color}\n `,\n Pending: styled.div.attrs({\n backgroundColor: \"neutral.c70\",\n })<ColorProps>`\n width: ${p => p.theme.space[2]}px;\n height: ${p => p.theme.space[2]}px;\n border-radius: ${p => p.theme.space[2]}px;\n ${color}\n `,\n Completed: (): JSX.Element => <IconsLegacy.CheckAloneMedium size={16} />,\n Disabled: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n Errored: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n text-align: center;\n color: ${p => {\n if (p.state === \"errored\") {\n return p.theme.colors.error.c50;\n }\n if (p.state === \"disabled\") {\n return p.theme.colors.neutral.c50;\n }\n if (p.state === \"pending\") {\n return p.theme.colors.neutral.c70;\n }\n return p.theme.colors.neutral.c100;\n }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n flex: 1;\n position: relative;\n overflow-x: hidden;\n background-color: ${p => p.theme.colors.neutral.c40};\n height: 1px;\n top: ${p => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n Step: styled(BaseSeparator)``,\n Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n pending: (\n <Item.Container>\n <Item.Pending />\n </Item.Container>\n ),\n current: (\n <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Current />\n </Item.Container>\n ),\n completed: (\n <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Completed />\n </Item.Container>\n ),\n errored: (\n <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n <Item.Errored />\n </Item.Container>\n ),\n disabled: (\n <Item.Container color=\"neutral.c50\">\n <Item.Disabled />\n </Item.Container>\n ),\n};\n\nexport const Step = memo(function Step({\n state,\n label: Label,\n hideLeftSeparator,\n nextState,\n}: StepProps): JSX.Element {\n const inactive = state === \"pending\";\n const nextInactive = state === \"pending\";\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" flex={20}>\n <Item.Spacer mb={5}>\n {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n <Flex flex=\"1\" />\n )}\n {stepContentsByState[state]}\n {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n <Flex flex=\"1\" />\n )}\n </Item.Spacer>\n {typeof Label === \"string\" ? (\n <StepText state={state} variant=\"small\">\n {Label}\n </StepText>\n ) : (\n <Label state={state} />\n )}\n </Flex>\n );\n});\n\nfunction getState(activeIndex: number
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,+BAAmB;AACnB,2BAA0E;AAC1E,eAA4B;AAC5B,kBAAiB;AACjB,kBAAmC;
|
|
4
|
+
"sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { IconsLegacy } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n /**\n * An array of labels that will determine the progress bar steps.\n * A label is either a string or a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n * A styled StepText component is exported to allow easy styling of such a custom label.\n */\n steps: LabelType[];\n /**\n * Index of the active step, starting at zero and defaulting to 0 if omitted.\n */\n activeIndex?: number;\n /**\n * If true the current step is considered as a failure.\n */\n errored?: boolean;\n /**\n * Steps with indexes contained inside the array will be shown as disabled.\n */\n disabledIndexes?: number[];\n /**\n * Delete steps with same following labels\n */\n filterDuplicate?: boolean;\n /**\n * Complete all the steps\n */\n isOver?: boolean;\n}\n\nexport type StepProps = {\n /**\n * State of the step.\n */\n state: StepState;\n /**\n * The label to display. To display more than text, this can be a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n * A styled StepText component is exported to allow easy styling of such a custom Label\n */\n label: LabelType;\n /**\n * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n */\n hideLeftSeparator: boolean;\n /**\n * The next step state, or undefined if the current step is the last one.\n */\n nextState?: StepState;\n};\n\nexport const Item = {\n Container: styled.div.attrs({\n mx: \"8px\",\n })<ColorProps & BorderProps & SpaceProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${p => p.theme.space[8]}px;\n height: ${p => p.theme.space[8]}px;\n ${color}\n ${border}\n ${space}\n `,\n Spacer: styled.div<SpaceProps>`\n display: flex;\n align-self: stretch;\n ${space}\n `,\n Current: styled.div.attrs({\n backgroundColor: \"primary.c90\",\n })<ColorProps>`\n width: 6px;\n height: 6px;\n border-radius: 6px;\n ${color}\n `,\n Pending: styled.div.attrs({\n backgroundColor: \"neutral.c70\",\n })<ColorProps>`\n width: ${p => p.theme.space[2]}px;\n height: ${p => p.theme.space[2]}px;\n border-radius: ${p => p.theme.space[2]}px;\n ${color}\n `,\n Completed: (): JSX.Element => <IconsLegacy.CheckAloneMedium size={16} />,\n Disabled: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n Errored: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n text-align: center;\n white-space: pre-wrap;\n color: ${p => {\n if (p.state === \"errored\") {\n return p.theme.colors.error.c50;\n }\n if (p.state === \"disabled\") {\n return p.theme.colors.neutral.c50;\n }\n if (p.state === \"pending\") {\n return p.theme.colors.neutral.c70;\n }\n return p.theme.colors.neutral.c100;\n }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n flex: 1;\n position: relative;\n overflow-x: hidden;\n background-color: ${p => p.theme.colors.neutral.c40};\n height: 1px;\n top: ${p => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n Step: styled(BaseSeparator)``,\n Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n pending: (\n <Item.Container>\n <Item.Pending />\n </Item.Container>\n ),\n current: (\n <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Current />\n </Item.Container>\n ),\n completed: (\n <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Completed />\n </Item.Container>\n ),\n errored: (\n <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n <Item.Errored />\n </Item.Container>\n ),\n disabled: (\n <Item.Container color=\"neutral.c50\">\n <Item.Disabled />\n </Item.Container>\n ),\n};\n\nexport const Step = memo(function Step({\n state,\n label: Label,\n hideLeftSeparator,\n nextState,\n}: StepProps): JSX.Element {\n const inactive = state === \"pending\";\n const nextInactive = state === \"pending\";\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" flex={20}>\n <Item.Spacer mb={5}>\n {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n <Flex flex=\"1\" />\n )}\n {stepContentsByState[state]}\n {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n <Flex flex=\"1\" />\n )}\n </Item.Spacer>\n {typeof Label === \"string\" ? (\n <StepText state={state} variant=\"small\">\n {Label}\n </StepText>\n ) : (\n <Label state={state} />\n )}\n </Flex>\n );\n});\n\nfunction getState(\n activeIndex: number,\n index: number,\n errored?: boolean,\n disabled?: boolean,\n completed?: boolean,\n) {\n if (completed) {\n return \"completed\";\n }\n if (disabled) {\n return \"disabled\";\n }\n if (activeIndex < index) {\n return \"pending\";\n }\n if (activeIndex === index) {\n return errored ? \"errored\" : \"current\";\n }\n return \"completed\";\n}\n\nfunction Stepper({\n steps,\n activeIndex = 0,\n errored,\n disabledIndexes,\n filterDuplicate,\n isOver,\n ...extraProps\n}: Props) {\n const displayedSteps = filterDuplicate\n ? steps.filter((step, index) => index === 0 || step !== steps[index - 1])\n : steps;\n const dislayedActiveIndex = filterDuplicate\n ? displayedSteps.findIndex(step => step === steps[activeIndex])\n : activeIndex;\n\n return (\n <Flex flexWrap=\"nowrap\" justifyContent=\"space-between\" {...extraProps}>\n {displayedSteps.map((step, idx) => {\n const state = getState(\n dislayedActiveIndex,\n idx,\n errored,\n disabledIndexes?.includes(idx),\n isOver,\n );\n const nextState =\n idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;\n return (\n <Fragment key={idx}>\n {idx > 0 && <Separator.Step inactive={state === \"pending\"} />}\n <Step label={step} state={state} nextState={nextState} hideLeftSeparator={idx === 0} />\n </Fragment>\n );\n })}\n </Flex>\n );\n}\n\nexport default memo(Stepper);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "React", "Text", "Step", "Flex"]
|
|
7
7
|
}
|
|
@@ -40,25 +40,28 @@ var styled_stories_default = {
|
|
|
40
40
|
backgroundColor: {
|
|
41
41
|
type: "text",
|
|
42
42
|
control: "color",
|
|
43
|
-
defaultValue: "#0EBDCD",
|
|
44
43
|
description: "This property defines the backgroundColor of the box. This property any color format."
|
|
45
44
|
},
|
|
46
45
|
width: {
|
|
47
46
|
type: "text",
|
|
48
|
-
defaultValue: "200px",
|
|
49
47
|
description: "Width of the box."
|
|
50
48
|
},
|
|
51
49
|
py: {
|
|
52
50
|
type: "text",
|
|
53
|
-
defaultValue: "20px",
|
|
54
51
|
description: "Padding top and bottom."
|
|
55
52
|
},
|
|
56
53
|
mx: {
|
|
57
54
|
type: "text",
|
|
58
|
-
defaultValue: "20px",
|
|
59
55
|
description: "Margin left and right."
|
|
60
56
|
}
|
|
61
57
|
},
|
|
58
|
+
args: {
|
|
59
|
+
backgroundColor: "#0EBDCD",
|
|
60
|
+
width: "200px",
|
|
61
|
+
py: "20px",
|
|
62
|
+
px: "20px",
|
|
63
|
+
mx: "20px"
|
|
64
|
+
},
|
|
62
65
|
parameters: {
|
|
63
66
|
docs: {
|
|
64
67
|
description: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/styled.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"./styled\";\n\nexport default {\n title: \"Styled/BaseStyled\",\n argTypes: {\n backgroundColor: {\n type: \"text\",\n control: \"color\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,oBAA4C;AAE5C,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"./styled\";\n\nexport default {\n title: \"Styled/BaseStyled\",\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 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 baseStyled function is a wrapper to \"styled\" from [styled-components](https://styled-components.com/) that lets you write these common css properties to your component more succinctly and inline.\n \nIt acts like a drop-in remplacement of styled. In your styled component, just replace styled with baseStyled, and the component will includes all the style props exported by the color, layout, position, shadow and flexbox utilities 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 },\n};\n\nconst Block = baseStyled.div``;\n\nexport const Styled = (args: BaseStyledProps) => (\n <Block {...args}>\n A plain good ol'block with fixed width, backgroundColor, padding and margin, all by using inline\n props\n </Block>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,oBAA4C;AAE5C,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,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,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,EACF;AACF;AAEA,MAAM,QAAQ,cAAAA,QAAW;AAElB,MAAM,SAAS,CAAC,SACrB,6BAAAC,QAAA,cAAC,SAAO,GAAG,QAAM,wGAGjB;",
|
|
6
6
|
"names": ["baseStyled", "React"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import styled, { useTheme } from "styled-components";
|
|
|
3
3
|
import { Flex, Box } from "../..";
|
|
4
4
|
import { Text } from "../../..";
|
|
5
5
|
import Tag from "../../../Tag";
|
|
6
|
+
import InfiniteLoader from "../../../loaders/InfiniteLoader";
|
|
6
7
|
import TimelineIndicator from "./TimelineIndicator";
|
|
7
8
|
const getContainerBackground = (theme, status) => {
|
|
8
9
|
if (status === "completed") {
|
|
@@ -47,7 +48,8 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
47
48
|
: item.status === "active"
|
|
48
49
|
? "primary.c80"
|
|
49
50
|
: "neutral.c70" }, item.title),
|
|
50
|
-
(item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`)))
|
|
51
|
+
((item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))) ||
|
|
52
|
+
((item === null || item === void 0 ? void 0 : item.hasLoader) && item.status === "active" && React.createElement(InfiniteLoader, { size: 30 }))),
|
|
51
53
|
item.renderBody && item.status === "active" && (React.createElement(Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))))));
|
|
52
54
|
}
|
|
53
55
|
export default React.memo(TimelineItem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,GAAG,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,IAAmB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,IAAmB,MAAM,uBAAuB,CAAC;AAkBxD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAwC;QAAxC,EAAE,KAAK,EAAE,YAAY,OAAmB,EAAd,KAAK,cAA/B,yBAAiC,CAAF;IACtE,OAAO,CACL,oBAAC,IAAI,oBAAK,KAAK,IAAE,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,KAC5C,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,KAAK,KAAK,CAAC,EACxB,UAAU,EAAE,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EACtC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAC7D,CACH,CAAC,CACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAwB,KAAK,CAAC,EAAE,CAAC,CACjD,oBAAC,IAAI,kBAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,CAAC,IAAM,KAAK,EAAI,CACrF,CAAC;AAEF,MAAM,QAAQ,GAAwB,KAAK,CAAC,EAAE,CAAC,CAC7C,oBAAC,IAAI,kBAAC,OAAO,EAAC,gBAAgB,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CACrF,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACrC,gBAAgB,CAAC,YAAY,GAAG,YAAY,CAAC"}
|
|
@@ -52,7 +52,7 @@ function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, fr
|
|
|
52
52
|
export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, infinite, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
|
|
53
53
|
return (React.createElement(StyledProgressLoaderContainer, null,
|
|
54
54
|
showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
|
|
55
|
-
progress,
|
|
55
|
+
Math.floor(progress),
|
|
56
56
|
"%")),
|
|
57
57
|
infinite ? (React.createElement(StyledSpinningContainer, null,
|
|
58
58
|
React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: 25, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))) : (React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAkDtC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAC,CAAA;;;;CAID,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMtC,CAAC;AAEF,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG/C,CAAC;AACF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GAQnB;IACC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACrD,MAAM,gBAAgB,GAAG,aAAa,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAC1E,OAAO,CACL,6BAAK,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;QACxC,oBAAC,sBAAsB,IACrB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAC9B,MAAM,EAAE,qBAAqB,EAC7B,CAAC,EAAE,gBAAgB,GACnB;QACF,oBAAC,iBAAiB,IAChB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,EAC3B,MAAM,EAAE,gBAAgB,EACxB,aAAa,EAAE,kBAAkB,EACjC,CAAC,EAAE,gBAAgB,GACnB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,CAAC,EACZ,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACf;IACN,OAAO,CACL,oBAAC,6BAA6B;QAC3B,cAAc,IAAI,CACjB,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,IAAI,aAAa;YACjE,QAAQ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,6 +28,14 @@ export interface Props extends FlexBoxProps {
|
|
|
28
28
|
* Steps with indexes contained inside the array will be shown as disabled.
|
|
29
29
|
*/
|
|
30
30
|
disabledIndexes?: number[];
|
|
31
|
+
/**
|
|
32
|
+
* Delete steps with same following labels
|
|
33
|
+
*/
|
|
34
|
+
filterDuplicate?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Complete all the steps
|
|
37
|
+
*/
|
|
38
|
+
isOver?: boolean;
|
|
31
39
|
}
|
|
32
40
|
export type StepProps = {
|
|
33
41
|
/**
|
|
@@ -68,6 +76,6 @@ export declare const StepText: import("styled-components").StyledComponent<"span
|
|
|
68
76
|
state: StepState;
|
|
69
77
|
}, keyof import("../../../asorted/Text").TextProps>;
|
|
70
78
|
export declare const Step: React.NamedExoticComponent<StepProps>;
|
|
71
|
-
declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): React.JSX.Element;
|
|
79
|
+
declare function Stepper({ steps, activeIndex, errored, disabledIndexes, filterDuplicate, isOver, ...extraProps }: Props): React.JSX.Element;
|
|
72
80
|
declare const _default: React.MemoExoticComponent<typeof Stepper>;
|
|
73
81
|
export default _default;
|
|
@@ -55,6 +55,7 @@ export const Item = {
|
|
|
55
55
|
};
|
|
56
56
|
export const StepText = styled(Text) `
|
|
57
57
|
text-align: center;
|
|
58
|
+
white-space: pre-wrap;
|
|
58
59
|
color: ${p => {
|
|
59
60
|
if (p.state === "errored") {
|
|
60
61
|
return p.theme.colors.error.c50;
|
|
@@ -102,7 +103,10 @@ export const Step = memo(function Step({ state, label: Label, hideLeftSeparator,
|
|
|
102
103
|
(nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
|
|
103
104
|
typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
|
|
104
105
|
});
|
|
105
|
-
function getState(activeIndex, index, errored, disabled) {
|
|
106
|
+
function getState(activeIndex, index, errored, disabled, completed) {
|
|
107
|
+
if (completed) {
|
|
108
|
+
return "completed";
|
|
109
|
+
}
|
|
106
110
|
if (disabled) {
|
|
107
111
|
return "disabled";
|
|
108
112
|
}
|
|
@@ -115,10 +119,16 @@ function getState(activeIndex, index, errored, disabled) {
|
|
|
115
119
|
return "completed";
|
|
116
120
|
}
|
|
117
121
|
function Stepper(_a) {
|
|
118
|
-
var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
+
var { steps, activeIndex = 0, errored, disabledIndexes, filterDuplicate, isOver } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes", "filterDuplicate", "isOver"]);
|
|
123
|
+
const displayedSteps = filterDuplicate
|
|
124
|
+
? steps.filter((step, index) => index === 0 || step !== steps[index - 1])
|
|
125
|
+
: steps;
|
|
126
|
+
const dislayedActiveIndex = filterDuplicate
|
|
127
|
+
? displayedSteps.findIndex(step => step === steps[activeIndex])
|
|
128
|
+
: activeIndex;
|
|
129
|
+
return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), displayedSteps.map((step, idx) => {
|
|
130
|
+
const state = getState(dislayedActiveIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx), isOver);
|
|
131
|
+
const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;
|
|
122
132
|
return (React.createElement(Fragment, { key: idx },
|
|
123
133
|
idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
|
|
124
134
|
React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
|