@transferwise/components 0.0.0-experimental-47d7655 → 0.0.0-experimental-ec74fd8
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/i18n/es.json +1 -0
- package/build/i18n/es.json.js +1 -0
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/es.json.mjs +1 -0
- package/build/i18n/es.json.mjs.map +1 -1
- package/build/i18n/fr.json +6 -5
- package/build/i18n/fr.json.js +6 -5
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/fr.json.mjs +6 -5
- package/build/i18n/fr.json.mjs.map +1 -1
- package/build/i18n/hu.json +1 -0
- package/build/i18n/hu.json.js +1 -0
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/hu.json.mjs +1 -0
- package/build/i18n/hu.json.mjs.map +1 -1
- package/build/i18n/id.json +1 -0
- package/build/i18n/id.json.js +1 -0
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/id.json.mjs +1 -0
- package/build/i18n/id.json.mjs.map +1 -1
- package/build/i18n/ro.json +1 -0
- package/build/i18n/ro.json.js +1 -0
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ro.json.mjs +1 -0
- package/build/i18n/ro.json.mjs.map +1 -1
- package/build/stepper/Stepper.js +6 -3
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +6 -3
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/types/stepper/Stepper.d.ts +2 -1
- package/build/types/stepper/Stepper.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +3 -1
- package/src/i18n/es.json +1 -0
- package/src/i18n/fr.json +6 -5
- package/src/i18n/hu.json +1 -0
- package/src/i18n/id.json +1 -0
- package/src/i18n/ro.json +1 -0
- package/src/stepper/Stepper.spec.tsx +236 -0
- package/src/stepper/Stepper.tests.story.tsx +89 -0
- package/src/stepper/Stepper.tsx +9 -4
- package/src/stepper/{deviceDetection.spec.js → deviceDetection.spec.ts} +6 -3
- package/src/stepper/Stepper.spec.js +0 -233
- /package/src/alert/{Alert.spec.story.tsx → Alert.tests.story.tsx} +0 -0
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.",
|
|
@@ -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.",
|
|
@@ -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": "
|
|
34
|
-
"neptune.StatusIcon.iconLabel.warning": "
|
|
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": "
|
|
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": "
|
|
36
|
-
"neptune.StatusIcon.iconLabel.warning": "
|
|
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": "
|
|
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.",
|
|
@@ -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": "
|
|
34
|
-
"neptune.StatusIcon.iconLabel.warning": "
|
|
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": "
|
|
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.",
|
|
@@ -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/hu.json
CHANGED
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Összes fájltípus",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
|
|
57
|
+
"neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
|
|
57
58
|
"neptune.UploadButton.uploadFile": "Fájl feltöltése",
|
|
58
59
|
"neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
|
|
59
60
|
"neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",
|
package/build/i18n/hu.json.js
CHANGED
|
@@ -56,6 +56,7 @@ var hu = {
|
|
|
56
56
|
"neptune.UploadButton.allFileTypes": "Összes fájltípus",
|
|
57
57
|
"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
|
|
58
58
|
"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
|
|
59
|
+
"neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
|
|
59
60
|
"neptune.UploadButton.uploadFile": "Fájl feltöltése",
|
|
60
61
|
"neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
|
|
61
62
|
"neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hu.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hu.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/hu.json.mjs
CHANGED
|
@@ -54,6 +54,7 @@ var hu = {
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Összes fájltípus",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
|
|
57
|
+
"neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
|
|
57
58
|
"neptune.UploadButton.uploadFile": "Fájl feltöltése",
|
|
58
59
|
"neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
|
|
59
60
|
"neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hu.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hu.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.",
|
|
@@ -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.",
|
|
@@ -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.",
|
|
@@ -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.",
|
|
@@ -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,7 +40,8 @@ function clamp(from, to, value) {
|
|
|
40
40
|
const Stepper = ({
|
|
41
41
|
steps,
|
|
42
42
|
activeStep = 0,
|
|
43
|
-
className
|
|
43
|
+
className,
|
|
44
|
+
testId
|
|
44
45
|
}) => {
|
|
45
46
|
const {
|
|
46
47
|
isRTL
|
|
@@ -53,7 +54,7 @@ const Stepper = ({
|
|
|
53
54
|
const percentageCompleted = activeStepIndex / (steps.length - 1);
|
|
54
55
|
const getProgressWidth = () => {
|
|
55
56
|
if (percentageCompleted === 0) {
|
|
56
|
-
return '
|
|
57
|
+
return '0%';
|
|
57
58
|
}
|
|
58
59
|
/**
|
|
59
60
|
* Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
|
|
@@ -93,13 +94,15 @@ const Stepper = ({
|
|
|
93
94
|
};
|
|
94
95
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
95
96
|
className: clsx.clsx('tw-stepper', className),
|
|
97
|
+
"data-testid": testId,
|
|
96
98
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
97
99
|
className: "progress",
|
|
98
100
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
99
101
|
className: "progress-bar",
|
|
100
102
|
style: {
|
|
101
103
|
width: getProgressWidth()
|
|
102
|
-
}
|
|
104
|
+
},
|
|
105
|
+
"data-testid": "progress-bar"
|
|
103
106
|
})
|
|
104
107
|
}), /*#__PURE__*/jsxRuntime.jsx("ol", {
|
|
105
108
|
className: "tw-stepper-steps p-t-1 m-b-0",
|
|
@@ -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}\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 '
|
|
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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"}
|
|
@@ -38,7 +38,8 @@ function clamp(from, to, value) {
|
|
|
38
38
|
const Stepper = ({
|
|
39
39
|
steps,
|
|
40
40
|
activeStep = 0,
|
|
41
|
-
className
|
|
41
|
+
className,
|
|
42
|
+
testId
|
|
42
43
|
}) => {
|
|
43
44
|
const {
|
|
44
45
|
isRTL
|
|
@@ -51,7 +52,7 @@ const Stepper = ({
|
|
|
51
52
|
const percentageCompleted = activeStepIndex / (steps.length - 1);
|
|
52
53
|
const getProgressWidth = () => {
|
|
53
54
|
if (percentageCompleted === 0) {
|
|
54
|
-
return '
|
|
55
|
+
return '0%';
|
|
55
56
|
}
|
|
56
57
|
/**
|
|
57
58
|
* Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
|
|
@@ -91,13 +92,15 @@ const Stepper = ({
|
|
|
91
92
|
};
|
|
92
93
|
return /*#__PURE__*/jsxs("div", {
|
|
93
94
|
className: clsx('tw-stepper', className),
|
|
95
|
+
"data-testid": testId,
|
|
94
96
|
children: [/*#__PURE__*/jsx("div", {
|
|
95
97
|
className: "progress",
|
|
96
98
|
children: /*#__PURE__*/jsx("div", {
|
|
97
99
|
className: "progress-bar",
|
|
98
100
|
style: {
|
|
99
101
|
width: getProgressWidth()
|
|
100
|
-
}
|
|
102
|
+
},
|
|
103
|
+
"data-testid": "progress-bar"
|
|
101
104
|
})
|
|
102
105
|
}), /*#__PURE__*/jsx("ol", {
|
|
103
106
|
className: "tw-stepper-steps p-t-1 m-b-0",
|
|
@@ -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}\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 '
|
|
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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"}
|
|
@@ -8,11 +8,12 @@ export interface StepperProps {
|
|
|
8
8
|
steps: readonly Step[];
|
|
9
9
|
activeStep?: number;
|
|
10
10
|
className?: string;
|
|
11
|
+
testId?: string;
|
|
11
12
|
}
|
|
12
13
|
/**
|
|
13
14
|
* 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
15
|
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
15
16
|
*/
|
|
16
|
-
declare const Stepper: ({ steps, activeStep, className }: StepperProps) => React.JSX.Element | null;
|
|
17
|
+
declare const Stepper: ({ steps, activeStep, className, testId }: StepperProps) => React.JSX.Element | null;
|
|
17
18
|
export default Stepper;
|
|
18
19
|
//# 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;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -92,6 +92,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
92
92
|
>
|
|
93
93
|
<div
|
|
94
94
|
class="progress-bar"
|
|
95
|
+
data-testid="progress-bar"
|
|
95
96
|
/>
|
|
96
97
|
</div>
|
|
97
98
|
<ol
|
|
@@ -207,7 +208,8 @@ exports[`FlowNavigation renders as expected 1`] = `
|
|
|
207
208
|
>
|
|
208
209
|
<div
|
|
209
210
|
class="progress-bar"
|
|
210
|
-
|
|
211
|
+
data-testid="progress-bar"
|
|
212
|
+
style="width: 0%;"
|
|
211
213
|
/>
|
|
212
214
|
</div>
|
|
213
215
|
<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": "
|
|
34
|
-
"neptune.StatusIcon.iconLabel.warning": "
|
|
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": "
|
|
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/hu.json
CHANGED
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"neptune.UploadButton.allFileTypes": "Összes fájltípus",
|
|
55
55
|
"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
|
|
56
56
|
"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
|
|
57
|
+
"neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
|
|
57
58
|
"neptune.UploadButton.uploadFile": "Fájl feltöltése",
|
|
58
59
|
"neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
|
|
59
60
|
"neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",
|
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.",
|
|
@@ -0,0 +1,236 @@
|
|
|
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
|
+
});
|
|
@@ -0,0 +1,89 @@
|
|
|
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.tsx
CHANGED
|
@@ -21,13 +21,14 @@ export interface StepperProps {
|
|
|
21
21
|
steps: readonly Step[];
|
|
22
22
|
activeStep?: number;
|
|
23
23
|
className?: string;
|
|
24
|
+
testId?: string;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
/**
|
|
27
28
|
* 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
29
|
* @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
|
|
29
30
|
*/
|
|
30
|
-
const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
31
|
+
const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {
|
|
31
32
|
const { isRTL } = useDirection();
|
|
32
33
|
|
|
33
34
|
if (steps.length === 0) {
|
|
@@ -40,7 +41,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
|
40
41
|
|
|
41
42
|
const getProgressWidth = (): string => {
|
|
42
43
|
if (percentageCompleted === 0) {
|
|
43
|
-
return '
|
|
44
|
+
return '0%';
|
|
44
45
|
}
|
|
45
46
|
/**
|
|
46
47
|
* Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
|
|
@@ -95,9 +96,13 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
|
|
|
95
96
|
};
|
|
96
97
|
|
|
97
98
|
return (
|
|
98
|
-
<div className={clsx('tw-stepper', className)}>
|
|
99
|
+
<div className={clsx('tw-stepper', className)} data-testid={testId}>
|
|
99
100
|
<div className="progress">
|
|
100
|
-
<div
|
|
101
|
+
<div
|
|
102
|
+
className="progress-bar"
|
|
103
|
+
style={{ width: getProgressWidth() }}
|
|
104
|
+
data-testid="progress-bar"
|
|
105
|
+
/>
|
|
101
106
|
</div>
|
|
102
107
|
<ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
|
|
103
108
|
</div>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { isTouchDevice } from './deviceDetection';
|
|
2
2
|
|
|
3
3
|
describe('Device detection', () => {
|
|
4
|
-
function fakeUserAgent(userAgent) {
|
|
4
|
+
function fakeUserAgent(userAgent: string) {
|
|
5
5
|
Object.defineProperty(navigator, 'userAgent', {
|
|
6
6
|
value: userAgent,
|
|
7
7
|
configurable: true,
|
|
8
8
|
});
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
function fakeMaxTouchPoints(maxTouchPoints) {
|
|
11
|
+
function fakeMaxTouchPoints(maxTouchPoints: number | undefined) {
|
|
12
12
|
Object.defineProperty(navigator, 'maxTouchPoints', {
|
|
13
13
|
value: maxTouchPoints,
|
|
14
14
|
configurable: true,
|
|
@@ -24,7 +24,10 @@ describe('Device detection', () => {
|
|
|
24
24
|
|
|
25
25
|
it('recognizes touch devices via window events', () => {
|
|
26
26
|
expect(isTouchDevice()).toBe(false);
|
|
27
|
-
window
|
|
27
|
+
Object.defineProperty(window, 'ontouchstart', {
|
|
28
|
+
value: () => {},
|
|
29
|
+
writable: true,
|
|
30
|
+
});
|
|
28
31
|
expect(isTouchDevice()).toBe(true);
|
|
29
32
|
});
|
|
30
33
|
|
|
@@ -1,233 +0,0 @@
|
|
|
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
|
-
});
|
|
File without changes
|