@transferwise/components 0.0.0-experimental-db4ed13 → 0.0.0-experimental-3c4742d

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.
Files changed (37) hide show
  1. package/build/i18n/es.json +1 -0
  2. package/build/i18n/es.json.js +1 -0
  3. package/build/i18n/es.json.js.map +1 -1
  4. package/build/i18n/es.json.mjs +1 -0
  5. package/build/i18n/es.json.mjs.map +1 -1
  6. package/build/i18n/fr.json +6 -5
  7. package/build/i18n/fr.json.js +6 -5
  8. package/build/i18n/fr.json.js.map +1 -1
  9. package/build/i18n/fr.json.mjs +6 -5
  10. package/build/i18n/fr.json.mjs.map +1 -1
  11. package/build/i18n/id.json +1 -0
  12. package/build/i18n/id.json.js +1 -0
  13. package/build/i18n/id.json.js.map +1 -1
  14. package/build/i18n/id.json.mjs +1 -0
  15. package/build/i18n/id.json.mjs.map +1 -1
  16. package/build/i18n/ro.json +1 -0
  17. package/build/i18n/ro.json.js +1 -0
  18. package/build/i18n/ro.json.js.map +1 -1
  19. package/build/i18n/ro.json.mjs +1 -0
  20. package/build/i18n/ro.json.mjs.map +1 -1
  21. package/build/stepper/Stepper.js +3 -6
  22. package/build/stepper/Stepper.js.map +1 -1
  23. package/build/stepper/Stepper.mjs +3 -6
  24. package/build/stepper/Stepper.mjs.map +1 -1
  25. package/build/types/stepper/Stepper.d.ts +1 -2
  26. package/build/types/stepper/Stepper.d.ts.map +1 -1
  27. package/package.json +3 -3
  28. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -3
  29. package/src/i18n/es.json +1 -0
  30. package/src/i18n/fr.json +6 -5
  31. package/src/i18n/id.json +1 -0
  32. package/src/i18n/ro.json +1 -0
  33. package/src/stepper/Stepper.spec.js +233 -0
  34. package/src/stepper/Stepper.tsx +4 -9
  35. package/src/stepper/{deviceDetection.spec.ts → deviceDetection.spec.js} +3 -6
  36. package/src/stepper/Stepper.spec.story.tsx +0 -89
  37. package/src/stepper/Stepper.spec.tsx +0 -236
package/build/i18n/es.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
55
55
  "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
57
58
  "neptune.UploadButton.uploadFile": "Subir archivo",
58
59
  "neptune.UploadButton.uploadFiles": "Subir archivos",
59
60
  "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",
package/build/i18n/es.json.js CHANGED
@@ -56,6 +56,7 @@ var es = {
56
56
  "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
57
57
  "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
59
+ "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
59
60
  "neptune.UploadButton.uploadFile": "Subir archivo",
60
61
  "neptune.UploadButton.uploadFiles": "Subir archivos",
61
62
  "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",
package/build/i18n/es.json.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"es.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/es.json.mjs CHANGED
@@ -54,6 +54,7 @@ var es = {
54
54
  "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
55
55
  "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
57
58
  "neptune.UploadButton.uploadFile": "Subir archivo",
58
59
  "neptune.UploadButton.uploadFiles": "Subir archivos",
59
60
  "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",
package/build/i18n/es.json.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"es.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/fr.json CHANGED
@@ -27,11 +27,11 @@
27
27
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
28
28
  "neptune.SelectOption.action.label": "Sélectionner",
29
29
  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
30
- "neptune.StatusIcon.iconLabel.error": "Erreur:",
31
- "neptune.StatusIcon.iconLabel.information": "Informations:",
30
+ "neptune.StatusIcon.iconLabel.error": "Erreur :",
31
+ "neptune.StatusIcon.iconLabel.information": "Informations :",
32
32
  "neptune.StatusIcon.iconLabel.pending": "En attente :",
33
- "neptune.StatusIcon.iconLabel.success": "Terminé:",
34
- "neptune.StatusIcon.iconLabel.warning": "Attention:",
33
+ "neptune.StatusIcon.iconLabel.success": "Terminé :",
34
+ "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
35
35
  "neptune.Summary.statusDone": "Validé",
36
36
  "neptune.Summary.statusNotDone": "À compléter",
37
37
  "neptune.Summary.statusPending": "En attente",
@@ -47,13 +47,14 @@
47
47
  "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
48
48
  "neptune.Upload.psButtonText": "Annuler",
49
49
  "neptune.Upload.psProcessingText": "Téléchargement...",
50
- "neptune.Upload.retry": "Réessayez",
50
+ "neptune.Upload.retry": "Réessayer",
51
51
  "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
52
52
  "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
53
53
  "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
54
54
  "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
55
55
  "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
57
+ "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
57
58
  "neptune.UploadButton.uploadFile": "Envoyer le fichier",
58
59
  "neptune.UploadButton.uploadFiles": "Transférer des documents",
59
60
  "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",
package/build/i18n/fr.json.js CHANGED
@@ -29,11 +29,11 @@ var fr = {
29
29
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
30
30
  "neptune.SelectOption.action.label": "Sélectionner",
31
31
  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
32
- "neptune.StatusIcon.iconLabel.error": "Erreur:",
33
- "neptune.StatusIcon.iconLabel.information": "Informations:",
32
+ "neptune.StatusIcon.iconLabel.error": "Erreur :",
33
+ "neptune.StatusIcon.iconLabel.information": "Informations :",
34
34
  "neptune.StatusIcon.iconLabel.pending": "En attente :",
35
- "neptune.StatusIcon.iconLabel.success": "Terminé:",
36
- "neptune.StatusIcon.iconLabel.warning": "Attention:",
35
+ "neptune.StatusIcon.iconLabel.success": "Terminé :",
36
+ "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
37
37
  "neptune.Summary.statusDone": "Validé",
38
38
  "neptune.Summary.statusNotDone": "À compléter",
39
39
  "neptune.Summary.statusPending": "En attente",
@@ -49,13 +49,14 @@ var fr = {
49
49
  "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
50
50
  "neptune.Upload.psButtonText": "Annuler",
51
51
  "neptune.Upload.psProcessingText": "Téléchargement...",
52
- "neptune.Upload.retry": "Réessayez",
52
+ "neptune.Upload.retry": "Réessayer",
53
53
  "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
54
54
  "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
55
55
  "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
56
56
  "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
57
57
  "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
59
+ "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
59
60
  "neptune.UploadButton.uploadFile": "Envoyer le fichier",
60
61
  "neptune.UploadButton.uploadFiles": "Transférer des documents",
61
62
  "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",
package/build/i18n/fr.json.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/fr.json.mjs CHANGED
@@ -27,11 +27,11 @@ var fr = {
27
27
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
28
28
  "neptune.SelectOption.action.label": "Sélectionner",
29
29
  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
30
- "neptune.StatusIcon.iconLabel.error": "Erreur:",
31
- "neptune.StatusIcon.iconLabel.information": "Informations:",
30
+ "neptune.StatusIcon.iconLabel.error": "Erreur :",
31
+ "neptune.StatusIcon.iconLabel.information": "Informations :",
32
32
  "neptune.StatusIcon.iconLabel.pending": "En attente :",
33
- "neptune.StatusIcon.iconLabel.success": "Terminé:",
34
- "neptune.StatusIcon.iconLabel.warning": "Attention:",
33
+ "neptune.StatusIcon.iconLabel.success": "Terminé :",
34
+ "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
35
35
  "neptune.Summary.statusDone": "Validé",
36
36
  "neptune.Summary.statusNotDone": "À compléter",
37
37
  "neptune.Summary.statusPending": "En attente",
@@ -47,13 +47,14 @@ var fr = {
47
47
  "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
48
48
  "neptune.Upload.psButtonText": "Annuler",
49
49
  "neptune.Upload.psProcessingText": "Téléchargement...",
50
- "neptune.Upload.retry": "Réessayez",
50
+ "neptune.Upload.retry": "Réessayer",
51
51
  "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
52
52
  "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
53
53
  "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
54
54
  "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
55
55
  "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
57
+ "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
57
58
  "neptune.UploadButton.uploadFile": "Envoyer le fichier",
58
59
  "neptune.UploadButton.uploadFiles": "Transférer des documents",
59
60
  "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",
package/build/i18n/fr.json.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/id.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Semua jenis file",
55
55
  "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
57
58
  "neptune.UploadButton.uploadFile": "Unggah file",
58
59
  "neptune.UploadButton.uploadFiles": "Unggah file",
59
60
  "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",
package/build/i18n/id.json.js CHANGED
@@ -56,6 +56,7 @@ var id = {
56
56
  "neptune.UploadButton.allFileTypes": "Semua jenis file",
57
57
  "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
59
+ "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
59
60
  "neptune.UploadButton.uploadFile": "Unggah file",
60
61
  "neptune.UploadButton.uploadFiles": "Unggah file",
61
62
  "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",
package/build/i18n/id.json.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"id.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/id.json.mjs CHANGED
@@ -54,6 +54,7 @@ var id = {
54
54
  "neptune.UploadButton.allFileTypes": "Semua jenis file",
55
55
  "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
57
58
  "neptune.UploadButton.uploadFile": "Unggah file",
58
59
  "neptune.UploadButton.uploadFiles": "Unggah file",
59
60
  "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",
package/build/i18n/id.json.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"id.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/ro.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
55
55
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
57
58
  "neptune.UploadButton.uploadFile": "Încarcă fișier",
58
59
  "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
59
60
  "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",
package/build/i18n/ro.json.js CHANGED
@@ -56,6 +56,7 @@ var ro = {
56
56
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
57
57
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
59
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
59
60
  "neptune.UploadButton.uploadFile": "Încarcă fișier",
60
61
  "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
61
62
  "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",
package/build/i18n/ro.json.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ro.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ro.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/ro.json.mjs CHANGED
@@ -54,6 +54,7 @@ var ro = {
54
54
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
55
55
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
57
58
  "neptune.UploadButton.uploadFile": "Încarcă fișier",
58
59
  "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
59
60
  "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",
package/build/i18n/ro.json.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ro.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ro.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/stepper/Stepper.js CHANGED
@@ -40,8 +40,7 @@ function clamp(from, to, value) {
40
40
  const Stepper = ({
41
41
  steps,
42
42
  activeStep = 0,
43
- className,
44
- testId
43
+ className
45
44
  }) => {
46
45
  const {
47
46
  isRTL
@@ -54,7 +53,7 @@ const Stepper = ({
54
53
  const percentageCompleted = activeStepIndex / (steps.length - 1);
55
54
  const getProgressWidth = () => {
56
55
  if (percentageCompleted === 0) {
57
- return '0%';
56
+ return '0px';
58
57
  }
59
58
  /**
60
59
  * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
@@ -94,15 +93,13 @@ const Stepper = ({
94
93
  };
95
94
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
96
95
  className: clsx.clsx('tw-stepper', className),
97
- "data-testid": testId,
98
96
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
99
97
  className: "progress",
100
98
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
101
99
  className: "progress-bar",
102
100
  style: {
103
101
  width: getProgressWidth()
104
- },
105
- "data-testid": "progress-bar"
102
+ }
106
103
  })
107
104
  }), /*#__PURE__*/jsxRuntime.jsx("ol", {
108
105
  className: "tw-stepper-steps p-t-1 m-b-0",
package/build/stepper/Stepper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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 testId?: 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, testId }: 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 getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /**\n * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n */\n return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\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={clsx(\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={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\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","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
1
+ {"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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 getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0px';\n }\n /**\n * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n */\n return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\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={clsx(\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={clsx('tw-stepper', className)}>\n <div className=\"progress\">\n <div className=\"progress-bar\" style={{ width: getProgressWidth() }} />\n </div>\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","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
package/build/stepper/Stepper.mjs CHANGED
@@ -38,8 +38,7 @@ function clamp(from, to, value) {
38
38
  const Stepper = ({
39
39
  steps,
40
40
  activeStep = 0,
41
- className,
42
- testId
41
+ className
43
42
  }) => {
44
43
  const {
45
44
  isRTL
@@ -52,7 +51,7 @@ const Stepper = ({
52
51
  const percentageCompleted = activeStepIndex / (steps.length - 1);
53
52
  const getProgressWidth = () => {
54
53
  if (percentageCompleted === 0) {
55
- return '0%';
54
+ return '0px';
56
55
  }
57
56
  /**
58
57
  * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
@@ -92,15 +91,13 @@ const Stepper = ({
92
91
  };
93
92
  return /*#__PURE__*/jsxs("div", {
94
93
  className: clsx('tw-stepper', className),
95
- "data-testid": testId,
96
94
  children: [/*#__PURE__*/jsx("div", {
97
95
  className: "progress",
98
96
  children: /*#__PURE__*/jsx("div", {
99
97
  className: "progress-bar",
100
98
  style: {
101
99
  width: getProgressWidth()
102
- },
103
- "data-testid": "progress-bar"
100
+ }
104
101
  })
105
102
  }), /*#__PURE__*/jsx("ol", {
106
103
  className: "tw-stepper-steps p-t-1 m-b-0",
package/build/stepper/Stepper.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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 testId?: 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, testId }: 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 getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0%';\n }\n /**\n * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n */\n return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\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={clsx(\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={clsx('tw-stepper', className)} data-testid={testId}>\n <div className=\"progress\">\n <div\n className=\"progress-bar\"\n style={{ width: getProgressWidth() }}\n data-testid=\"progress-bar\"\n />\n </div>\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","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
1
+ {"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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 getProgressWidth = (): string => {\n if (percentageCompleted === 0) {\n return '0px';\n }\n /**\n * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n * which are used for progress vertical delimiter.\n * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n */\n return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n };\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={clsx(\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={clsx('tw-stepper', className)}>\n <div className=\"progress\">\n <div className=\"progress-bar\" style={{ width: getProgressWidth() }} />\n </div>\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","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
package/build/types/stepper/Stepper.d.ts CHANGED
@@ -8,12 +8,11 @@ export interface StepperProps {
8
8
  steps: readonly Step[];
9
9
  activeStep?: number;
10
10
  className?: string;
11
- testId?: string;
12
11
  }
13
12
  /**
14
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.
15
14
  * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
16
15
  */
17
- declare const Stepper: ({ steps, activeStep, className, testId }: StepperProps) => React.JSX.Element | null;
16
+ declare const Stepper: ({ steps, activeStep, className }: StepperProps) => React.JSX.Element | null;
18
17
  export default Stepper;
19
18
  //# sourceMappingURL=Stepper.d.ts.map
package/build/types/stepper/Stepper.d.ts.map CHANGED
@@ -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;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,6CAAkD,YAAY,6BA+E1E,CAAC;AAEF,eAAe,OAAO,CAAC"}
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,6BA2ElE,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-db4ed13",
3
+ "version": "0.0.0-experimental-3c4742d",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,9 +91,9 @@
91
91
  "rollup": "^4.18.1",
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
- "@transferwise/neptune-css": "14.20.1",
94
+ "@transferwise/less-config": "3.1.0",
95
95
  "@wise/components-theming": "1.6.1",
96
- "@transferwise/less-config": "3.1.0"
96
+ "@transferwise/neptune-css": "14.20.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -92,7 +92,6 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
92
92
  >
93
93
  <div
94
94
  class="progress-bar"
95
- data-testid="progress-bar"
96
95
  />
97
96
  </div>
98
97
  <ol
@@ -208,8 +207,7 @@ exports[`FlowNavigation renders as expected 1`] = `
208
207
  >
209
208
  <div
210
209
  class="progress-bar"
211
- data-testid="progress-bar"
212
- style="width: 0%;"
210
+ style="width: 0px;"
213
211
  />
214
212
  </div>
215
213
  <ol
package/src/i18n/es.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
55
55
  "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
57
58
  "neptune.UploadButton.uploadFile": "Subir archivo",
58
59
  "neptune.UploadButton.uploadFiles": "Subir archivos",
59
60
  "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",
package/src/i18n/fr.json CHANGED
@@ -27,11 +27,11 @@
27
27
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
28
28
  "neptune.SelectOption.action.label": "Sélectionner",
29
29
  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
30
- "neptune.StatusIcon.iconLabel.error": "Erreur:",
31
- "neptune.StatusIcon.iconLabel.information": "Informations:",
30
+ "neptune.StatusIcon.iconLabel.error": "Erreur :",
31
+ "neptune.StatusIcon.iconLabel.information": "Informations :",
32
32
  "neptune.StatusIcon.iconLabel.pending": "En attente :",
33
- "neptune.StatusIcon.iconLabel.success": "Terminé:",
34
- "neptune.StatusIcon.iconLabel.warning": "Attention:",
33
+ "neptune.StatusIcon.iconLabel.success": "Terminé :",
34
+ "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
35
35
  "neptune.Summary.statusDone": "Validé",
36
36
  "neptune.Summary.statusNotDone": "À compléter",
37
37
  "neptune.Summary.statusPending": "En attente",
@@ -47,13 +47,14 @@
47
47
  "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
48
48
  "neptune.Upload.psButtonText": "Annuler",
49
49
  "neptune.Upload.psProcessingText": "Téléchargement...",
50
- "neptune.Upload.retry": "Réessayez",
50
+ "neptune.Upload.retry": "Réessayer",
51
51
  "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
52
52
  "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
53
53
  "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
54
54
  "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
55
55
  "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
57
+ "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
57
58
  "neptune.UploadButton.uploadFile": "Envoyer le fichier",
58
59
  "neptune.UploadButton.uploadFiles": "Transférer des documents",
59
60
  "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",
package/src/i18n/id.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Semua jenis file",
55
55
  "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
57
58
  "neptune.UploadButton.uploadFile": "Unggah file",
58
59
  "neptune.UploadButton.uploadFiles": "Unggah file",
59
60
  "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",
package/src/i18n/ro.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
55
55
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
57
58
  "neptune.UploadButton.uploadFile": "Încarcă fișier",
58
59
  "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
59
60
  "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",
package/src/stepper/Stepper.spec.js ADDED
@@ -0,0 +1,233 @@
1
+ import { shallow } from 'enzyme';
2
+
3
+ import { Tooltip } from '..';
4
+
5
+ import Stepper from './Stepper';
6
+
7
+ jest.mock('./deviceDetection', () => ({
8
+ isTouchDevice: jest.fn(() => false),
9
+ }));
10
+
11
+ describe('Stepper', () => {
12
+ let props;
13
+ let component;
14
+ let fakeDeviceDetection;
15
+
16
+ beforeEach(() => {
17
+ fakeDeviceDetection = require('./deviceDetection');
18
+ props = {
19
+ activeStep: 0,
20
+ steps: ['one', 'two', 'three'].map((label) => ({ label })),
21
+ };
22
+ component = shallow(<Stepper {...props} />);
23
+ });
24
+
25
+ const activeStep = (step) => component.setProps({ activeStep: step });
26
+ const steps = (howMany) =>
27
+ component.setProps({
28
+ steps: new Array(...new Array(howMany)).map((_, index) => ({ label: index.toString() })),
29
+ });
30
+
31
+ describe('progress bar', () => {
32
+ const totalWidth = () => component.find('.progress-bar').prop('style').width;
33
+
34
+ describe('when no steps are passed in', () => {
35
+ it('renders nothing', () => {
36
+ component.setProps({ steps: [] });
37
+
38
+ expect(component.isEmptyRender()).toBe(true);
39
+ });
40
+ });
41
+
42
+ it('sets the widths of the progress bar to match where you are in the flow', () => {
43
+ expect(totalWidth()).toBe('0px');
44
+ activeStep(2);
45
+ expect(totalWidth()).toBe(
46
+ 'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
47
+ );
48
+ steps(5);
49
+ expect(totalWidth()).toBe(
50
+ 'calc(50% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
51
+ );
52
+ activeStep(10000);
53
+ expect(totalWidth()).toBe(
54
+ 'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
55
+ );
56
+ activeStep(-10);
57
+ expect(totalWidth()).toBe('0px');
58
+ });
59
+ });
60
+
61
+ describe('steps', () => {
62
+ it('have rendered labels', () => {
63
+ steps(5);
64
+ [0, 1, 2, 3, 4].forEach((step) => {
65
+ expect(component.find('.tw-stepper__step').at(step).find('span').props().children).toBe(
66
+ step.toString(),
67
+ );
68
+ });
69
+ });
70
+
71
+ it('are active when clickable and completed', () => {
72
+ const stepActive = (index) =>
73
+ component.find('.tw-stepper__step').at(index).hasClass('tw-stepper__step--clickable');
74
+
75
+ component.setProps({
76
+ steps: [
77
+ { label: '0' },
78
+ { label: '1', onClick: () => null },
79
+ { label: '2', onClick: () => null },
80
+ ],
81
+ activeStep: 0,
82
+ });
83
+
84
+ expect(stepActive(0)).toBe(false);
85
+ activeStep(1);
86
+ expect(stepActive(0)).toBe(false);
87
+ expect(stepActive(1)).toBe(false);
88
+ activeStep(2);
89
+ expect(stepActive(0)).toBe(false);
90
+ expect(stepActive(1)).toBe(true);
91
+ expect(stepActive(2)).toBe(false);
92
+ });
93
+
94
+ it('are not clickable when active', () => {
95
+ const clickOnStep = (index) => {
96
+ const buttonReference = component.find('.tw-stepper__step').at(index).find('button');
97
+ if (buttonReference.exists()) {
98
+ buttonReference.simulate('click');
99
+ }
100
+ };
101
+ const buttonDisabled = (index) =>
102
+ !component.find('.tw-stepper__step').at(index).find('button').exists();
103
+ const clickedOnFirstStep = jest.fn();
104
+ const clickedOnSecondStep = jest.fn();
105
+ component.setProps({
106
+ steps: [
107
+ { label: '0', onClick: clickedOnFirstStep },
108
+ { label: '1', onClick: clickedOnSecondStep },
109
+ ],
110
+ activeStep: 0,
111
+ });
112
+ clickOnStep(0);
113
+ expect(buttonDisabled(0)).toBe(true);
114
+ expect(clickedOnFirstStep).not.toHaveBeenCalled();
115
+ activeStep(1);
116
+ expect(buttonDisabled(0)).toBe(false);
117
+ clickOnStep(0);
118
+ expect(clickedOnFirstStep).toHaveBeenCalledTimes(1);
119
+ clickOnStep(1);
120
+ expect(clickedOnSecondStep).not.toHaveBeenCalled();
121
+ });
122
+
123
+ it('are active when they are the currently active step', () => {
124
+ const stepActive = (index) =>
125
+ component.find('.tw-stepper__step').at(index).hasClass('tw-stepper__step--active');
126
+ steps(4);
127
+ activeStep(1);
128
+ expect(stepActive(0)).toBe(false);
129
+ expect(stepActive(1)).toBe(true);
130
+ expect(stepActive(2)).toBe(false);
131
+ expect(stepActive(3)).toBe(false);
132
+ activeStep(2);
133
+ expect(stepActive(0)).toBe(false);
134
+ expect(stepActive(1)).toBe(false);
135
+ expect(stepActive(2)).toBe(true);
136
+ expect(stepActive(3)).toBe(false);
137
+ });
138
+
139
+ it('are marked as visited when active index is less than or equals to current index', () => {
140
+ const step = (index) => {
141
+ const buttonStates = ['tw-stepper__step--active', 'tw-stepper__step--clickable'];
142
+ const stepElement = component.find('.tw-stepper__step').at(index);
143
+ return {
144
+ active: stepElement.hasClass(buttonStates[0]),
145
+ clickable: stepElement.hasClass(buttonStates[1]),
146
+ clickableAndActive: buttonStates.every((c) => stepElement.hasClass(c)),
147
+ disabled: !stepElement.find('button').exists(),
148
+ };
149
+ };
150
+
151
+ component.setProps({
152
+ steps: [
153
+ { label: '0', onClick: () => {} },
154
+ { label: '1', onClick: () => {} },
155
+ { label: '2', onClick: () => {} },
156
+ ],
157
+ activeStep: 0,
158
+ });
159
+
160
+ expect(step(0).active).toBe(true);
161
+ expect(step(0).disabled).toBe(true);
162
+ expect(step(1).clickableAndActive).toBe(false);
163
+ expect(step(2).clickableAndActive).toBe(false);
164
+
165
+ activeStep(2);
166
+ activeStep(0);
167
+
168
+ expect(step(1).clickable).toBe(true);
169
+ expect(step(2).clickable).toBe(true);
170
+ });
171
+
172
+ it('are aria-current=step when active', () => {
173
+ const stepCurrent = (index) =>
174
+ component.find('.tw-stepper__step').at(index).props()['aria-current'];
175
+ steps(4);
176
+ activeStep(1);
177
+ expect(stepCurrent(0)).toBe(false);
178
+ expect(stepCurrent(1)).toBe('step');
179
+ expect(stepCurrent(2)).toBe(false);
180
+ expect(stepCurrent(3)).toBe(false);
181
+ activeStep(2);
182
+ expect(stepCurrent(0)).toBe(false);
183
+ expect(stepCurrent(1)).toBe(false);
184
+ expect(stepCurrent(2)).toBe('step');
185
+ expect(stepCurrent(3)).toBe(false);
186
+ });
187
+ });
188
+
189
+ describe('hover labels', () => {
190
+ const step = (index) => component.find('.tw-stepper__step').at(index);
191
+ it('will be rendered when provided', () => {
192
+ component.setProps({
193
+ steps: [{ hoverLabel: 'hover', label: 'label' }, { label: 'label 2' }],
194
+ });
195
+ const firstStepHoverLabel = step(0).children();
196
+ expect(firstStepHoverLabel.type()).toBe(Tooltip);
197
+ expect(firstStepHoverLabel.children().render().text()).toBe('label');
198
+ expect(step(1).find('span').props().children).toBe('label 2');
199
+ });
200
+
201
+ it('renders jsx', () => {
202
+ component.setProps({
203
+ steps: [
204
+ {
205
+ hoverLabel: (
206
+ <>
207
+ hover <p>label</p>
208
+ </>
209
+ ),
210
+ label: '1',
211
+ },
212
+ ],
213
+ });
214
+
215
+ expect(step(0).children().prop('label')).toStrictEqual(
216
+ <>
217
+ hover <p>label</p>
218
+ </>,
219
+ );
220
+ });
221
+
222
+ it('will not be rendered if the user is on a touch device', () => {
223
+ jest.spyOn(fakeDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
224
+ component.setProps({
225
+ steps: [{ hoverLabel: 'hover', label: 'label' }, { label: 'label 2' }],
226
+ });
227
+ const firstStepHoverLabel = step(0).children();
228
+ expect(firstStepHoverLabel.type()).toBe('span');
229
+ expect(firstStepHoverLabel.props().children).toBe('label');
230
+ expect(step(1).children().props().children).toBe('label 2');
231
+ });
232
+ });
233
+ });
package/src/stepper/Stepper.tsx CHANGED
@@ -21,14 +21,13 @@ export interface StepperProps {
21
21
  steps: readonly Step[];
22
22
  activeStep?: number;
23
23
  className?: string;
24
- testId?: string;
25
24
  }
26
25
 
27
26
  /**
28
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.
29
28
  * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
30
29
  */
31
- const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {
30
+ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
32
31
  const { isRTL } = useDirection();
33
32
 
34
33
  if (steps.length === 0) {
@@ -41,7 +40,7 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
41
40
 
42
41
  const getProgressWidth = (): string => {
43
42
  if (percentageCompleted === 0) {
44
- return '0%';
43
+ return '0px';
45
44
  }
46
45
  /**
47
46
  * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
@@ -96,13 +95,9 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
96
95
  };
97
96
 
98
97
  return (
99
- <div className={clsx('tw-stepper', className)} data-testid={testId}>
98
+ <div className={clsx('tw-stepper', className)}>
100
99
  <div className="progress">
101
- <div
102
- className="progress-bar"
103
- style={{ width: getProgressWidth() }}
104
- data-testid="progress-bar"
105
- />
100
+ <div className="progress-bar" style={{ width: getProgressWidth() }} />
106
101
  </div>
107
102
  <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
108
103
  </div>
package/src/stepper/{deviceDetection.spec.ts → deviceDetection.spec.js} RENAMED
@@ -1,14 +1,14 @@
1
1
  import { isTouchDevice } from './deviceDetection';
2
2
 
3
3
  describe('Device detection', () => {
4
- function fakeUserAgent(userAgent: string) {
4
+ function fakeUserAgent(userAgent) {
5
5
  Object.defineProperty(navigator, 'userAgent', {
6
6
  value: userAgent,
7
7
  configurable: true,
8
8
  });
9
9
  }
10
10
 
11
- function fakeMaxTouchPoints(maxTouchPoints: number | undefined) {
11
+ function fakeMaxTouchPoints(maxTouchPoints) {
12
12
  Object.defineProperty(navigator, 'maxTouchPoints', {
13
13
  value: maxTouchPoints,
14
14
  configurable: true,
@@ -24,10 +24,7 @@ describe('Device detection', () => {
24
24
 
25
25
  it('recognizes touch devices via window events', () => {
26
26
  expect(isTouchDevice()).toBe(false);
27
- Object.defineProperty(window, 'ontouchstart', {
28
- value: () => {},
29
- writable: true,
30
- });
27
+ window.ontouchstart = {};
31
28
  expect(isTouchDevice()).toBe(true);
32
29
  });
33
30
 
package/src/stepper/Stepper.spec.story.tsx DELETED
@@ -1,89 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { fn, within, expect, screen } 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: 'Three', onClick: fn() },
23
- { label: 'Four', onClick: fn() },
24
- { label: 'Five', onClick: fn() },
25
- ];
26
-
27
- const meta = {
28
- component: Stepper,
29
- title: 'Navigation/Stepper/tests',
30
- argTypes: {
31
- activeStep: {
32
- control: 'radio',
33
- options: [...Array(STEPS.length).keys()],
34
- },
35
- },
36
- } satisfies Meta<typeof Stepper>;
37
- export default meta;
38
-
39
- type Story = StoryObj<typeof meta>;
40
-
41
- export const ProgressbarWidth: Story = {
42
- play: async ({ step }) => {
43
- const getBarBaseWidth = (stepIndex: number) => {
44
- const instance = screen.getByTestId(`stepper${stepIndex}`);
45
- return within(instance).getByTestId('progress-bar')?.style.width;
46
- };
47
-
48
- await step('activeStep: -10 (negative) ▸ width should be 0', async () => {
49
- await expect(getBarBaseWidth(-10)).toBe(`0%`);
50
- });
51
-
52
- await step('activeStep: 0 ▸ width should be 0', async () => {
53
- await expect(getBarBaseWidth(0)).toBe(`0%`);
54
- });
55
-
56
- const WIDTHS = [0, 25, 50, 75, 100];
57
- // eslint-disable-next-line no-plusplus
58
- for (let stepIndex = 1; stepIndex < STEPS.length; stepIndex++) {
59
- await step(
60
- `activeStep: ${stepIndex} ▸ base width should be ${WIDTHS[stepIndex]}%`,
61
- async () => {
62
- await expect(getBarBaseWidth(stepIndex)).toMatch(
63
- new RegExp(`^calc\\(${WIDTHS[stepIndex]}%.*?`),
64
- );
65
- },
66
- );
67
- }
68
-
69
- await step('activeStep: 1000 ▸ base width should be 100%', async () => {
70
- await expect(getBarBaseWidth(1000)).toMatch(/^calc\(100%.*?/);
71
- });
72
- },
73
- render: function Render() {
74
- return (
75
- <>
76
- <Stepper steps={STEPS} activeStep={0} testId="stepper-10" />
77
- <Stepper steps={STEPS} activeStep={0} testId="stepper0" />
78
- <Stepper steps={STEPS} activeStep={1} testId="stepper1" />
79
- <Stepper steps={STEPS} activeStep={2} testId="stepper2" />
80
- <Stepper steps={STEPS} activeStep={3} testId="stepper3" />
81
- <Stepper steps={STEPS} activeStep={4} testId="stepper4" />
82
- <Stepper steps={STEPS} activeStep={4} testId="stepper1000" />
83
- </>
84
- );
85
- },
86
- args: {
87
- steps: STEPS,
88
- },
89
- };
package/src/stepper/Stepper.spec.tsx DELETED
@@ -1,236 +0,0 @@
1
- import { render, screen, userEvent } from '../test-utils';
2
- import * as mockedDeviceDetection from './deviceDetection';
3
-
4
- import Stepper from './Stepper';
5
-
6
- jest.mock('./deviceDetection', () => ({
7
- isTouchDevice: jest.fn(() => false),
8
- }));
9
-
10
- describe('Stepper', () => {
11
- beforeEach(() => {
12
- jest.clearAllMocks();
13
- });
14
-
15
- const generateSteps = (stepsCount: number) =>
16
- Array.from({ length: stepsCount }, () => ({
17
- label: Math.random().toString(),
18
- onClick: jest.fn(),
19
- }));
20
-
21
- const getSteps = () => screen.getAllByRole('listitem');
22
-
23
- const initialProps = {
24
- activeStep: 0,
25
- steps: generateSteps(3),
26
- };
27
-
28
- const customRender = (overrides = {}) => {
29
- return render(<Stepper {...initialProps} {...overrides} />);
30
- };
31
-
32
- describe('progress bar', () => {
33
- it('renders nothing when no steps are passed in', () => {
34
- customRender({ steps: [] });
35
- expect(screen.queryByTestId('progress-bar')).not.toBeInTheDocument();
36
- });
37
- });
38
-
39
- describe('steps', () => {
40
- it('have rendered labels', () => {
41
- const steps = generateSteps(5);
42
- customRender({ steps });
43
-
44
- getSteps().forEach((step, index) => {
45
- expect(step).toHaveTextContent(steps[index].label);
46
- });
47
- });
48
-
49
- describe('step interactive style', () => {
50
- const expectStepIsVisuallyInteractive = (stepIndex: number) => {
51
- // eslint-disable-next-line jest/valid-expect
52
- return expect(getSteps()[stepIndex].classList.contains('tw-stepper__step--clickable'));
53
- };
54
-
55
- it('is not styled as interactive if it is the active step', async () => {
56
- const steps = [
57
- { label: '0' },
58
- { label: '1', onClick: jest.fn() },
59
- { label: '2', onClick: jest.fn() },
60
- ];
61
- customRender({ steps, activeStep: 0 });
62
- expectStepIsVisuallyInteractive(0).toBe(false);
63
- });
64
-
65
- it('is not styled as interactive if not the active step and has no click handler', () => {
66
- const steps = [
67
- { label: '0' },
68
- { label: '1', onClick: jest.fn() },
69
- { label: '2', onClick: jest.fn() },
70
- ];
71
- customRender({ steps, activeStep: 1 });
72
- expectStepIsVisuallyInteractive(0).toBe(false);
73
- expectStepIsVisuallyInteractive(1).toBe(false);
74
- });
75
-
76
- it('is styled as interactive if not the active step and has click handler', () => {
77
- const steps = [
78
- { label: '0', onClick: jest.fn() },
79
- { label: '1', onClick: jest.fn() },
80
- { label: '2', onClick: jest.fn() },
81
- ];
82
- customRender({ steps, activeStep: 2 });
83
- expectStepIsVisuallyInteractive(0).toBe(true);
84
- expectStepIsVisuallyInteractive(1).toBe(true);
85
- expectStepIsVisuallyInteractive(2).toBe(false);
86
- });
87
- });
88
-
89
- describe('step interactivity', () => {
90
- const getStepChild = (stepIndex: number) => getSteps()[stepIndex].children[0];
91
-
92
- it('is not interactive if it is the active step', async () => {
93
- const steps = [
94
- { label: '0', onClick: jest.fn() },
95
- { label: '1', onClick: jest.fn() },
96
- { label: '2', onClick: jest.fn() },
97
- ];
98
- customRender({ steps, activeStep: 0 });
99
- await userEvent.click(getStepChild(0));
100
- expect(steps[0].onClick).not.toHaveBeenCalled();
101
- });
102
-
103
- it('is not interactive if not the active step but has no click handler', async () => {
104
- const steps = [
105
- { label: '0' },
106
- { label: '1', onClick: jest.fn() },
107
- { label: '2', onClick: jest.fn() },
108
- ];
109
- customRender({ steps, activeStep: 1 });
110
- await userEvent.click(getStepChild(0));
111
- expect(steps[1].onClick).not.toHaveBeenCalled();
112
- await userEvent.click(getStepChild(1));
113
- expect(steps[1].onClick).not.toHaveBeenCalled();
114
- });
115
-
116
- it('is interactive if not the active step and has click handler', async () => {
117
- const steps = [
118
- { label: '0', onClick: jest.fn() },
119
- { label: '1', onClick: jest.fn() },
120
- { label: '2', onClick: jest.fn() },
121
- ];
122
- customRender({ steps, activeStep: 2 });
123
- await userEvent.click(getStepChild(1));
124
- expect(steps[1].onClick).toHaveBeenCalledTimes(1);
125
- });
126
- });
127
-
128
- it('are not clickable when active', async () => {
129
- const clickedOnFirstStep = jest.fn();
130
- const clickedOnSecondStep = jest.fn();
131
- const initialProps = {
132
- steps: [
133
- { label: 'one', onClick: clickedOnFirstStep },
134
- { label: 'two', onClick: clickedOnSecondStep },
135
- ],
136
- activeStep: 0,
137
- };
138
- const { rerender } = customRender(initialProps);
139
-
140
- const clickOnStep = async (stepIndex: number) => {
141
- const step = screen.getByText(initialProps.steps[stepIndex].label).parentElement;
142
- if (step) {
143
- return userEvent.click(step);
144
- }
145
- };
146
-
147
- await clickOnStep(0);
148
- expect(clickedOnFirstStep).not.toHaveBeenCalled();
149
-
150
- rerender(<Stepper {...initialProps} activeStep={1} />);
151
- await clickOnStep(0);
152
- expect(clickedOnFirstStep).toHaveBeenCalledTimes(1);
153
-
154
- await clickOnStep(1);
155
- expect(clickedOnSecondStep).not.toHaveBeenCalled();
156
- });
157
-
158
- it('are active when they are the currently active step', () => {
159
- const { rerender } = customRender({
160
- steps: Array(4)
161
- .fill('')
162
- .map((_, i) => ({ label: i.toString() })),
163
- activeStep: 1,
164
- });
165
-
166
- const stepActive = (index: number) =>
167
- getSteps()[index].classList.contains('tw-stepper__step--active');
168
-
169
- expect(stepActive(0)).toBe(false);
170
- expect(stepActive(1)).toBe(true);
171
- expect(stepActive(2)).toBe(false);
172
- expect(stepActive(3)).toBe(false);
173
-
174
- rerender(<Stepper {...initialProps} activeStep={2} />);
175
-
176
- expect(stepActive(1)).toBe(false);
177
- expect(stepActive(2)).toBe(true);
178
- });
179
-
180
- it('are aria-current=step when active', () => {
181
- const { rerender } = customRender({ steps: Array(4).fill({ label: '' }), activeStep: 1 });
182
-
183
- const stepCurrent = (index: number) =>
184
- getSteps()[index].getAttribute('aria-current') === 'step';
185
-
186
- expect(stepCurrent(0)).toBe(false);
187
- expect(stepCurrent(1)).toBe(true);
188
- expect(stepCurrent(2)).toBe(false);
189
- expect(stepCurrent(3)).toBe(false);
190
-
191
- rerender(<Stepper {...initialProps} activeStep={2} />);
192
-
193
- expect(stepCurrent(1)).toBe(false);
194
- expect(stepCurrent(2)).toBe(true);
195
- });
196
- });
197
-
198
- describe('hover labels', () => {
199
- it('will be rendered when provided', async () => {
200
- const hoverLabel = 'hover label';
201
- customRender({
202
- steps: [{ hoverLabel, label: 'label' }, { label: 'label 2' }],
203
- });
204
- expect(await screen.findByText(hoverLabel)).toBeInTheDocument();
205
- });
206
-
207
- it('renders jsx', async () => {
208
- customRender({
209
- steps: [
210
- {
211
- hoverLabel: (
212
- <>
213
- <span>hover label 1</span>
214
- <p>hover label 2</p>
215
- </>
216
- ),
217
- label: 'one',
218
- },
219
- ],
220
- });
221
-
222
- expect(await screen.findByText('hover label 1')).toBeInTheDocument();
223
- expect(await screen.findByText('hover label 2')).toBeInTheDocument();
224
- });
225
-
226
- it('will not be rendered if the user is on a touch device', () => {
227
- jest.spyOn(mockedDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
228
-
229
- customRender({
230
- steps: [{ hoverLabel: 'hover label', label: 'label' }, { label: 'label 2' }],
231
- });
232
-
233
- expect(screen.queryByText('hover label')).not.toBeInTheDocument();
234
- });
235
- });
236
- });