@clicoh/orion-library 1.2.0-beta.20 → 1.2.0-beta.21
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/assets/avatares/caja-chispa.png +0 -0
- package/assets/avatares/caja.png +0 -0
- package/assets/avatares/cohete.png +0 -0
- package/assets/avatares/dino.png +0 -0
- package/assets/avatares/pulpo-lentes.png +0 -0
- package/assets/avatares/pulpo-verde.png +0 -0
- package/assets/avatares/pulpo.png +0 -0
- package/assets/cifras/alerta.png +0 -0
- package/assets/cifras/duda.png +0 -0
- package/assets/cifras/error.png +0 -0
- package/assets/cifras/monedas.png +0 -0
- package/assets/cifras/reloj.png +0 -0
- package/assets/cifras/visto.png +0 -0
- package/assets/css/expresivo.css +111 -10
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/expresivo/ExpChip/ExpChip.d.ts +15 -5
- package/expresivo/ExpChip/ExpChip.d.ts.map +1 -1
- package/expresivo/ExpChip/ExpChip.jsx +25 -4
- package/expresivo/ExpChip/ExpChip.jsx.map +1 -1
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts +4 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map +1 -1
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx +6 -2
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map +1 -1
- package/expresivo/ExpLadder/ExpLadder.d.ts +42 -0
- package/expresivo/ExpLadder/ExpLadder.d.ts.map +1 -0
- package/expresivo/ExpLadder/ExpLadder.jsx +82 -0
- package/expresivo/ExpLadder/ExpLadder.jsx.map +1 -0
- package/expresivo/ExpLadder/index.d.ts +3 -0
- package/expresivo/ExpLadder/index.d.ts.map +1 -0
- package/expresivo/ExpLadder/index.js +2 -0
- package/expresivo/ExpLadder/index.js.map +1 -0
- package/expresivo/ExpPageHero/ExpPageHero.d.ts +3 -3
- package/expresivo/ExpPageHero/ExpPageHero.jsx +4 -4
- package/expresivo/ExpPageHero/ExpPageHero.jsx.map +1 -1
- package/expresivo/ExpPillButton/ExpPillButton.d.ts +4 -1
- package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -1
- package/expresivo/ExpPillButton/ExpPillButton.jsx +6 -4
- package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -1
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts +28 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx +32 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts +6 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.js +18 -0
- package/expresivo/ExpRepoAvatar/catalog.js.map +1 -0
- package/expresivo/ExpRepoAvatar/index.d.ts +4 -0
- package/expresivo/ExpRepoAvatar/index.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/index.js +2 -0
- package/expresivo/ExpRepoAvatar/index.js.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts +49 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx +81 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx.map +1 -0
- package/expresivo/ExpSearchField/index.d.ts +3 -0
- package/expresivo/ExpSearchField/index.d.ts.map +1 -0
- package/expresivo/ExpSearchField/index.js +2 -0
- package/expresivo/ExpSearchField/index.js.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts +25 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx +29 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx.map +1 -0
- package/expresivo/ExpStatIcon/catalog.d.ts +6 -0
- package/expresivo/ExpStatIcon/catalog.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/catalog.js +16 -0
- package/expresivo/ExpStatIcon/catalog.js.map +1 -0
- package/expresivo/ExpStatIcon/index.d.ts +4 -0
- package/expresivo/ExpStatIcon/index.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/index.js +2 -0
- package/expresivo/ExpStatIcon/index.js.map +1 -0
- package/expresivo/index.d.ts +4 -0
- package/expresivo/index.d.ts.map +1 -1
- package/expresivo/index.js +4 -0
- package/expresivo/index.js.map +1 -1
- package/package.json +1 -1
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/assets/css/expresivo.css
CHANGED
|
@@ -524,6 +524,59 @@
|
|
|
524
524
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 68%, 0 100%);
|
|
525
525
|
}
|
|
526
526
|
|
|
527
|
+
/* ExpSearchField: the same relief as the field skin, with its action inside */
|
|
528
|
+
|
|
529
|
+
.exp-search {
|
|
530
|
+
border: 1px solid var(--exp-field-line);
|
|
531
|
+
background: var(--exp-field-bg);
|
|
532
|
+
box-shadow:
|
|
533
|
+
0 4px 14px var(--exp-field-drop),
|
|
534
|
+
0 1px 2px rgba(34, 35, 41, 0.06),
|
|
535
|
+
inset 0 1px 0 var(--exp-field-gloss);
|
|
536
|
+
transition:
|
|
537
|
+
transform 260ms var(--exp-ease-spring),
|
|
538
|
+
box-shadow 260ms ease,
|
|
539
|
+
border-color 200ms ease,
|
|
540
|
+
background 200ms ease;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.exp-search[data-state='idle']:is(:hover, :focus-within) {
|
|
544
|
+
border-color: var(--exp-accent-soft);
|
|
545
|
+
background: var(--exp-field-bg-hover);
|
|
546
|
+
box-shadow:
|
|
547
|
+
0 10px 28px var(--exp-field-glow),
|
|
548
|
+
0 2px 6px rgba(106, 93, 249, 0.12),
|
|
549
|
+
inset 0 1px 0 var(--exp-field-gloss);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.exp-search[data-state='idle']:focus-within {
|
|
553
|
+
border-color: var(--exp-accent);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.exp-search[data-state][data-invalid] {
|
|
557
|
+
border-color: var(--color-error);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.exp-search[data-state='disabled'] {
|
|
561
|
+
opacity: 0.6;
|
|
562
|
+
cursor: not-allowed;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
.exp-search-input {
|
|
566
|
+
color: var(--exp-field-ink);
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.exp-search-lens {
|
|
570
|
+
color: var(--exp-field-icon);
|
|
571
|
+
transition:
|
|
572
|
+
color 200ms ease,
|
|
573
|
+
transform 260ms var(--exp-ease-spring);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.exp-search[data-state='idle']:is(:hover, :focus-within) .exp-search-lens {
|
|
577
|
+
color: var(--exp-accent);
|
|
578
|
+
}
|
|
579
|
+
|
|
527
580
|
/* Skin: titles ---------------------------------------------------------- */
|
|
528
581
|
|
|
529
582
|
:root:has(.exp-scope[data-exp-titles='playful']) [data-orion-part='heading'] {
|
|
@@ -817,15 +870,36 @@
|
|
|
817
870
|
var(--exp-card-bg);
|
|
818
871
|
}
|
|
819
872
|
|
|
873
|
+
/* Skin: framed tables (DataTable card) ---------------------------------- */
|
|
874
|
+
|
|
875
|
+
/* A framed table reads as one card: the brand band along the top, like
|
|
876
|
+
`Card` `accent`, and core rows inside even with tables="cards". */
|
|
877
|
+
:root:has(.exp-scope) [data-orion-part='data-table'][data-modifier='card'] {
|
|
878
|
+
overflow: hidden;
|
|
879
|
+
border-color: var(--exp-card-edge);
|
|
880
|
+
border-radius: 16px;
|
|
881
|
+
padding-top: 4px;
|
|
882
|
+
background:
|
|
883
|
+
var(--exp-card-band) top / 100% 4px no-repeat,
|
|
884
|
+
var(--exp-card-bg);
|
|
885
|
+
box-shadow: var(--exp-card-drop);
|
|
886
|
+
}
|
|
887
|
+
|
|
820
888
|
/* Skin: table rows as cards (ExpScope tables="cards") ------------------- */
|
|
821
889
|
|
|
822
|
-
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
890
|
+
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
891
|
+
[data-orion-part='table']:not(
|
|
892
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
893
|
+
) {
|
|
823
894
|
margin-top: -8px;
|
|
824
895
|
border-collapse: separate;
|
|
825
896
|
border-spacing: 0 8px;
|
|
826
897
|
}
|
|
827
898
|
|
|
828
|
-
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
899
|
+
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
900
|
+
[data-orion-part='table-head']:not(
|
|
901
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
902
|
+
) {
|
|
829
903
|
border: 0;
|
|
830
904
|
background: transparent;
|
|
831
905
|
color: var(--exp-field-label);
|
|
@@ -834,7 +908,9 @@
|
|
|
834
908
|
}
|
|
835
909
|
|
|
836
910
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
837
|
-
[data-orion-part='table-head']
|
|
911
|
+
[data-orion-part='table-head']:not(
|
|
912
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
913
|
+
)
|
|
838
914
|
> th {
|
|
839
915
|
padding: 10px 16px 2px;
|
|
840
916
|
font-weight: 400;
|
|
@@ -842,19 +918,26 @@
|
|
|
842
918
|
}
|
|
843
919
|
|
|
844
920
|
:root:has(.exp-scope[data-exp-tables='cards'][data-exp-titles='playful'])
|
|
845
|
-
[data-orion-part='table-head']
|
|
921
|
+
[data-orion-part='table-head']:not(
|
|
922
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
923
|
+
)
|
|
846
924
|
> th {
|
|
847
925
|
font-family: var(--exp-title-font);
|
|
848
926
|
}
|
|
849
927
|
|
|
850
|
-
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
928
|
+
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
929
|
+
[data-orion-part='table-row']:not(
|
|
930
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
931
|
+
) {
|
|
851
932
|
border: 0;
|
|
852
933
|
background: transparent;
|
|
853
934
|
outline-offset: 2px;
|
|
854
935
|
}
|
|
855
936
|
|
|
856
937
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
857
|
-
[data-orion-part='table-row']
|
|
938
|
+
[data-orion-part='table-row']:not(
|
|
939
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
940
|
+
)
|
|
858
941
|
> td {
|
|
859
942
|
padding: 14px 16px;
|
|
860
943
|
border-top: 1px solid var(--exp-row-edge);
|
|
@@ -868,21 +951,27 @@
|
|
|
868
951
|
}
|
|
869
952
|
|
|
870
953
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
871
|
-
[data-orion-part='table-row']
|
|
954
|
+
[data-orion-part='table-row']:not(
|
|
955
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
956
|
+
)
|
|
872
957
|
> td:first-child {
|
|
873
958
|
border-left: 1px solid var(--exp-row-edge);
|
|
874
959
|
border-radius: 14px 0 0 14px;
|
|
875
960
|
}
|
|
876
961
|
|
|
877
962
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
878
|
-
[data-orion-part='table-row']
|
|
963
|
+
[data-orion-part='table-row']:not(
|
|
964
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
965
|
+
)
|
|
879
966
|
> td:last-child {
|
|
880
967
|
border-right: 1px solid var(--exp-row-edge);
|
|
881
968
|
border-radius: 0 14px 14px 0;
|
|
882
969
|
}
|
|
883
970
|
|
|
884
971
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
885
|
-
[data-orion-part='table-row']:
|
|
972
|
+
[data-orion-part='table-row']:not(
|
|
973
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
974
|
+
):is(:hover, :focus-visible, [data-selected])
|
|
886
975
|
> td {
|
|
887
976
|
border-color: var(--exp-row-edge-hover);
|
|
888
977
|
background: var(--exp-row-bg-hover);
|
|
@@ -916,6 +1005,14 @@
|
|
|
916
1005
|
transform: translateY(-2px);
|
|
917
1006
|
}
|
|
918
1007
|
|
|
1008
|
+
.exp-search[data-state='idle']:is(:hover, :focus-within) {
|
|
1009
|
+
transform: translateY(-2px);
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
.exp-search[data-state='idle']:is(:hover, :focus-within) .exp-search-lens {
|
|
1013
|
+
transform: rotate(-8deg) scale(1.06);
|
|
1014
|
+
}
|
|
1015
|
+
|
|
919
1016
|
:root:has(.exp-scope)
|
|
920
1017
|
button[data-orion-part='field-control']:not(:disabled):is(
|
|
921
1018
|
:hover,
|
|
@@ -927,7 +1024,9 @@
|
|
|
927
1024
|
}
|
|
928
1025
|
|
|
929
1026
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
930
|
-
[data-orion-part='table-row']:
|
|
1027
|
+
[data-orion-part='table-row']:not(
|
|
1028
|
+
[data-orion-part='data-table'][data-modifier='card'] *
|
|
1029
|
+
):is(:hover, :focus-visible, [data-selected])
|
|
931
1030
|
> td {
|
|
932
1031
|
transform: translateY(-2px);
|
|
933
1032
|
}
|
|
@@ -954,6 +1053,8 @@
|
|
|
954
1053
|
.exp-rotor,
|
|
955
1054
|
.exp-enter-arrow,
|
|
956
1055
|
.exp-arrow,
|
|
1056
|
+
.exp-search,
|
|
1057
|
+
.exp-search-lens,
|
|
957
1058
|
:root:has(.exp-scope) [data-orion-part='field-box'],
|
|
958
1059
|
:root:has(.exp-scope) textarea[data-orion-part='field-control'],
|
|
959
1060
|
:root:has(.exp-scope) [data-orion-part='field-icon'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/DataTable/DataTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,UAAU,EACV,KAAK,EAGN,MAAM,oBAAoB,CAAC;AAE5B,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CACT,cAAc,CAAC,OAAO,KAAK,CAAC,EAC1B,IAAI,GACJ,SAAS,GACT,MAAM,GACN,QAAQ,GACR,SAAS,GACT,SAAS,GACT,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,sBAAsB,GACtB,mBAAmB,GACnB,QAAQ,GACR,OAAO,GACP,YAAY,CACf,CAAC;IACF,UAAU,EAAE,IAAI,CACd,cAAc,CAAC,OAAO,UAAU,CAAC,EAC/B,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,GACZ,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,mBAAmB,CACtB,CAAC;IACF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/DataTable/DataTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,UAAU,EACV,KAAK,EAGN,MAAM,oBAAoB,CAAC;AAE5B,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,IAAI,CACT,cAAc,CAAC,OAAO,KAAK,CAAC,EAC1B,IAAI,GACJ,SAAS,GACT,MAAM,GACN,QAAQ,GACR,SAAS,GACT,SAAS,GACT,YAAY,GACZ,UAAU,GACV,kBAAkB,GAClB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,sBAAsB,GACtB,mBAAmB,GACnB,QAAQ,GACR,OAAO,GACP,YAAY,CACf,CAAC;IACF,UAAU,EAAE,IAAI,CACd,cAAc,CAAC,OAAO,UAAU,CAAC,EAC/B,aAAa,GACb,YAAY,GACZ,cAAc,GACd,YAAY,GACZ,iBAAiB,GACjB,mBAAmB,GACnB,eAAe,GACf,mBAAmB,CACtB,CAAC;IACF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CA+E5B"}
|
|
@@ -59,7 +59,7 @@ export function DataTable({ table, pagination, summary, modifier = 'plain', ...r
|
|
|
59
59
|
setNumberOfRows(itemsPerPage || 10);
|
|
60
60
|
pagination.pageChange(page, itemsPerPage);
|
|
61
61
|
};
|
|
62
|
-
return (<div {...restProps} className={clsx('dark:text-white', styleMap[modifier], restProps.className)}>
|
|
62
|
+
return (<div {...restProps} data-orion-part="data-table" data-modifier={modifier} className={clsx('dark:text-white', styleMap[modifier], restProps.className)}>
|
|
63
63
|
<Show>
|
|
64
64
|
<Show.When isTrue={!table.selectable}>
|
|
65
65
|
<Table {...table} numberOfRows={numberOfRows} selectable={false} multiple={undefined} currentSelection={undefined} setCurrentSelection={undefined}/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTable.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
export type ExpChipTone = 'success' | 'warning' | 'error' | 'info' | 'progress';
|
|
2
|
+
export type ExpChipTone = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress';
|
|
3
3
|
export type ExpChipProps = {
|
|
4
4
|
/** One character or a tiny icon before the label. Decorative. */
|
|
5
5
|
glyph?: ReactNode;
|
|
6
|
-
/**
|
|
6
|
+
/** A figure before the label, such as a count. Unlike the glyph, it is read. */
|
|
7
|
+
value?: ReactNode;
|
|
8
|
+
/** Color of the glyph and of the value. */
|
|
7
9
|
tone?: ExpChipTone;
|
|
8
10
|
children: ReactNode;
|
|
9
11
|
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
@@ -12,19 +14,27 @@ export type ExpChipProps = {
|
|
|
12
14
|
* such as a guarantee. The label carries the message; the glyph before it only
|
|
13
15
|
* decorates it.
|
|
14
16
|
*
|
|
17
|
+
* With `value` it shows a figure: the value in bold and in the tone color,
|
|
18
|
+
* then the label in gray, as in a row of stats under the title.
|
|
19
|
+
*
|
|
15
20
|
* Outside an `ExpScope` it falls back to the core `Badge` `neutral`, with the
|
|
16
|
-
* glyph as its icon.
|
|
21
|
+
* glyph as its icon and the value before the label.
|
|
17
22
|
*
|
|
18
23
|
* @component
|
|
19
24
|
* @example
|
|
20
25
|
* <ExpChip glyph="✓">Sensitive data protected before the analysis</ExpChip>
|
|
21
26
|
*
|
|
27
|
+
* @example
|
|
28
|
+
* // A figure
|
|
29
|
+
* <ExpChip value="3" tone="success">direct</ExpChip>
|
|
30
|
+
*
|
|
22
31
|
* @param {ExpChipProps} props - The properties of the ExpChip component.
|
|
23
32
|
* @param {ReactNode} [props.glyph] - One character or a tiny icon before the label.
|
|
24
|
-
* @param {
|
|
33
|
+
* @param {ReactNode} [props.value] - A figure before the label, such as a count.
|
|
34
|
+
* @param {'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress'} [props.tone='success'] - Color of the glyph and of the value.
|
|
25
35
|
* @param {ReactNode} props.children - Label of the chip.
|
|
26
36
|
*
|
|
27
37
|
* @returns {ReactNode} The chip, or a core `Badge` outside an `ExpScope`.
|
|
28
38
|
*/
|
|
29
|
-
export declare function ExpChip({ glyph, tone, children, ...restProps }: ExpChipProps): ReactNode;
|
|
39
|
+
export declare function ExpChip({ glyph, value, tone, children, ...restProps }: ExpChipProps): ReactNode;
|
|
30
40
|
//# sourceMappingURL=ExpChip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpChip.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ExpChip.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAYtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CAwD1B"}
|
|
@@ -4,6 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
5
|
// `warning` takes the dark amber: #FFC34C on white sits below 2:1.
|
|
6
6
|
const toneMap = {
|
|
7
|
+
neutral: 'text-black dark:text-white',
|
|
7
8
|
success: 'text-success dark:text-success-dark',
|
|
8
9
|
warning: 'text-amber dark:text-warning-dark',
|
|
9
10
|
error: 'text-error dark:text-error-dark',
|
|
@@ -15,27 +16,47 @@ const toneMap = {
|
|
|
15
16
|
* such as a guarantee. The label carries the message; the glyph before it only
|
|
16
17
|
* decorates it.
|
|
17
18
|
*
|
|
19
|
+
* With `value` it shows a figure: the value in bold and in the tone color,
|
|
20
|
+
* then the label in gray, as in a row of stats under the title.
|
|
21
|
+
*
|
|
18
22
|
* Outside an `ExpScope` it falls back to the core `Badge` `neutral`, with the
|
|
19
|
-
* glyph as its icon.
|
|
23
|
+
* glyph as its icon and the value before the label.
|
|
20
24
|
*
|
|
21
25
|
* @component
|
|
22
26
|
* @example
|
|
23
27
|
* <ExpChip glyph="✓">Sensitive data protected before the analysis</ExpChip>
|
|
24
28
|
*
|
|
29
|
+
* @example
|
|
30
|
+
* // A figure
|
|
31
|
+
* <ExpChip value="3" tone="success">direct</ExpChip>
|
|
32
|
+
*
|
|
25
33
|
* @param {ExpChipProps} props - The properties of the ExpChip component.
|
|
26
34
|
* @param {ReactNode} [props.glyph] - One character or a tiny icon before the label.
|
|
27
|
-
* @param {
|
|
35
|
+
* @param {ReactNode} [props.value] - A figure before the label, such as a count.
|
|
36
|
+
* @param {'neutral' | 'success' | 'warning' | 'error' | 'info' | 'progress'} [props.tone='success'] - Color of the glyph and of the value.
|
|
28
37
|
* @param {ReactNode} props.children - Label of the chip.
|
|
29
38
|
*
|
|
30
39
|
* @returns {ReactNode} The chip, or a core `Badge` outside an `ExpScope`.
|
|
31
40
|
*/
|
|
32
|
-
export function ExpChip({ glyph, tone = 'success', children, ...restProps }) {
|
|
41
|
+
export function ExpChip({ glyph, value, tone = 'success', children, ...restProps }) {
|
|
33
42
|
const inScope = useExpScope();
|
|
43
|
+
const hasValue = value !== undefined && value !== null;
|
|
34
44
|
if (!inScope) {
|
|
35
45
|
return (<Badge {...restProps} modifier="neutral" icon={glyph}>
|
|
36
|
-
{
|
|
46
|
+
{hasValue ? (<>
|
|
47
|
+
<strong className="font-bold">{value}</strong> {children}
|
|
48
|
+
</>) : (children)}
|
|
37
49
|
</Badge>);
|
|
38
50
|
}
|
|
51
|
+
if (hasValue) {
|
|
52
|
+
return (<span {...restProps} className={clsx('border-gray-5 text-gray-1 inline-flex items-baseline gap-1 rounded-full border bg-white px-3 py-1 text-xs leading-4', 'dark:border-gray-1 dark:bg-black-1 dark:text-gray-2', restProps.className)}>
|
|
53
|
+
{!!glyph && (<span aria-hidden="true" className={clsx('font-bold', toneMap[tone])}>
|
|
54
|
+
{glyph}
|
|
55
|
+
</span>)}
|
|
56
|
+
<strong className={clsx('font-bold', toneMap[tone])}>{value}</strong>
|
|
57
|
+
{children}
|
|
58
|
+
</span>);
|
|
59
|
+
}
|
|
39
60
|
return (<span {...restProps} className={clsx('border-gray-5 inline-flex items-center gap-1.5 rounded-full border bg-white px-3 py-1 text-xs leading-4 text-black', 'dark:border-gray-1 dark:bg-black-1 dark:text-white', restProps.className)}>
|
|
40
61
|
{!!glyph && (<span aria-hidden="true" className={clsx('font-bold', toneMap[tone])}>
|
|
41
62
|
{glyph}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpChip.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpChip.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpChip/ExpChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD,mEAAmE;AACnE,MAAM,OAAO,GAAgC;IAC3C,OAAO,EAAE,4BAA4B;IACrC,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,mCAAmC;IAC5C,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,+BAA+B;IACrC,QAAQ,EAAE,uCAAuC;CAClD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,GAAG,SAAS,EACC;IACb,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC;IAEvD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CACnD;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,EACE;YAAA,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAE,CAAA,CAAC,QAAQ,CAC1D;UAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,qHAAqH,EACrH,qDAAqD,EACrD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CACnE;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CACpE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,oHAAoH,EACpH,oDAAoD,EACpD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CACnE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -35,6 +35,10 @@ export type ExpJourneyTrackProps = {
|
|
|
35
35
|
* The line and the mascot are decorative; the stages are an ordered list
|
|
36
36
|
* whose current item carries `aria-current="step"`.
|
|
37
37
|
*
|
|
38
|
+
* Labels sit under their dots, so the first and last columns are half as wide
|
|
39
|
+
* as the rest. When the track is narrower than 28rem every label gets the same
|
|
40
|
+
* width instead, so the end labels don't spill onto their neighbours.
|
|
41
|
+
*
|
|
38
42
|
* Outside an `ExpScope` it falls back to the core `Stepper`. When the scope
|
|
39
43
|
* hides mascots, the line renders without its traveller.
|
|
40
44
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpJourneyTrack.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpJourneyTrack.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,EAAE,aAAa,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,YAAY,CAAC,aAAa,CAAC,EAC3B,MAAM,GAAG,SAAS,GAAG,SAAS,CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,uBAAuB;IACvB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,EAAE,qBAAqB,CAAC;IACnC,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AA+BrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAe,EACf,QAAgB,EAChB,GAAG,SAAS,EACb,EAAE,oBAAoB,GAAG,SAAS,CAyLlC"}
|
|
@@ -39,6 +39,10 @@ const alignOf = (index, count) => {
|
|
|
39
39
|
* The line and the mascot are decorative; the stages are an ordered list
|
|
40
40
|
* whose current item carries `aria-current="step"`.
|
|
41
41
|
*
|
|
42
|
+
* Labels sit under their dots, so the first and last columns are half as wide
|
|
43
|
+
* as the rest. When the track is narrower than 28rem every label gets the same
|
|
44
|
+
* width instead, so the end labels don't spill onto their neighbours.
|
|
45
|
+
*
|
|
42
46
|
* Outside an `ExpScope` it falls back to the core `Stepper`. When the scope
|
|
43
47
|
* hides mascots, the line renders without its traveller.
|
|
44
48
|
*
|
|
@@ -99,7 +103,7 @@ export function ExpJourneyTrack({ stages, current, ariaLabel, stateLabels, masco
|
|
|
99
103
|
const labelColumns = stages.length > 2
|
|
100
104
|
? `minmax(0, 1fr) repeat(${stages.length - 2}, minmax(0, 2fr)) minmax(0, 1fr)`
|
|
101
105
|
: `repeat(${stages.length}, minmax(0, 1fr))`;
|
|
102
|
-
return (<div {...restProps} className={clsx('relative', restProps.className)}>
|
|
106
|
+
return (<div {...restProps} className={clsx('@container relative', restProps.className)}>
|
|
103
107
|
<div aria-hidden="true" className="relative" style={{ paddingTop: showMascot ? mascotSize + 8 : 0 }}>
|
|
104
108
|
{!!showMascot && (<div className="exp-float absolute top-0 transition-[left] duration-900 ease-[cubic-bezier(.65,0,.35,1)] motion-reduce:transition-none" style={{
|
|
105
109
|
width: mascotSize,
|
|
@@ -122,7 +126,7 @@ export function ExpJourneyTrack({ stages, current, ariaLabel, stateLabels, masco
|
|
|
122
126
|
}}/>
|
|
123
127
|
</div>
|
|
124
128
|
</div>
|
|
125
|
-
<ol aria-label={ariaLabel} className="mt-3.5 grid" style={{
|
|
129
|
+
<ol aria-label={ariaLabel} className="mt-3.5 grid grid-cols-(--exp-track-columns) @max-md:auto-cols-fr @max-md:grid-flow-col @max-md:grid-cols-none @max-md:gap-x-1" style={{ '--exp-track-columns': labelColumns }}>
|
|
126
130
|
<Each of={stages} render={(stage, index) => {
|
|
127
131
|
const state = stateOf(index, current);
|
|
128
132
|
const isReached = index <= current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpJourneyTrack.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpJourneyTrack.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { type StepperStep, type StepperStepState } from '@clicoh/orion-library';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export type ExpLadderProps = {
|
|
4
|
+
/** Steps in order, with the same shape as the core `Stepper`. */
|
|
5
|
+
steps: StepperStep[];
|
|
6
|
+
/** Accessible name of the list. */
|
|
7
|
+
ariaLabel: string;
|
|
8
|
+
/** Word for each state, read after every label. A skipped step also shows it. */
|
|
9
|
+
stateLabels: Record<StepperStepState, string>;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Vertical progress drawn as a staircase: every step that was not skipped
|
|
14
|
+
* sits a little further in, with a diamond in place of the dot. The current
|
|
15
|
+
* step is tinted lavender; skipped steps are struck through and say so.
|
|
16
|
+
*
|
|
17
|
+
* Outside an `ExpScope` it falls back to the core `Stepper`, vertical and
|
|
18
|
+
* `sm`, with the same steps.
|
|
19
|
+
*
|
|
20
|
+
* @component
|
|
21
|
+
* @example
|
|
22
|
+
* <ExpLadder
|
|
23
|
+
* ariaLabel="Case lifecycle"
|
|
24
|
+
* stateLabels={{ done: 'done', current: 'current', pending: 'pending', skipped: 'skipped' }}
|
|
25
|
+
* steps={[
|
|
26
|
+
* { id: 'new', label: 'New', state: 'done' },
|
|
27
|
+
* { id: 'review', label: 'In review', state: 'skipped' },
|
|
28
|
+
* { id: 'fixed', label: 'Fixed', state: 'current' },
|
|
29
|
+
* { id: 'closed', label: 'Closed', state: 'pending' },
|
|
30
|
+
* ]}
|
|
31
|
+
* />
|
|
32
|
+
*
|
|
33
|
+
* @param {ExpLadderProps} props - The properties of the ExpLadder component.
|
|
34
|
+
* @param {StepperStep[]} props.steps - Steps in order: `id`, `label` and `state`.
|
|
35
|
+
* @param {string} props.ariaLabel - Accessible name of the list.
|
|
36
|
+
* @param {Record<StepperStepState, string>} props.stateLabels - Word for each state.
|
|
37
|
+
* @param {string} [props.className] - Classes for the list.
|
|
38
|
+
*
|
|
39
|
+
* @returns {ReactNode} The staircase, or a core `Stepper` outside an `ExpScope`.
|
|
40
|
+
*/
|
|
41
|
+
export declare function ExpLadder({ steps, ariaLabel, stateLabels, className, }: ExpLadderProps): ReactNode;
|
|
42
|
+
//# sourceMappingURL=ExpLadder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpLadder.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLadder/ExpLadder.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,WAAW,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,cAAc,GAAG,SAAS,CA8D5B"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { Each, Stepper, } from '@clicoh/orion-library';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
|
+
const INDENTS = [
|
|
6
|
+
'ml-0',
|
|
7
|
+
'ml-[7px]',
|
|
8
|
+
'ml-[14px]',
|
|
9
|
+
'ml-[21px]',
|
|
10
|
+
'ml-[28px]',
|
|
11
|
+
'ml-[35px]',
|
|
12
|
+
'ml-[42px]',
|
|
13
|
+
];
|
|
14
|
+
const rowMap = {
|
|
15
|
+
done: '',
|
|
16
|
+
current: 'bg-lavender-3 ring-1 ring-lavender-1 ring-inset dark:bg-lavender-dark-1 dark:ring-0',
|
|
17
|
+
pending: '',
|
|
18
|
+
skipped: 'opacity-60',
|
|
19
|
+
};
|
|
20
|
+
const diamondMap = {
|
|
21
|
+
done: 'size-3 bg-black dark:bg-white',
|
|
22
|
+
current: 'size-3.5 bg-linear-135 from-lavender to-violet shadow-[0_0_0_4px_rgba(106,93,249,0.18)] dark:from-lavender-dark dark:to-violet-dark',
|
|
23
|
+
pending: 'size-3 border border-gray-2',
|
|
24
|
+
skipped: 'size-3 border border-dashed border-gray-2',
|
|
25
|
+
};
|
|
26
|
+
const textMap = {
|
|
27
|
+
done: 'font-medium text-black dark:text-white',
|
|
28
|
+
current: 'font-semibold text-lavender dark:text-lavender-dark',
|
|
29
|
+
pending: 'text-gray-1 dark:text-gray-2',
|
|
30
|
+
skipped: 'text-gray-1 line-through dark:text-gray-2',
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Vertical progress drawn as a staircase: every step that was not skipped
|
|
34
|
+
* sits a little further in, with a diamond in place of the dot. The current
|
|
35
|
+
* step is tinted lavender; skipped steps are struck through and say so.
|
|
36
|
+
*
|
|
37
|
+
* Outside an `ExpScope` it falls back to the core `Stepper`, vertical and
|
|
38
|
+
* `sm`, with the same steps.
|
|
39
|
+
*
|
|
40
|
+
* @component
|
|
41
|
+
* @example
|
|
42
|
+
* <ExpLadder
|
|
43
|
+
* ariaLabel="Case lifecycle"
|
|
44
|
+
* stateLabels={{ done: 'done', current: 'current', pending: 'pending', skipped: 'skipped' }}
|
|
45
|
+
* steps={[
|
|
46
|
+
* { id: 'new', label: 'New', state: 'done' },
|
|
47
|
+
* { id: 'review', label: 'In review', state: 'skipped' },
|
|
48
|
+
* { id: 'fixed', label: 'Fixed', state: 'current' },
|
|
49
|
+
* { id: 'closed', label: 'Closed', state: 'pending' },
|
|
50
|
+
* ]}
|
|
51
|
+
* />
|
|
52
|
+
*
|
|
53
|
+
* @param {ExpLadderProps} props - The properties of the ExpLadder component.
|
|
54
|
+
* @param {StepperStep[]} props.steps - Steps in order: `id`, `label` and `state`.
|
|
55
|
+
* @param {string} props.ariaLabel - Accessible name of the list.
|
|
56
|
+
* @param {Record<StepperStepState, string>} props.stateLabels - Word for each state.
|
|
57
|
+
* @param {string} [props.className] - Classes for the list.
|
|
58
|
+
*
|
|
59
|
+
* @returns {ReactNode} The staircase, or a core `Stepper` outside an `ExpScope`.
|
|
60
|
+
*/
|
|
61
|
+
export function ExpLadder({ steps, ariaLabel, stateLabels, className, }) {
|
|
62
|
+
const inScope = useExpScope();
|
|
63
|
+
if (!inScope) {
|
|
64
|
+
return (<Stepper steps={steps} ariaLabel={ariaLabel} stateLabels={stateLabels} orientation="vertical" size="sm" className={className}/>);
|
|
65
|
+
}
|
|
66
|
+
const indents = steps.reduce((acc, step, index) => {
|
|
67
|
+
const before = index === 0 ? 0 : acc[index - 1];
|
|
68
|
+
const previous = steps[index - 1];
|
|
69
|
+
acc.push(index === 0 || previous.state === 'skipped' ? before : before + 1);
|
|
70
|
+
return acc;
|
|
71
|
+
}, []);
|
|
72
|
+
return (<ol aria-label={ariaLabel} className={clsx('flex flex-col', className)}>
|
|
73
|
+
<Each of={steps} render={(step, index) => (<li key={step.id} aria-current={step.state === 'current' ? 'step' : undefined} className={clsx('flex min-w-0 items-center gap-2.5 rounded-[10px] py-1.5 pr-2.5 pl-2', INDENTS[Math.min(indents[index], INDENTS.length - 1)], rowMap[step.state])}>
|
|
74
|
+
<span aria-hidden="true" className={clsx('flex-none rotate-45 rounded-[4px]', diamondMap[step.state])}/>
|
|
75
|
+
<span className={clsx('truncate text-[13px] leading-[18px]', textMap[step.state])}>
|
|
76
|
+
{step.label}
|
|
77
|
+
{step.state === 'skipped' ? (` · ${stateLabels.skipped}`) : (<span className="sr-only">{`, ${stateLabels[step.state]}`}</span>)}
|
|
78
|
+
</span>
|
|
79
|
+
</li>)}/>
|
|
80
|
+
</ol>);
|
|
81
|
+
}
|
|
82
|
+
//# sourceMappingURL=ExpLadder.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpLadder.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpLadder/ExpLadder.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLadder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpLadder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|