@stokr/components-library 2.3.65-beta.10 → 2.3.65-beta.11
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/dist/components/Chips/Chip.styles.js +3 -2
- package/package.json +3 -2
- package/dist/components/2FA/EnterCode.stories.js +0 -35
- package/dist/components/2FA/disable-2fa-flow.stories.js +0 -31
- package/dist/components/2FA/enable-2fa-flow.stories.js +0 -31
- package/dist/components/2FA/login-with-otp-flow.stories.js +0 -31
- package/dist/components/2FA/main-flow.stories.js +0 -162
- package/dist/components/AccountBalance/AccountBalance.stories.js +0 -83
- package/dist/components/AdminDashboard/Table/ReactTable.stories.js +0 -913
- package/dist/components/AgreementItem/AgreementItem.stories.js +0 -105
- package/dist/components/AnalyticGraphs/Analytic.js +0 -541
- package/dist/components/AnalyticGraphs/Analytic.styles.js +0 -25
- package/dist/components/BackButton/BackButton.stories.js +0 -32
- package/dist/components/Background/Background.stories.js +0 -75
- package/dist/components/BarChart/BarChart.js +0 -263
- package/dist/components/BarChart/BarChart.stories.js +0 -66
- package/dist/components/BarChart/BarChart.styles.js +0 -26
- package/dist/components/BarChartLegend/BarChartLegend.js +0 -79
- package/dist/components/BarChartLegend/BarChartLegend.styles.js +0 -21
- package/dist/components/BasicTable/BasicTable.stories.js +0 -59
- package/dist/components/BlogPost/BlogPost.stories.js +0 -160
- package/dist/components/Button/Button.stories.js +0 -146
- package/dist/components/Button/GlareButton.stories.js +0 -132
- package/dist/components/CapitalRaisedSummary/CapitalRaisedSummery.stories.js +0 -42
- package/dist/components/ChartBox/ChartBox.js +0 -41
- package/dist/components/ChartBox/ChartBox.stories.js +0 -17
- package/dist/components/ChartBox/ChartBox.styles.js +0 -27
- package/dist/components/ChartBox/ChartBoxDistribution.js +0 -27
- package/dist/components/ChartBox/ChartBoxDistribution.stories.js +0 -18
- package/dist/components/ChartLegend/ChartLegend.stories.js +0 -90
- package/dist/components/Checkbox/Checkbox.stories.js +0 -88
- package/dist/components/Checklist/ChecklistCard.stories.js +0 -102
- package/dist/components/Checklist/UserChecklist.js +0 -184
- package/dist/components/Checklist/UserChecklist.stories.js +0 -317
- package/dist/components/Chips/Chip.stories.js +0 -36
- package/dist/components/Chips/ChipsWrapper.stories.js +0 -47
- package/dist/components/ComponentScroll/ComponentScroll.stories.js +0 -111
- package/dist/components/CryptoAddress/CryptoAddress.stories.js +0 -205
- package/dist/components/CryptoAddressDetails/CryptoAddressDetails.stories.js +0 -70
- package/dist/components/DonutChart/DonutChart.stories.js +0 -54
- package/dist/components/FAQ/FAQ.stories.js +0 -76
- package/dist/components/Footer/Footer.stories.js +0 -49
- package/dist/components/Footer/FooterLayout.stories.js +0 -26
- package/dist/components/Footer/FooterMenu.stories.js +0 -113
- package/dist/components/Footer/mangopay.png +0 -0
- package/dist/components/Footer/mangopay.svg +0 -20
- package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js +0 -69
- package/dist/components/Form/Form.stories.js +0 -32
- package/dist/components/FullscreenCard/FullscreenCard.styles.js +0 -27
- package/dist/components/Header/Header.stories.js +0 -192
- package/dist/components/Icon/Icon.stories.js +0 -108
- package/dist/components/InfoIcon/InfoIcon.stories.js +0 -299
- package/dist/components/InfoPanel/InfoPanel.js +0 -124
- package/dist/components/Input/DatePickerInput.stories.js +0 -87
- package/dist/components/Input/Input.stories.js +0 -217
- package/dist/components/Input/InputPassword.stories.js +0 -80
- package/dist/components/Input/InputWithButton.stories.js +0 -75
- package/dist/components/Input/MultiSelect.stories.js +0 -264
- package/dist/components/Input/OtpInput.stories.js +0 -57
- package/dist/components/Input/RangeInput.stories.js +0 -58
- package/dist/components/Input/SearchInput.stories.js +0 -366
- package/dist/components/Input/Select.stories.js +0 -478
- package/dist/components/InvestCalculator/InvestCalculator.stories.js +0 -135
- package/dist/components/InvestmentStat/InvestmentStat.stories.js +0 -52
- package/dist/components/KYCFlow/BasicInfo.js +0 -448
- package/dist/components/KYCFlow/Confirmation.js +0 -46
- package/dist/components/KYCFlow/DocumentFileUpload.js +0 -263
- package/dist/components/KYCFlow/DocumentScan.js +0 -75
- package/dist/components/KYCFlow/DocumentScanUpload.js +0 -251
- package/dist/components/KYCFlow/DocumentSelect.js +0 -118
- package/dist/components/KYCFlow/DocumentSuccess.js +0 -63
- package/dist/components/KYCFlow/DocumentUpload.js +0 -53
- package/dist/components/KYCFlow/DocumentVerificationType.js +0 -131
- package/dist/components/KYCFlow/FaceScan.js +0 -54
- package/dist/components/KYCFlow/FaceScanRecognition.js +0 -61
- package/dist/components/KYCFlow/FaceScanSuccess.js +0 -56
- package/dist/components/KYCFlow/Terms.js +0 -119
- package/dist/components/KYCFlow/_styles.js +0 -111
- package/dist/components/KYCFlow/index.js +0 -97
- package/dist/components/KYCSelectBox/KYCSelectBox.styles.js +0 -29
- package/dist/components/LatestUpdate/LatestUpdate.stories.js +0 -58
- package/dist/components/Layout/Layout.stories.js +0 -60
- package/dist/components/LearnMoreCarousel/LearnMoreCarousel.stories.js +0 -66
- package/dist/components/LearnMorePage/LearnMore.stories.js +0 -48
- package/dist/components/LearnMorePage/LearnMoreItem.stories.js +0 -62
- package/dist/components/LearnMoreSection/LearnMore.stories.js +0 -30
- package/dist/components/LearnMoreSection/LearnMoreItem.stories.js +0 -59
- package/dist/components/LoginModal/LoginModal.stories.js +0 -74
- package/dist/components/MatomoConnect/Matomo.js +0 -228
- package/dist/components/MatomoConnect/Matomo_fuckup.js +0 -387
- package/dist/components/Modal/Modal.stories.js +0 -75
- package/dist/components/Modal/NewVentureModal/NewVentureModal.stories.js +0 -150
- package/dist/components/Modal/PaymentModal.stories.js +0 -57
- package/dist/components/Modal/SideModal.stories.js +0 -342
- package/dist/components/MultiProgressBar/MultiProgressBar.stories.js +0 -67
- package/dist/components/Newsletter/Newsletter.stories.js +0 -16
- package/dist/components/NotificationContext/NotificationContext.js +0 -141
- package/dist/components/Number/Number.stories.js +0 -92
- package/dist/components/Pagination/Pagination.stories.js +0 -83
- package/dist/components/Pagination/PaginationControls.stories.js +0 -112
- package/dist/components/Payment/PaymentDetailsCard.stories.js +0 -198
- package/dist/components/Payment/PaymentDisplay.stories.js +0 -302
- package/dist/components/Payment/TimerComponent.stories.js +0 -236
- package/dist/components/Process/Process.stories.js +0 -42
- package/dist/components/ProfileBadge/ProfileBadge.stories.js +0 -45
- package/dist/components/ProfileBox/ProfileBox.stories.js +0 -35
- package/dist/components/ProfileHeader/ProfileHeader.js +0 -252
- package/dist/components/ProfileHeader/ProfileHeader.styles.js +0 -65
- package/dist/components/ProfileStat/ProfileStat.stories.js +0 -66
- package/dist/components/ProofOfAddress/ProofOfAddress.styles.js +0 -53
- package/dist/components/QRCode/QRCode.stories.js +0 -104
- package/dist/components/Radio/Radio.stories.js +0 -73
- package/dist/components/RefreshButton/RefreshButton.stories.js +0 -38
- package/dist/components/RegisterAlgorand/AlgoAddressName.js +0 -138
- package/dist/components/RegisterAlgorand/AlgoAdressSelect.js +0 -443
- package/dist/components/RegisterAlgorand/AlgoConnectWallet.js +0 -47
- package/dist/components/RegisterAlgorand/AlgoSuccess.js +0 -38
- package/dist/components/RegisterAlgorand/Algorand.stories.js +0 -80
- package/dist/components/RegisterAlgorand/ChooseWallet.js +0 -97
- package/dist/components/RegisterAlgorand/SelectProject.js +0 -89
- package/dist/components/RegisterAlgorand/_styles.js +0 -28
- package/dist/components/RegisterAlgorand/flow.js +0 -409
- package/dist/components/RegisterAlgorand/flowWithMemo.js +0 -410
- package/dist/components/RegisterAlgorand/index.js +0 -48
- package/dist/components/RegisterConfirmModal/RegisterConfirmModal.stories.js +0 -41
- package/dist/components/RegisterEthereum/EthAddressLedger.js +0 -226
- package/dist/components/RegisterEthereum/EthAddressMetamask.js +0 -204
- package/dist/components/RegisterEthereum/EthAddressName.js +0 -135
- package/dist/components/RegisterEthereum/EthConnectLedger.js +0 -194
- package/dist/components/RegisterEthereum/EthConnectMetamask.js +0 -35
- package/dist/components/RegisterEthereum/EthFinish.js +0 -41
- package/dist/components/RegisterEthereum/EthIntro.js +0 -95
- package/dist/components/RegisterEthereum/_styles.js +0 -28
- package/dist/components/RegisterEthereum/index.js +0 -68
- package/dist/components/RegisterModal/RegisterModal.stories.js +0 -49
- package/dist/components/RequestDataBox/RequestDataBox.stories.js +0 -37
- package/dist/components/RiskQuestionnaire/RiskQuestionnaireContext.js +0 -185
- package/dist/components/RiskQuestionnaire/_styles.js +0 -15
- package/dist/components/SEO/SEO.stories.js +0 -60
- package/dist/components/SideLine/SideLine.stories.js +0 -28
- package/dist/components/SigningSubflow/SignSubAddressMetamask.js +0 -137
- package/dist/components/SigningSubflow/SignSubConnectLedger.js +0 -150
- package/dist/components/SigningSubflow/SignSubConnectMetamask.js +0 -137
- package/dist/components/SigningSubflow/SignSubIntro.js +0 -55
- package/dist/components/SigningSubflow/SignSubSendLedger.js +0 -150
- package/dist/components/SigningSubflow/SignSubSendMetamask.js +0 -62
- package/dist/components/SigningSubflow/SignSubTransactionLedger.js +0 -161
- package/dist/components/SigningSubflow/SignSubTransactionMetamask.js +0 -166
- package/dist/components/SigningSubflow/_styles.js +0 -34
- package/dist/components/SigningSubflow/index.js +0 -32
- package/dist/components/Slider/Slider.stories.js +0 -68
- package/dist/components/Snackbar/Snackbar.stories.js +0 -292
- package/dist/components/StatusTag/StatusTag.stories.js +0 -262
- package/dist/components/StepController/StepController.stories.js +0 -60
- package/dist/components/StepController/StepControllerProgress.stories.js +0 -49
- package/dist/components/StepsProgress/StepIndicator.stories.js +0 -153
- package/dist/components/StepsProgress/StepsProgress.stories.js +0 -49
- package/dist/components/Switch/Switch.stories.js +0 -81
- package/dist/components/Tabs/Tabs.stories.js +0 -36
- package/dist/components/TabsNav/TabNav.stories.js +0 -40
- package/dist/components/TabsNav/TabsNav.stories.js +0 -37
- package/dist/components/TeamOverview/TeamOverview.stories.js +0 -76
- package/dist/components/TermsModal/TermsModal.stories.js +0 -31
- package/dist/components/Text/Headline.stories.js +0 -48
- package/dist/components/Text/Text.stories.js +0 -70
- package/dist/components/TextLink/TextLink.stories.js +0 -35
- package/dist/components/Timeline/Timeline.stories.js +0 -393
- package/dist/components/ToDoList/ToDoList.stories.js +0 -133
- package/dist/components/ToDoList/ToDoListTask.stories.js +0 -70
- package/dist/components/TransactionDetails/TransactionDetails.stories.js +0 -55
- package/dist/components/TransactionDetails/TransactionDetailsTable.stories.js +0 -305
- package/dist/components/TransactionInfo/TransactionInfo.stories.js +0 -61
- package/dist/components/TwoFactorModal/TwoFactorModal.js +0 -100
- package/dist/components/VerifyEmailModal/VerifyEmailModal.stories.js +0 -59
- package/dist/components/headerHo/HeaderHo.stories.js +0 -35
- package/dist/components/icons/Arrow.stories.js +0 -42
- package/dist/components/icons/ArrowSimple.stories.js +0 -48
- package/dist/components/icons/Check.stories.js +0 -22
- package/dist/components/icons/Facebook.stories.js +0 -21
- package/dist/components/icons/Facebook_Logo.png +0 -0
- package/dist/components/icons/Info.stories.js +0 -16
- package/dist/components/icons/Instagram.stories.js +0 -21
- package/dist/components/icons/LI-In-Bug.png +0 -0
- package/dist/components/icons/LinkIcon.stories.js +0 -21
- package/dist/components/icons/LinkedIn.stories.js +0 -16
- package/dist/components/icons/Medium.stories.js +0 -16
- package/dist/components/icons/Reddit.stories.js +0 -21
- package/dist/components/icons/Share.stories.js +0 -16
- package/dist/components/icons/Telegram-Logo.png +0 -0
- package/dist/components/icons/Telegram.stories.js +0 -16
- package/dist/components/icons/Twitter.stories.js +0 -21
- package/dist/components/icons/X-logo-black.png +0 -0
- package/dist/components/icons/X.stories.js +0 -16
- package/dist/components/icons/Youtube.stories.js +0 -21
- package/dist/components/icons/youtube_social_circle_red.png +0 -0
- package/dist/components/logo/Logo.stories.js +0 -260
- package/dist/components/taxId/TaxId.stories.js +0 -50
- package/dist/components/video/Video.stories.js +0 -52
|
@@ -1,262 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.WithTooltips = exports.WithHoverColor = exports.UsingChildren = exports.TableUniformity = exports.Default = exports.CustomIcon = exports.Clickable = exports.AllVariants = exports.AllStatesInRow = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _StatusTag = _interopRequireDefault(require("./StatusTag"));
|
|
9
|
-
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
|
|
10
|
-
var _Icon = require("../Icon/Icon.style");
|
|
11
|
-
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
12
|
-
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
13
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
var _default = exports.default = {
|
|
15
|
-
title: 'Components Library/StatusTag',
|
|
16
|
-
component: _StatusTag.default,
|
|
17
|
-
decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
|
|
18
|
-
argTypes: {
|
|
19
|
-
variant: {
|
|
20
|
-
control: {
|
|
21
|
-
type: 'select'
|
|
22
|
-
},
|
|
23
|
-
options: ['pending', 'initiated', 'confirmed', 'declined', 'paid', null],
|
|
24
|
-
description: 'Built-in variant (uses default icon and colors)'
|
|
25
|
-
},
|
|
26
|
-
text: {
|
|
27
|
-
control: 'text',
|
|
28
|
-
description: 'Text to display next to the icon'
|
|
29
|
-
},
|
|
30
|
-
icon: {
|
|
31
|
-
control: false,
|
|
32
|
-
description: 'Custom icon component (overrides variant icon)'
|
|
33
|
-
},
|
|
34
|
-
tooltip: {
|
|
35
|
-
control: 'text',
|
|
36
|
-
description: 'Tooltip text (uses InfoIcon)'
|
|
37
|
-
},
|
|
38
|
-
iconColor: {
|
|
39
|
-
control: 'color',
|
|
40
|
-
description: 'Default icon color (defaults to grey)'
|
|
41
|
-
},
|
|
42
|
-
hoverColor: {
|
|
43
|
-
control: 'color',
|
|
44
|
-
description: 'Icon color on hover'
|
|
45
|
-
},
|
|
46
|
-
disableHoverColor: {
|
|
47
|
-
control: 'boolean',
|
|
48
|
-
description: 'Disable hover color change (for pre-colored icons)',
|
|
49
|
-
defaultValue: false
|
|
50
|
-
},
|
|
51
|
-
minWidth: {
|
|
52
|
-
control: 'text',
|
|
53
|
-
description: 'Minimum width (for table uniformity)'
|
|
54
|
-
},
|
|
55
|
-
onClick: {
|
|
56
|
-
action: 'clicked',
|
|
57
|
-
description: 'Click handler'
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}; // Default example
|
|
61
|
-
const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
62
|
-
variant: "pending",
|
|
63
|
-
text: "Pending"
|
|
64
|
-
}));
|
|
65
|
-
|
|
66
|
-
// All variants
|
|
67
|
-
exports.Default = Default;
|
|
68
|
-
const AllVariants = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
-
style: {
|
|
70
|
-
display: 'flex',
|
|
71
|
-
flexDirection: 'column',
|
|
72
|
-
gap: '16px'
|
|
73
|
-
}
|
|
74
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
75
|
-
variant: "pending",
|
|
76
|
-
text: "Pending"
|
|
77
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
78
|
-
variant: "initiated",
|
|
79
|
-
text: "Initiated"
|
|
80
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
81
|
-
variant: "confirmed",
|
|
82
|
-
text: "Confirmed"
|
|
83
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
84
|
-
variant: "declined",
|
|
85
|
-
text: "Declined"
|
|
86
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
87
|
-
variant: "paid",
|
|
88
|
-
text: "Paid"
|
|
89
|
-
})));
|
|
90
|
-
|
|
91
|
-
// Using children instead of text prop
|
|
92
|
-
exports.AllVariants = AllVariants;
|
|
93
|
-
const UsingChildren = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
-
style: {
|
|
95
|
-
display: 'flex',
|
|
96
|
-
flexDirection: 'column',
|
|
97
|
-
gap: '16px'
|
|
98
|
-
}
|
|
99
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
100
|
-
variant: "pending"
|
|
101
|
-
}, "Pending"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
102
|
-
variant: "initiated"
|
|
103
|
-
}, "Initiated"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
104
|
-
variant: "paid"
|
|
105
|
-
}, "Paid")));
|
|
106
|
-
|
|
107
|
-
// With hover color change
|
|
108
|
-
exports.UsingChildren = UsingChildren;
|
|
109
|
-
const WithHoverColor = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
style: {
|
|
111
|
-
display: 'flex',
|
|
112
|
-
flexDirection: 'column',
|
|
113
|
-
gap: '16px'
|
|
114
|
-
}
|
|
115
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
|
|
116
|
-
style: {
|
|
117
|
-
marginBottom: '8px',
|
|
118
|
-
fontSize: '14px'
|
|
119
|
-
}
|
|
120
|
-
}, "Pending (hover to see color change)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
121
|
-
variant: "pending",
|
|
122
|
-
text: "Pending"
|
|
123
|
-
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
|
|
124
|
-
style: {
|
|
125
|
-
marginBottom: '8px',
|
|
126
|
-
fontSize: '14px'
|
|
127
|
-
}
|
|
128
|
-
}, "Custom hover color"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
129
|
-
variant: "pending",
|
|
130
|
-
text: "Custom Hover",
|
|
131
|
-
hoverColor: _colors.default.blue
|
|
132
|
-
}))));
|
|
133
|
-
|
|
134
|
-
// Custom icon
|
|
135
|
-
exports.WithHoverColor = WithHoverColor;
|
|
136
|
-
const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
137
|
-
style: {
|
|
138
|
-
display: 'flex',
|
|
139
|
-
flexDirection: 'column',
|
|
140
|
-
gap: '16px'
|
|
141
|
-
}
|
|
142
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
143
|
-
icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
|
|
144
|
-
icon: _Icon.iconsMap.check,
|
|
145
|
-
size: 12
|
|
146
|
-
}),
|
|
147
|
-
text: "Custom Icon",
|
|
148
|
-
hoverColor: _colors.default.freshGreen
|
|
149
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
150
|
-
icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
|
|
151
|
-
icon: _Icon.iconsMap.warning,
|
|
152
|
-
size: 12
|
|
153
|
-
}),
|
|
154
|
-
text: "Warning",
|
|
155
|
-
hoverColor: _colors.default.warningOrange
|
|
156
|
-
})));
|
|
157
|
-
|
|
158
|
-
// With tooltips
|
|
159
|
-
exports.CustomIcon = CustomIcon;
|
|
160
|
-
const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
161
|
-
style: {
|
|
162
|
-
display: 'flex',
|
|
163
|
-
flexDirection: 'column',
|
|
164
|
-
gap: '16px'
|
|
165
|
-
}
|
|
166
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
167
|
-
variant: "pending",
|
|
168
|
-
text: "Pending",
|
|
169
|
-
tooltip: "This transaction is awaiting confirmation"
|
|
170
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
171
|
-
variant: "initiated",
|
|
172
|
-
text: "Initiated",
|
|
173
|
-
tooltip: "Transaction has been initiated and is in progress"
|
|
174
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
175
|
-
variant: "paid",
|
|
176
|
-
text: "Paid",
|
|
177
|
-
tooltip: "Payment has been successfully completed"
|
|
178
|
-
})));
|
|
179
|
-
|
|
180
|
-
// Table uniformity
|
|
181
|
-
exports.WithTooltips = WithTooltips;
|
|
182
|
-
const TableUniformity = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
183
|
-
style: {
|
|
184
|
-
display: 'flex',
|
|
185
|
-
flexDirection: 'column',
|
|
186
|
-
gap: '8px'
|
|
187
|
-
}
|
|
188
|
-
}, /*#__PURE__*/_react.default.createElement("h4", {
|
|
189
|
-
style: {
|
|
190
|
-
marginBottom: '8px',
|
|
191
|
-
fontSize: '14px'
|
|
192
|
-
}
|
|
193
|
-
}, "All tags with same minWidth (for table columns)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
194
|
-
variant: "pending",
|
|
195
|
-
text: "Pending",
|
|
196
|
-
minWidth: "120px",
|
|
197
|
-
center: true
|
|
198
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
199
|
-
variant: "initiated",
|
|
200
|
-
text: "Initiated",
|
|
201
|
-
minWidth: "120px",
|
|
202
|
-
center: true
|
|
203
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
204
|
-
variant: "confirmed",
|
|
205
|
-
text: "Confirmed",
|
|
206
|
-
minWidth: "120px",
|
|
207
|
-
center: true
|
|
208
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
209
|
-
variant: "declined",
|
|
210
|
-
text: "Declined",
|
|
211
|
-
minWidth: "120px",
|
|
212
|
-
center: true
|
|
213
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
214
|
-
variant: "paid",
|
|
215
|
-
text: "Paid",
|
|
216
|
-
minWidth: "120px",
|
|
217
|
-
center: true
|
|
218
|
-
})));
|
|
219
|
-
|
|
220
|
-
// Clickable
|
|
221
|
-
exports.TableUniformity = TableUniformity;
|
|
222
|
-
const Clickable = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
223
|
-
style: {
|
|
224
|
-
display: 'flex',
|
|
225
|
-
flexDirection: 'column',
|
|
226
|
-
gap: '16px'
|
|
227
|
-
}
|
|
228
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
229
|
-
variant: "pending",
|
|
230
|
-
text: "Clickable Pending",
|
|
231
|
-
onClick: () => alert('Clicked!')
|
|
232
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
233
|
-
variant: "paid",
|
|
234
|
-
text: "Clickable Paid",
|
|
235
|
-
onClick: () => alert('Paid clicked!')
|
|
236
|
-
})));
|
|
237
|
-
|
|
238
|
-
// All states in a row
|
|
239
|
-
exports.Clickable = Clickable;
|
|
240
|
-
const AllStatesInRow = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
241
|
-
style: {
|
|
242
|
-
display: 'flex',
|
|
243
|
-
flexWrap: 'wrap',
|
|
244
|
-
gap: '12px'
|
|
245
|
-
}
|
|
246
|
-
}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
247
|
-
variant: "pending",
|
|
248
|
-
text: "Pending"
|
|
249
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
250
|
-
variant: "initiated",
|
|
251
|
-
text: "Initiated"
|
|
252
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
253
|
-
variant: "confirmed",
|
|
254
|
-
text: "Confirmed"
|
|
255
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
256
|
-
variant: "declined",
|
|
257
|
-
text: "Declined"
|
|
258
|
-
}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
|
|
259
|
-
variant: "paid",
|
|
260
|
-
text: "Paid"
|
|
261
|
-
})));
|
|
262
|
-
exports.AllStatesInRow = AllStatesInRow;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.SCTouched1Done0 = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _StepController = require("./StepController");
|
|
9
|
-
var _SvgIcons = require("../SvgIcons");
|
|
10
|
-
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'Components Library/StepController/Stepcontroller',
|
|
14
|
-
component: _StepController.StepController,
|
|
15
|
-
argTypes: {
|
|
16
|
-
children: {
|
|
17
|
-
type: 'node',
|
|
18
|
-
defaultValue: [],
|
|
19
|
-
required: true
|
|
20
|
-
},
|
|
21
|
-
stepsProgressList: {
|
|
22
|
-
type: 'node',
|
|
23
|
-
defaultValue: [],
|
|
24
|
-
required: true
|
|
25
|
-
},
|
|
26
|
-
currentStep: {
|
|
27
|
-
type: 'string',
|
|
28
|
-
defaultValue: '',
|
|
29
|
-
required: true
|
|
30
|
-
},
|
|
31
|
-
activeStepIndex: {
|
|
32
|
-
type: 'number',
|
|
33
|
-
defaultValue: 1,
|
|
34
|
-
required: true
|
|
35
|
-
},
|
|
36
|
-
touchedStepsIndexes: {
|
|
37
|
-
type: 'array of numbers',
|
|
38
|
-
defaultValue: []
|
|
39
|
-
},
|
|
40
|
-
doneStepsIndexes: {
|
|
41
|
-
type: 'array of numbers',
|
|
42
|
-
defaultValue: []
|
|
43
|
-
},
|
|
44
|
-
changeStep: {
|
|
45
|
-
type: 'function',
|
|
46
|
-
action: 'changeStep'
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_StepController.StepController, args));
|
|
51
|
-
const SCTouched1Done0 = exports.SCTouched1Done0 = Template.bind({});
|
|
52
|
-
SCTouched1Done0.args = {
|
|
53
|
-
children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
|
|
54
|
-
stepsProgressList: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
|
|
55
|
-
touchedStepsIndexes: [1],
|
|
56
|
-
doneStepsIndexes: [0]
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
//doublecheck:
|
|
60
|
-
// no story for StepControllerContext. varying export names
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.SCPTouched2Done2 = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _StepControllerProgress = require("./StepControllerProgress");
|
|
9
|
-
var _SvgIcons = require("../SvgIcons");
|
|
10
|
-
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'Components Library/StepController/StepControllerProgress',
|
|
14
|
-
component: _StepControllerProgress.StepControllerProgress,
|
|
15
|
-
argTypes: {
|
|
16
|
-
stepsProgressList: {
|
|
17
|
-
type: 'node',
|
|
18
|
-
defaultValue: [],
|
|
19
|
-
required: true
|
|
20
|
-
},
|
|
21
|
-
activeStepIndex: {
|
|
22
|
-
type: 'number',
|
|
23
|
-
defaultValue: 1,
|
|
24
|
-
required: true
|
|
25
|
-
},
|
|
26
|
-
touchedStepsIndexes: {
|
|
27
|
-
type: 'array of numbers',
|
|
28
|
-
defaultValue: []
|
|
29
|
-
},
|
|
30
|
-
doneStepsIndexes: {
|
|
31
|
-
type: 'array of numbers',
|
|
32
|
-
defaultValue: []
|
|
33
|
-
},
|
|
34
|
-
handleItemClick: {
|
|
35
|
-
type: 'function',
|
|
36
|
-
action: 'handleItemClick'
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_StepControllerProgress.StepControllerProgress, args));
|
|
41
|
-
const SCPTouched2Done2 = exports.SCPTouched2Done2 = Template.bind({});
|
|
42
|
-
SCPTouched2Done2.args = {
|
|
43
|
-
stepsProgressList: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
|
|
44
|
-
touchedStepsIndexes: [2],
|
|
45
|
-
doneStepsIndexes: [2]
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
//doublecheck:
|
|
49
|
-
// no story for StepControllerContext bc of varying export names
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.WithoutLabels = exports.SecondStep = exports.ManySteps = exports.LastStep = exports.Interactive = exports.Default = exports.CustomMargin = exports.AllCompleted = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _StepIndicator = _interopRequireDefault(require("./StepIndicator"));
|
|
9
|
-
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
|
|
10
|
-
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
-
var _default = exports.default = {
|
|
14
|
-
title: 'Components Library/StepIndicator',
|
|
15
|
-
component: _StepIndicator.default,
|
|
16
|
-
decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
|
|
17
|
-
argTypes: {
|
|
18
|
-
currentStep: {
|
|
19
|
-
control: {
|
|
20
|
-
type: 'number',
|
|
21
|
-
min: 0,
|
|
22
|
-
max: 3
|
|
23
|
-
},
|
|
24
|
-
description: 'Current active step (0-indexed)'
|
|
25
|
-
},
|
|
26
|
-
showLabels: {
|
|
27
|
-
control: 'boolean',
|
|
28
|
-
description: 'Show or hide step labels'
|
|
29
|
-
},
|
|
30
|
-
marginBottom: {
|
|
31
|
-
control: 'text',
|
|
32
|
-
description: 'Bottom margin of the component'
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const sampleSteps = [{
|
|
37
|
-
id: 'step1',
|
|
38
|
-
label: 'Details'
|
|
39
|
-
}, {
|
|
40
|
-
id: 'step2',
|
|
41
|
-
label: 'Review'
|
|
42
|
-
}, {
|
|
43
|
-
id: 'step3',
|
|
44
|
-
label: 'Confirm'
|
|
45
|
-
}];
|
|
46
|
-
|
|
47
|
-
// Default - first step active
|
|
48
|
-
const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
49
|
-
steps: sampleSteps,
|
|
50
|
-
currentStep: 0
|
|
51
|
-
}));
|
|
52
|
-
|
|
53
|
-
// Second step active (first completed)
|
|
54
|
-
exports.Default = Default;
|
|
55
|
-
const SecondStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
56
|
-
steps: sampleSteps,
|
|
57
|
-
currentStep: 1
|
|
58
|
-
}));
|
|
59
|
-
|
|
60
|
-
// Last step active (all previous completed)
|
|
61
|
-
exports.SecondStep = SecondStep;
|
|
62
|
-
const LastStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
63
|
-
steps: sampleSteps,
|
|
64
|
-
currentStep: 2
|
|
65
|
-
}));
|
|
66
|
-
|
|
67
|
-
// All steps completed
|
|
68
|
-
exports.LastStep = LastStep;
|
|
69
|
-
const AllCompleted = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
70
|
-
steps: sampleSteps,
|
|
71
|
-
currentStep: 3
|
|
72
|
-
}));
|
|
73
|
-
|
|
74
|
-
// Interactive example
|
|
75
|
-
exports.AllCompleted = AllCompleted;
|
|
76
|
-
const Interactive = () => {
|
|
77
|
-
const [currentStep, setCurrentStep] = (0, _react.useState)(0);
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
79
|
-
steps: sampleSteps,
|
|
80
|
-
currentStep: currentStep,
|
|
81
|
-
onStepClick: index => setCurrentStep(index)
|
|
82
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
83
|
-
style: {
|
|
84
|
-
marginTop: '24px'
|
|
85
|
-
}
|
|
86
|
-
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
87
|
-
onClick: () => setCurrentStep(prev => Math.max(0, prev - 1)),
|
|
88
|
-
disabled: currentStep === 0,
|
|
89
|
-
style: {
|
|
90
|
-
marginRight: '8px',
|
|
91
|
-
padding: '8px 16px'
|
|
92
|
-
}
|
|
93
|
-
}, "Previous"), /*#__PURE__*/_react.default.createElement("button", {
|
|
94
|
-
onClick: () => setCurrentStep(prev => Math.min(sampleSteps.length, prev + 1)),
|
|
95
|
-
disabled: currentStep >= sampleSteps.length,
|
|
96
|
-
style: {
|
|
97
|
-
padding: '8px 16px'
|
|
98
|
-
}
|
|
99
|
-
}, "Next")), /*#__PURE__*/_react.default.createElement("p", {
|
|
100
|
-
style: {
|
|
101
|
-
marginTop: '16px',
|
|
102
|
-
fontSize: '14px',
|
|
103
|
-
color: '#666'
|
|
104
|
-
}
|
|
105
|
-
}, "Current step: ", currentStep, " (click on steps to navigate)"));
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
// Without labels
|
|
109
|
-
exports.Interactive = Interactive;
|
|
110
|
-
const WithoutLabels = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
111
|
-
steps: sampleSteps,
|
|
112
|
-
currentStep: 1,
|
|
113
|
-
showLabels: false
|
|
114
|
-
}));
|
|
115
|
-
|
|
116
|
-
// More steps
|
|
117
|
-
exports.WithoutLabels = WithoutLabels;
|
|
118
|
-
const ManySteps = () => {
|
|
119
|
-
const manySteps = [{
|
|
120
|
-
id: 'step1',
|
|
121
|
-
label: 'Account'
|
|
122
|
-
}, {
|
|
123
|
-
id: 'step2',
|
|
124
|
-
label: 'Personal'
|
|
125
|
-
}, {
|
|
126
|
-
id: 'step3',
|
|
127
|
-
label: 'Documents'
|
|
128
|
-
}, {
|
|
129
|
-
id: 'step4',
|
|
130
|
-
label: 'Review'
|
|
131
|
-
}, {
|
|
132
|
-
id: 'step5',
|
|
133
|
-
label: 'Complete'
|
|
134
|
-
}];
|
|
135
|
-
return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
136
|
-
steps: manySteps,
|
|
137
|
-
currentStep: 2
|
|
138
|
-
}));
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
// Custom margin
|
|
142
|
-
exports.ManySteps = ManySteps;
|
|
143
|
-
const CustomMargin = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
|
|
144
|
-
steps: sampleSteps,
|
|
145
|
-
currentStep: 1,
|
|
146
|
-
marginBottom: "0"
|
|
147
|
-
}), /*#__PURE__*/_react.default.createElement("p", {
|
|
148
|
-
style: {
|
|
149
|
-
margin: 0,
|
|
150
|
-
fontSize: '14px'
|
|
151
|
-
}
|
|
152
|
-
}, "Content immediately below (no margin)"));
|
|
153
|
-
exports.CustomMargin = CustomMargin;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.stepsProgress = exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _StepsProgress = require("./StepsProgress");
|
|
9
|
-
var _AuthContext = require("../../context/AuthContext");
|
|
10
|
-
var _reactRouterDom = require("react-router-dom");
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
//import { withKnobs, select, boolean, array } from '@storybook/addon-knobs'
|
|
13
|
-
var _default = exports.default = {
|
|
14
|
-
title: 'Components Library/Steps Progress',
|
|
15
|
-
component: _StepsProgress.StepsProgress
|
|
16
|
-
//decorators: [withKnobs],
|
|
17
|
-
}; //maybe change to args
|
|
18
|
-
|
|
19
|
-
const stepsProgress = () => /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_StepsProgress.StepsProgress, {
|
|
20
|
-
user: {
|
|
21
|
-
//country: select('country', ['', 'Austria', 'Brazil']),
|
|
22
|
-
// kyc_status: select('kyc_status', [
|
|
23
|
-
// '',
|
|
24
|
-
// 'Draft',
|
|
25
|
-
// 'Pending',
|
|
26
|
-
// 'Approved',
|
|
27
|
-
// 'Accepted',
|
|
28
|
-
// 'Rejected',
|
|
29
|
-
// 'Denied',
|
|
30
|
-
// 'Escalated',
|
|
31
|
-
// 'In progress',
|
|
32
|
-
// 'Reapply',
|
|
33
|
-
// ]),
|
|
34
|
-
// KYCDocuments: {
|
|
35
|
-
// status: select('KYCDocuments', [
|
|
36
|
-
// '',
|
|
37
|
-
// 'Pending',
|
|
38
|
-
// 'Approved',
|
|
39
|
-
// 'Rejected',
|
|
40
|
-
// ]),
|
|
41
|
-
// },
|
|
42
|
-
// entity_name: select('entity_name', ['', 'Some entity name']),
|
|
43
|
-
// investor_eth_addresses: array('investor_eth_addresses', []),
|
|
44
|
-
// is_risk_questionnaire_finished: boolean(
|
|
45
|
-
// 'is_risk_questionnaire_finished',
|
|
46
|
-
// ),
|
|
47
|
-
}
|
|
48
|
-
})));
|
|
49
|
-
exports.stepsProgress = stepsProgress;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.SwitchMobile = exports.SwitchDefault = exports.SwitchDark = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _Switch = _interopRequireDefault(require("./Switch"));
|
|
9
|
-
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
|
|
10
|
-
var _viewport = require("storybook/viewport");
|
|
11
|
-
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
12
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
var _default = exports.default = {
|
|
14
|
-
title: 'Components Library/Switch',
|
|
15
|
-
component: _Switch.default,
|
|
16
|
-
argTypes: {
|
|
17
|
-
value: {
|
|
18
|
-
type: 'string',
|
|
19
|
-
required: true
|
|
20
|
-
},
|
|
21
|
-
value1: {
|
|
22
|
-
type: 'string',
|
|
23
|
-
required: true
|
|
24
|
-
},
|
|
25
|
-
value2: {
|
|
26
|
-
type: 'string',
|
|
27
|
-
required: true
|
|
28
|
-
},
|
|
29
|
-
handleChange: {
|
|
30
|
-
type: 'function',
|
|
31
|
-
required: true,
|
|
32
|
-
action: 'handleChange'
|
|
33
|
-
},
|
|
34
|
-
mobile: {
|
|
35
|
-
type: 'boolean',
|
|
36
|
-
defaultValue: false
|
|
37
|
-
},
|
|
38
|
-
dark: {
|
|
39
|
-
type: 'boolean',
|
|
40
|
-
defaultValue: false
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
parameters: {
|
|
44
|
-
viewport: {
|
|
45
|
-
viewports: _viewport.INITIAL_VIEWPORTS,
|
|
46
|
-
defaultViewport: 'reset viewport'
|
|
47
|
-
},
|
|
48
|
-
backgrounds: {
|
|
49
|
-
default: ''
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Switch.default, args)));
|
|
54
|
-
const SwitchDefault = exports.SwitchDefault = Template.bind({});
|
|
55
|
-
SwitchDefault.args = {};
|
|
56
|
-
const SwitchDark = exports.SwitchDark = Template.bind({});
|
|
57
|
-
SwitchDark.args = {
|
|
58
|
-
value: 'Initial Value',
|
|
59
|
-
value1: 'Click on Value 1',
|
|
60
|
-
value2: 'Click on Value 2',
|
|
61
|
-
dark: true
|
|
62
|
-
};
|
|
63
|
-
SwitchDark.parameters = {
|
|
64
|
-
backgrounds: {
|
|
65
|
-
default: 'black'
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
const SwitchMobile = exports.SwitchMobile = Template.bind({});
|
|
69
|
-
SwitchMobile.args = {
|
|
70
|
-
value: 'Initial Value',
|
|
71
|
-
value1: 'Click on Value 1',
|
|
72
|
-
value2: 'Click on Value 2',
|
|
73
|
-
mobile: true
|
|
74
|
-
};
|
|
75
|
-
SwitchMobile.parameters = {
|
|
76
|
-
viewport: {
|
|
77
|
-
defaultViewport: 'iphonexsmax'
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
//now stories automatically changing to dark and mobile situatons
|