@transferwise/components 46.50.0 → 46.50.1
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/build/stepper/Stepper.js +5 -2
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +5 -2
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/types/stepper/Stepper.d.ts +4 -0
- package/build/types/stepper/Stepper.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +4 -4
- package/src/stepper/Stepper.less +2 -2
- package/src/stepper/Stepper.story.tsx +49 -0
- package/src/stepper/Stepper.tsx +7 -3
- package/src/stepper/Stepper.story.js +0 -40
package/build/stepper/Stepper.js
CHANGED
|
@@ -15,7 +15,10 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
|
15
15
|
function clamp(from, to, value) {
|
|
16
16
|
return Math.max(Math.min(to, value), from);
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
/**
|
|
19
|
+
* This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
|
|
20
|
+
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
21
|
+
*/
|
|
19
22
|
const Stepper = ({
|
|
20
23
|
steps,
|
|
21
24
|
activeStep = 0,
|
|
@@ -69,7 +72,7 @@ const Stepper = ({
|
|
|
69
72
|
width: `${percentageCompleted * 100}%`
|
|
70
73
|
}
|
|
71
74
|
})
|
|
72
|
-
}), /*#__PURE__*/jsxRuntime.jsx("
|
|
75
|
+
}), /*#__PURE__*/jsxRuntime.jsx("ol", {
|
|
73
76
|
className: "tw-stepper-steps p-t-1 m-b-0",
|
|
74
77
|
children: steps.map(renderStep)
|
|
75
78
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n}\n\n
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={classNames(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={classNames('tw-stepper', className)}>\n <div className=\"progress\">\n <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n </div>\n\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","classNames","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
|
|
@@ -9,7 +9,10 @@ import { Position } from '../common/propsValues/position.mjs';
|
|
|
9
9
|
function clamp(from, to, value) {
|
|
10
10
|
return Math.max(Math.min(to, value), from);
|
|
11
11
|
}
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
|
|
14
|
+
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
15
|
+
*/
|
|
13
16
|
const Stepper = ({
|
|
14
17
|
steps,
|
|
15
18
|
activeStep = 0,
|
|
@@ -63,7 +66,7 @@ const Stepper = ({
|
|
|
63
66
|
width: `${percentageCompleted * 100}%`
|
|
64
67
|
}
|
|
65
68
|
})
|
|
66
|
-
}), /*#__PURE__*/jsx("
|
|
69
|
+
}), /*#__PURE__*/jsx("ol", {
|
|
67
70
|
className: "tw-stepper-steps p-t-1 m-b-0",
|
|
68
71
|
children: steps.map(renderStep)
|
|
69
72
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n}\n\n
|
|
1
|
+
{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n label: React.ReactNode;\n onClick?: () => void;\n hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n steps: readonly Step[];\n activeStep?: number;\n className?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {\n const { isRTL } = useDirection();\n\n if (steps.length === 0) {\n return null;\n }\n\n const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n const stepPercentage = 1 / (steps.length - 1);\n const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n const renderStep = (step: Step, index: number) => {\n const active = index === activeStepIndex;\n const clickable = step.onClick && !active;\n\n const labelButton = clickable ? (\n <button\n type=\"button\"\n className=\"btn-unstyled tw-stepper__step-label\"\n onClick={() => clickable && step.onClick?.()}\n >\n <small>{step.label}</small>\n </button>\n ) : (\n <span className=\"tw-stepper__step-label\">{step.label}</span>\n );\n\n return (\n <li\n key={index}\n className={classNames(\n 'hidden-xs',\n 'tw-stepper__step',\n active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n clickable && 'tw-stepper__step--clickable',\n step.hoverLabel && 'tw-stepper__step--has-tooltip',\n )}\n aria-current={active ? 'step' : false}\n style={\n isRTL\n ? { right: `${index * stepPercentage * 100}%` }\n : { left: `${index * stepPercentage * 100}%` }\n }\n >\n {step.hoverLabel && !isTouchDevice() ? (\n <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n {labelButton}\n </Tooltip>\n ) : (\n labelButton\n )}\n </li>\n );\n };\n\n return (\n <div className={classNames('tw-stepper', className)}>\n <div className=\"progress\">\n <div className=\"progress-bar\" style={{ width: `${percentageCompleted * 100}%` }} />\n </div>\n\n <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n </div>\n );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","classNames","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
|
|
@@ -9,6 +9,10 @@ export interface StepperProps {
|
|
|
9
9
|
activeStep?: number;
|
|
10
10
|
className?: string;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
|
|
14
|
+
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
15
|
+
*/
|
|
12
16
|
declare const Stepper: ({ steps, activeStep, className }: StepperProps) => React.JSX.Element | null;
|
|
13
17
|
export default Stepper;
|
|
14
18
|
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,qCAA0C,YAAY,6BAgElE,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.50.
|
|
3
|
+
"version": "46.50.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
95
|
"@transferwise/less-config": "3.1.0",
|
|
96
|
-
"@
|
|
97
|
-
"@
|
|
96
|
+
"@wise/components-theming": "1.4.0",
|
|
97
|
+
"@transferwise/neptune-css": "14.12.1"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
|
@@ -71,7 +71,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
71
71
|
style="width: 50%;"
|
|
72
72
|
/>
|
|
73
73
|
</div>
|
|
74
|
-
<
|
|
74
|
+
<ol
|
|
75
75
|
class="tw-stepper-steps p-t-1 m-b-0"
|
|
76
76
|
>
|
|
77
77
|
<li
|
|
@@ -107,7 +107,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
107
107
|
label-2
|
|
108
108
|
</span>
|
|
109
109
|
</li>
|
|
110
|
-
</
|
|
110
|
+
</ol>
|
|
111
111
|
</div>
|
|
112
112
|
</div>
|
|
113
113
|
</div>
|
|
@@ -187,7 +187,7 @@ exports[`FlowNavigation renders as expected 1`] = `
|
|
|
187
187
|
style="width: 0%;"
|
|
188
188
|
/>
|
|
189
189
|
</div>
|
|
190
|
-
<
|
|
190
|
+
<ol
|
|
191
191
|
class="tw-stepper-steps p-t-1 m-b-0"
|
|
192
192
|
>
|
|
193
193
|
<li
|
|
@@ -223,7 +223,7 @@ exports[`FlowNavigation renders as expected 1`] = `
|
|
|
223
223
|
label-2
|
|
224
224
|
</span>
|
|
225
225
|
</li>
|
|
226
|
-
</
|
|
226
|
+
</ol>
|
|
227
227
|
</div>
|
|
228
228
|
</div>
|
|
229
229
|
</div>
|
package/src/stepper/Stepper.less
CHANGED
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
|
|
80
80
|
.progress-bar {
|
|
81
81
|
.float(left);
|
|
82
|
-
|
|
82
|
+
|
|
83
83
|
-webkit-backface-visibility: hidden;
|
|
84
84
|
height: 100%;
|
|
85
85
|
background-color: var(--color-interactive-primary);
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
border-bottom-left-radius: 1px;
|
|
88
88
|
transition: width 0.6s ease-in-out;
|
|
89
89
|
will-change: width;
|
|
90
|
-
|
|
90
|
+
|
|
91
91
|
&::after {
|
|
92
92
|
.float(right);
|
|
93
93
|
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { fn } from '@storybook/test';
|
|
3
|
+
import Stepper from './Stepper';
|
|
4
|
+
|
|
5
|
+
const STEPS = [
|
|
6
|
+
{
|
|
7
|
+
label: 'One',
|
|
8
|
+
onClick: fn(),
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: 'Two',
|
|
12
|
+
hoverLabel: (
|
|
13
|
+
<>
|
|
14
|
+
<div>
|
|
15
|
+
<strong>Diana Jaramillo</strong>
|
|
16
|
+
</div>
|
|
17
|
+
dianajarm123@gmail.com
|
|
18
|
+
</>
|
|
19
|
+
),
|
|
20
|
+
onClick: fn(),
|
|
21
|
+
},
|
|
22
|
+
{ label: 'Recipient', onClick: fn() },
|
|
23
|
+
{ label: 'Smellification', onClick: fn() },
|
|
24
|
+
{ label: 'Battle', onClick: fn() },
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
component: Stepper,
|
|
29
|
+
title: 'Navigation/Stepper',
|
|
30
|
+
argTypes: {
|
|
31
|
+
activeStep: {
|
|
32
|
+
control: 'radio',
|
|
33
|
+
options: [...Array(STEPS.length).keys()],
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
tags: ['autodocs'],
|
|
37
|
+
} satisfies Meta<typeof Stepper>;
|
|
38
|
+
|
|
39
|
+
type Story = StoryObj<typeof Stepper>;
|
|
40
|
+
|
|
41
|
+
export const Basic: Story = {
|
|
42
|
+
render: ({ activeStep, steps }) => {
|
|
43
|
+
return <Stepper activeStep={activeStep} steps={steps} />;
|
|
44
|
+
},
|
|
45
|
+
args: {
|
|
46
|
+
activeStep: 2,
|
|
47
|
+
steps: STEPS,
|
|
48
|
+
},
|
|
49
|
+
};
|
package/src/stepper/Stepper.tsx
CHANGED
|
@@ -23,7 +23,10 @@ export interface StepperProps {
|
|
|
23
23
|
className?: string;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
|
|
28
|
+
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
29
|
+
*/
|
|
27
30
|
const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
28
31
|
const { isRTL } = useDirection();
|
|
29
32
|
|
|
@@ -50,6 +53,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
|
50
53
|
) : (
|
|
51
54
|
<span className="tw-stepper__step-label">{step.label}</span>
|
|
52
55
|
);
|
|
56
|
+
|
|
53
57
|
return (
|
|
54
58
|
<li
|
|
55
59
|
key={index}
|
|
@@ -83,10 +87,10 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
|
83
87
|
<div className="progress">
|
|
84
88
|
<div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
|
|
85
89
|
</div>
|
|
86
|
-
|
|
90
|
+
|
|
91
|
+
<ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
|
|
87
92
|
</div>
|
|
88
93
|
);
|
|
89
94
|
};
|
|
90
|
-
/* eslint-enable react/no-array-index-key */
|
|
91
95
|
|
|
92
96
|
export default Stepper;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { action } from '@storybook/addon-actions';
|
|
2
|
-
import { select } from '@storybook/addon-knobs';
|
|
3
|
-
|
|
4
|
-
import Stepper from './Stepper';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
component: Stepper,
|
|
8
|
-
title: 'Navigation/Stepper',
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const Basic = () => {
|
|
12
|
-
const activeStep = select('activeStep', [0, 1, 2, 3, 4], 0);
|
|
13
|
-
return (
|
|
14
|
-
<Stepper
|
|
15
|
-
activeStep={activeStep}
|
|
16
|
-
steps={[
|
|
17
|
-
{
|
|
18
|
-
label: 'One',
|
|
19
|
-
onClick() {
|
|
20
|
-
action('You clicked on step 1, which triggered this function, which alerted you.');
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
label: 'Two',
|
|
25
|
-
hoverLabel: (
|
|
26
|
-
<>
|
|
27
|
-
<div>
|
|
28
|
-
<strong>Diana Jaramillo</strong>
|
|
29
|
-
</div>
|
|
30
|
-
dianajarm123@gmail.com
|
|
31
|
-
</>
|
|
32
|
-
),
|
|
33
|
-
},
|
|
34
|
-
{ label: 'Recipient' },
|
|
35
|
-
{ label: 'Smellification' },
|
|
36
|
-
{ label: 'Battle' },
|
|
37
|
-
]}
|
|
38
|
-
/>
|
|
39
|
-
);
|
|
40
|
-
};
|