@transferwise/components 0.0.0-experimental-da1781d → 0.0.0-experimental-d155e01

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/build/i18n/cs.json +9 -9
  2. package/build/i18n/cs.json.js +9 -9
  3. package/build/i18n/cs.json.mjs +9 -9
  4. package/build/index.js +0 -1
  5. package/build/index.js.map +1 -1
  6. package/build/index.mjs +1 -1
  7. package/build/main.css +0 -188
  8. package/build/styles/main.css +0 -188
  9. package/build/types/index.d.ts +0 -2
  10. package/build/types/index.d.ts.map +1 -1
  11. package/build/types/test-utils/fake-data.d.ts +0 -2
  12. package/build/types/test-utils/fake-data.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/src/i18n/cs.json +9 -9
  15. package/src/index.ts +0 -2
  16. package/src/legacylistItem/LegacyListItem.story.tsx +5 -5
  17. package/src/legacylistItem/LegacyListItem.tests.story.tsx +6 -6
  18. package/src/main.css +0 -188
  19. package/src/main.less +0 -1
  20. package/src/test-utils/fake-data.ts +0 -5
  21. package/build/styles/listItem/ListItem.css +0 -188
  22. package/build/test-utils/assets/apple-pay-logo.svg +0 -84
  23. package/build/types/listItem/ListItem.d.ts +0 -43
  24. package/build/types/listItem/ListItem.d.ts.map +0 -1
  25. package/build/types/listItem/ListItemAdditionalInfo.d.ts +0 -9
  26. package/build/types/listItem/ListItemAdditionalInfo.d.ts.map +0 -1
  27. package/build/types/listItem/ListItemButton.d.ts +0 -4
  28. package/build/types/listItem/ListItemButton.d.ts.map +0 -1
  29. package/build/types/listItem/ListItemCheckbox.d.ts +0 -4
  30. package/build/types/listItem/ListItemCheckbox.d.ts.map +0 -1
  31. package/build/types/listItem/ListItemIconButton.d.ts +0 -7
  32. package/build/types/listItem/ListItemIconButton.d.ts.map +0 -1
  33. package/build/types/listItem/ListItemMedia.d.ts +0 -19
  34. package/build/types/listItem/ListItemMedia.d.ts.map +0 -1
  35. package/build/types/listItem/ListItemNavigation.d.ts +0 -4
  36. package/build/types/listItem/ListItemNavigation.d.ts.map +0 -1
  37. package/build/types/listItem/ListItemSwitch.d.ts +0 -3
  38. package/build/types/listItem/ListItemSwitch.d.ts.map +0 -1
  39. package/build/types/listItem/index.d.ts +0 -6
  40. package/build/types/listItem/index.d.ts.map +0 -1
  41. package/build/types/listItem/prompt/Prompt.d.ts +0 -12
  42. package/build/types/listItem/prompt/Prompt.d.ts.map +0 -1
  43. package/build/types/listItem/useItemControl.d.ts +0 -5
  44. package/build/types/listItem/useItemControl.d.ts.map +0 -1
  45. package/src/listItem/ListItem.css +0 -188
  46. package/src/listItem/ListItem.less +0 -182
  47. package/src/listItem/ListItem.story.tsx +0 -273
  48. package/src/listItem/ListItem.tsx +0 -183
  49. package/src/listItem/ListItemAdditionalInfo.tsx +0 -31
  50. package/src/listItem/ListItemButton.spec.tsx +0 -90
  51. package/src/listItem/ListItemButton.tsx +0 -18
  52. package/src/listItem/ListItemCheckbox.tsx +0 -14
  53. package/src/listItem/ListItemIconButton.tsx +0 -13
  54. package/src/listItem/ListItemMedia.tsx +0 -52
  55. package/src/listItem/ListItemNavigation.tsx +0 -11
  56. package/src/listItem/ListItemSwitch.tsx +0 -8
  57. package/src/listItem/index.ts +0 -10
  58. package/src/listItem/prompt/Prompt.spec.tsx +0 -77
  59. package/src/listItem/prompt/Prompt.story.tsx +0 -170
  60. package/src/listItem/prompt/Prompt.tsx +0 -44
  61. package/src/listItem/useItemControl.tsx +0 -12
  62. package/src/test-utils/assets/apple-pay-logo.svg +0 -84
package/src/i18n/cs.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "neptune.Button.loadingAriaLabel": "načítání",
3
- "neptune.Chips.ariaLabel": "Vyčistit {choice}",
4
- "neptune.ClearButton.ariaLabel": "Vyčistit",
3
+ "neptune.Chips.ariaLabel": "Vymazat {choice}",
4
+ "neptune.ClearButton.ariaLabel": "Vymazat",
5
5
  "neptune.CloseButton.ariaLabel": "Zavřít",
6
6
  "neptune.DateInput.day.label": "Den",
7
7
  "neptune.DateInput.day.placeholder": "DD",
@@ -47,25 +47,25 @@
47
47
  "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
48
48
  "neptune.Upload.psButtonText": "Zrušit",
49
49
  "neptune.Upload.psProcessingText": "Načítání...",
50
- "neptune.Upload.retry": "Opakovat",
50
+ "neptune.Upload.retry": "Zkusit znovu",
51
51
  "neptune.Upload.usButtonText": "Nebo vyberte soubor",
52
- "neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
52
+ "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
53
53
  "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
54
54
  "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
55
- "neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
56
- "neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
55
+ "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
56
+ "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
57
57
  "neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
58
58
  "neptune.UploadButton.uploadFile": "Nahrát soubor",
59
59
  "neptune.UploadButton.uploadFiles": "Nahrát soubory",
60
60
  "neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
61
61
  "neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
62
62
  "neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
63
- "neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
63
+ "neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
64
64
  "neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
65
65
  "neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
66
66
  "neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
67
- "neptune.UploadItem.deleting": "Mažeme...",
68
- "neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
67
+ "neptune.UploadItem.deleting": "Odstraňování...",
68
+ "neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
69
69
  "neptune.UploadItem.uploaded": "Nahráno",
70
70
  "neptune.UploadItem.uploadedFile": "Nahraný soubor",
71
71
  "neptune.UploadItem.uploading": "Nahrávání...",
package/src/index.ts CHANGED
@@ -109,7 +109,6 @@ export type {
109
109
  TableCellStatus,
110
110
  TableCellType,
111
111
  } from './table';
112
- export type { ListItemProps, ListItemAdditionalInfoProps, ListItemCheckboxProps } from './listItem';
113
112
 
114
113
  /**
115
114
  * Components
@@ -212,7 +211,6 @@ export { default as Typeahead } from './typeahead';
212
211
  export { default as Upload } from './upload';
213
212
  export { default as UploadInput } from './uploadInput';
214
213
  export { default as Table } from './table';
215
- export { default as Item } from './table';
216
214
 
217
215
  /**
218
216
  * Hooks
package/src/legacylistItem/LegacyListItem.story.tsx CHANGED
@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
6
6
  import AvatarView from '../avatarView';
7
7
  import Info from '../info';
8
8
  import Title from '../title/Title';
9
- import LegacyListItem, { List } from '.';
9
+ import ListItem, { List } from '.';
10
10
 
11
11
  export default {
12
- component: LegacyListItem,
13
- title: 'Other/LegacyListItem',
12
+ component: ListItem,
13
+ title: 'Other/ListItem',
14
14
  tags: ['autodocs'],
15
15
  };
16
16
 
@@ -18,8 +18,8 @@ const Template = ({
18
18
  title = 'Wise',
19
19
  value = 'We’re building the world’s most international account',
20
20
  ...props
21
- }: Partial<ComponentProps<typeof LegacyListItem>>) => {
22
- return <LegacyListItem title={title} value={value} {...props} />;
21
+ }: Partial<ComponentProps<typeof ListItem>>) => {
22
+ return <ListItem title={title} value={value} {...props} />;
23
23
  };
24
24
 
25
25
  export const Basic = () => {
package/src/legacylistItem/LegacyListItem.tests.story.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import { FastFlag } from '@transferwise/icons';
2
2
  import Button from '../button';
3
3
  import AvatarView from '../avatarView';
4
- import LegacyListItem, { List, type LegacyListItemProps } from '.';
4
+ import ListItem, { List, type LegacyListItemProps } from '.';
5
5
 
6
6
  export default {
7
- component: LegacyListItem,
8
- title: 'Other/LegacyListItem/tests',
7
+ component: ListItem,
8
+ title: 'Other/ListItem/tests',
9
9
  };
10
10
 
11
11
  export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
21
21
  return (
22
22
  <div style={{ width: '35rem' }}>
23
23
  <List>
24
- <LegacyListItem
24
+ <ListItem
25
25
  {...sharedProps}
26
26
  title="Default behaviour"
27
27
  value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
28
28
  />
29
29
 
30
- <LegacyListItem
30
+ <ListItem
31
31
  {...sharedProps}
32
32
  title="Wrapping the long word with a 'span.text-word-break'"
33
33
  value={
@@ -41,7 +41,7 @@ export const LongText = () => {
41
41
  }
42
42
  />
43
43
 
44
- <LegacyListItem
44
+ <ListItem
45
45
  {...sharedProps}
46
46
  title="Using '&amp;shy;' HTML entitty"
47
47
  value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
package/src/main.css CHANGED
@@ -2648,194 +2648,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2648
2648
  border-radius: 9999px !important;
2649
2649
  border-radius: var(--radius-full) !important;
2650
2650
  }
2651
- .wds-list-item {
2652
- padding: 16px;
2653
- padding: var(--size-16);
2654
- border-radius: 24px;
2655
- border-radius: var(--radius-large);
2656
- background-color: #ffffff;
2657
- background-color: var(--color-background-screen);
2658
- gap: 16px;
2659
- gap: var(--size-16);
2660
- }
2661
- .wds-list-item-interactive {
2662
- cursor: pointer;
2663
- }
2664
- .wds-list-item-interactive:hover {
2665
- background-color: var(--color-background-screen-hover);
2666
- }
2667
- .wds-list-item-interactive:active {
2668
- background-color: var(--color-background-screen-active);
2669
- }
2670
- .wds-list-item-media-image {
2671
- width: var(--item-media-image-size);
2672
- height: var(--item-media-image-size);
2673
- }
2674
- .wds-list-item-body {
2675
- width: 100%;
2676
- }
2677
- .wds-list-item-title {
2678
- color: #37517e;
2679
- color: var(--color-content-primary);
2680
- }
2681
- .wds-list-item-additional-info {
2682
- color: #768e9c;
2683
- color: var(--color-content-tertiary);
2684
- }
2685
- .wds-list-item-value {
2686
- flex: 0 0 auto;
2687
- }
2688
- .wds-list-item-control {
2689
- flex: 0 0 auto;
2690
- }
2691
- .wds-list-item-spotlight-active {
2692
- background-color: rgba(134,167,189,0.10196);
2693
- background-color: var(--color-background-neutral);
2694
- }
2695
- .wds-list-item-spotlight-active:hover {
2696
- background-color: var(--color-background-neutral-hover);
2697
- }
2698
- .wds-list-item-spotlight-active:active {
2699
- background-color: var(--color-background-neutral-active);
2700
- }
2701
- .wds-list-item-spotlight-inactive {
2702
- background-color: rgba(134, 167, 189, 0.025);
2703
- border: 1px dashed rgba(0,0,0,0.10196);
2704
- border: 1px dashed var(--color-border-neutral);
2705
- }
2706
- @supports (color: color-mix(in lch, red, blue)) {
2707
- .wds-list-item-spotlight-inactive {
2708
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2709
- }
2710
- }
2711
- .wds-list-item-spotlight-inactive:hover {
2712
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2713
- }
2714
- .wds-list-item-spotlight-inactive:active {
2715
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2716
- }
2717
- .wds-list-item-prompt {
2718
- display: inline-flex;
2719
- padding-top: calc(8px / 2);
2720
- padding-top: calc(var(--padding-x-small) / 2);
2721
- padding-bottom: calc(8px / 2);
2722
- padding-bottom: calc(var(--padding-x-small) / 2);
2723
- padding-left: calc(8px - 1px);
2724
- padding-left: calc(var(--padding-x-small) - 1px);
2725
- padding-right: 8px;
2726
- padding-right: var(--padding-x-small);
2727
- border-radius: 10px;
2728
- border-radius: var(--radius-small);
2729
- word-break: break-word;
2730
- word-wrap: break-word;
2731
- }
2732
- .wds-list-item-prompt .np-prompt-icon {
2733
- padding-right: calc(12px / 2);
2734
- padding-right: calc(var(--size-12) / 2);
2735
- padding-top: calc(4px - 1px);
2736
- padding-top: calc(var(--size-4) - 1px);
2737
- padding-bottom: calc(4px - 1px);
2738
- padding-bottom: calc(var(--size-4) - 1px);
2739
- }
2740
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
2741
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
2742
- color: var(--color-sentiment-positive-primary);
2743
- }
2744
- .wds-list-item-prompt a {
2745
- text-underline-offset: calc(4px / 2);
2746
- text-underline-offset: calc(var(--size-4) / 2);
2747
- }
2748
- .wds-list-item-prompt.np-prompt-interactive {
2749
- -webkit-text-decoration: none;
2750
- text-decoration: none;
2751
- cursor: pointer;
2752
- border: none;
2753
- }
2754
- .wds-list-item-prompt.negative {
2755
- background-color: var(--color-sentiment-negative-secondary);
2756
- color: var(--color-sentiment-negative-primary);
2757
- }
2758
- .wds-list-item-prompt.negative a {
2759
- color: var(--color-sentiment-negative-primary);
2760
- }
2761
- .wds-list-item-prompt.negative a:hover {
2762
- color: var(--color-sentiment-negative-primary-hover);
2763
- }
2764
- .wds-list-item-prompt.negative a:active {
2765
- color: var(--color-sentiment-negative-primary-active);
2766
- }
2767
- .np-prompt-interactive.wds-list-item-prompt.negative:hover {
2768
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
2769
- }
2770
- .np-prompt-interactive.wds-list-item-prompt.negative:active {
2771
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
2772
- }
2773
- .wds-list-item-prompt.positive,
2774
- .wds-list-item-prompt.discount,
2775
- .wds-list-item-prompt.savings {
2776
- background-color: var(--color-sentiment-positive-secondary);
2777
- color: var(--color-sentiment-positive-primary);
2778
- }
2779
- .wds-list-item-prompt.positive a,
2780
- .wds-list-item-prompt.discount a,
2781
- .wds-list-item-prompt.savings a {
2782
- color: var(--color-sentiment-positive-primary);
2783
- }
2784
- .wds-list-item-prompt.positive a:hover,
2785
- .wds-list-item-prompt.discount a:hover,
2786
- .wds-list-item-prompt.savings a:hover {
2787
- color: var(--color-sentiment-positive-primary-hover);
2788
- }
2789
- .wds-list-item-prompt.positive a:active,
2790
- .wds-list-item-prompt.discount a:active,
2791
- .wds-list-item-prompt.savings a:active {
2792
- color: var(--color-sentiment-positive-primary-active);
2793
- }
2794
- .np-prompt-interactive.wds-list-item-prompt.positive:hover,
2795
- .np-prompt-interactive.wds-list-item-prompt.discount:hover,
2796
- .np-prompt-interactive.wds-list-item-prompt.savings:hover {
2797
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
2798
- }
2799
- .np-prompt-interactive.wds-list-item-prompt.positive:active,
2800
- .np-prompt-interactive.wds-list-item-prompt.discount:active,
2801
- .np-prompt-interactive.wds-list-item-prompt.savings:active {
2802
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
2803
- }
2804
- .wds-list-item-prompt.neutral {
2805
- background-color: rgba(134,167,189,0.10196);
2806
- background-color: var(--color-background-neutral);
2807
- color: #37517e;
2808
- color: var(--color-content-primary);
2809
- }
2810
- .wds-list-item-prompt.neutral a {
2811
- color: #37517e;
2812
- color: var(--color-content-primary);
2813
- }
2814
- .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
2815
- background-color: var(--color-background-neutral-hover);
2816
- }
2817
- .np-prompt-interactive.wds-list-item-prompt.neutral:active {
2818
- background-color: var(--color-background-neutral-active);
2819
- }
2820
- .wds-list-item-prompt.warning {
2821
- background-color: var(--color-sentiment-warning-secondary);
2822
- color: var(--color-sentiment-warning-content);
2823
- }
2824
- .wds-list-item-prompt.warning a {
2825
- color: var(--color-sentiment-warning-content);
2826
- }
2827
- .wds-list-item-prompt.warning a:hover {
2828
- color: var(--color-sentiment-warning-content-hover);
2829
- }
2830
- .wds-list-item-prompt.warning a:active {
2831
- color: var(--color-sentiment-warning-content-active);
2832
- }
2833
- .np-prompt-interactive.wds-list-item-prompt.warning:hover {
2834
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
2835
- }
2836
- .np-prompt-interactive.wds-list-item-prompt.warning:active {
2837
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
2838
- }
2839
2651
  .np-field-control {
2840
2652
  margin-top: 4px;
2841
2653
  margin-top: var(--size-4);
package/src/main.less CHANGED
@@ -39,7 +39,6 @@
39
39
  @import "./image/Image.less";
40
40
  @import "./info/Info.less";
41
41
  @import "./inputs/Input.less";
42
- @import "./listItem/ListItem.less";
43
42
  @import "./field/Field.less";
44
43
  @import "./inputs/InputGroup.less";
45
44
  @import "./inputs/SelectInput.less";
package/src/test-utils/fake-data.ts CHANGED
@@ -1,11 +1,6 @@
1
- export const lorem5 = 'Lorem ipsum dolor sit amet.';
2
-
3
1
  export const lorem10 =
4
2
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
5
3
 
6
- export const lorem20 =
7
- 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
8
-
9
4
  export const lorem40 =
10
5
  'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';
11
6
 
package/build/styles/listItem/ListItem.css DELETED
@@ -1,188 +0,0 @@
1
- .wds-list-item {
2
- padding: 16px;
3
- padding: var(--size-16);
4
- border-radius: 24px;
5
- border-radius: var(--radius-large);
6
- background-color: #ffffff;
7
- background-color: var(--color-background-screen);
8
- gap: 16px;
9
- gap: var(--size-16);
10
- }
11
- .wds-list-item-interactive {
12
- cursor: pointer;
13
- }
14
- .wds-list-item-interactive:hover {
15
- background-color: var(--color-background-screen-hover);
16
- }
17
- .wds-list-item-interactive:active {
18
- background-color: var(--color-background-screen-active);
19
- }
20
- .wds-list-item-media-image {
21
- width: var(--item-media-image-size);
22
- height: var(--item-media-image-size);
23
- }
24
- .wds-list-item-body {
25
- width: 100%;
26
- }
27
- .wds-list-item-title {
28
- color: #37517e;
29
- color: var(--color-content-primary);
30
- }
31
- .wds-list-item-additional-info {
32
- color: #768e9c;
33
- color: var(--color-content-tertiary);
34
- }
35
- .wds-list-item-value {
36
- flex: 0 0 auto;
37
- }
38
- .wds-list-item-control {
39
- flex: 0 0 auto;
40
- }
41
- .wds-list-item-spotlight-active {
42
- background-color: rgba(134,167,189,0.10196);
43
- background-color: var(--color-background-neutral);
44
- }
45
- .wds-list-item-spotlight-active:hover {
46
- background-color: var(--color-background-neutral-hover);
47
- }
48
- .wds-list-item-spotlight-active:active {
49
- background-color: var(--color-background-neutral-active);
50
- }
51
- .wds-list-item-spotlight-inactive {
52
- background-color: rgba(134, 167, 189, 0.025);
53
- border: 1px dashed rgba(0,0,0,0.10196);
54
- border: 1px dashed var(--color-border-neutral);
55
- }
56
- @supports (color: color-mix(in lch, red, blue)) {
57
- .wds-list-item-spotlight-inactive {
58
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
59
- }
60
- }
61
- .wds-list-item-spotlight-inactive:hover {
62
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
63
- }
64
- .wds-list-item-spotlight-inactive:active {
65
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
66
- }
67
- .wds-list-item-prompt {
68
- display: inline-flex;
69
- padding-top: calc(8px / 2);
70
- padding-top: calc(var(--padding-x-small) / 2);
71
- padding-bottom: calc(8px / 2);
72
- padding-bottom: calc(var(--padding-x-small) / 2);
73
- padding-left: calc(8px - 1px);
74
- padding-left: calc(var(--padding-x-small) - 1px);
75
- padding-right: 8px;
76
- padding-right: var(--padding-x-small);
77
- border-radius: 10px;
78
- border-radius: var(--radius-small);
79
- word-break: break-word;
80
- word-wrap: break-word;
81
- }
82
- .wds-list-item-prompt .np-prompt-icon {
83
- padding-right: calc(12px / 2);
84
- padding-right: calc(var(--size-12) / 2);
85
- padding-top: calc(4px - 1px);
86
- padding-top: calc(var(--size-4) - 1px);
87
- padding-bottom: calc(4px - 1px);
88
- padding-bottom: calc(var(--size-4) - 1px);
89
- }
90
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
91
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
92
- color: var(--color-sentiment-positive-primary);
93
- }
94
- .wds-list-item-prompt a {
95
- text-underline-offset: calc(4px / 2);
96
- text-underline-offset: calc(var(--size-4) / 2);
97
- }
98
- .wds-list-item-prompt.np-prompt-interactive {
99
- -webkit-text-decoration: none;
100
- text-decoration: none;
101
- cursor: pointer;
102
- border: none;
103
- }
104
- .wds-list-item-prompt.negative {
105
- background-color: var(--color-sentiment-negative-secondary);
106
- color: var(--color-sentiment-negative-primary);
107
- }
108
- .wds-list-item-prompt.negative a {
109
- color: var(--color-sentiment-negative-primary);
110
- }
111
- .wds-list-item-prompt.negative a:hover {
112
- color: var(--color-sentiment-negative-primary-hover);
113
- }
114
- .wds-list-item-prompt.negative a:active {
115
- color: var(--color-sentiment-negative-primary-active);
116
- }
117
- .np-prompt-interactive.wds-list-item-prompt.negative:hover {
118
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
119
- }
120
- .np-prompt-interactive.wds-list-item-prompt.negative:active {
121
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
122
- }
123
- .wds-list-item-prompt.positive,
124
- .wds-list-item-prompt.discount,
125
- .wds-list-item-prompt.savings {
126
- background-color: var(--color-sentiment-positive-secondary);
127
- color: var(--color-sentiment-positive-primary);
128
- }
129
- .wds-list-item-prompt.positive a,
130
- .wds-list-item-prompt.discount a,
131
- .wds-list-item-prompt.savings a {
132
- color: var(--color-sentiment-positive-primary);
133
- }
134
- .wds-list-item-prompt.positive a:hover,
135
- .wds-list-item-prompt.discount a:hover,
136
- .wds-list-item-prompt.savings a:hover {
137
- color: var(--color-sentiment-positive-primary-hover);
138
- }
139
- .wds-list-item-prompt.positive a:active,
140
- .wds-list-item-prompt.discount a:active,
141
- .wds-list-item-prompt.savings a:active {
142
- color: var(--color-sentiment-positive-primary-active);
143
- }
144
- .np-prompt-interactive.wds-list-item-prompt.positive:hover,
145
- .np-prompt-interactive.wds-list-item-prompt.discount:hover,
146
- .np-prompt-interactive.wds-list-item-prompt.savings:hover {
147
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
148
- }
149
- .np-prompt-interactive.wds-list-item-prompt.positive:active,
150
- .np-prompt-interactive.wds-list-item-prompt.discount:active,
151
- .np-prompt-interactive.wds-list-item-prompt.savings:active {
152
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
153
- }
154
- .wds-list-item-prompt.neutral {
155
- background-color: rgba(134,167,189,0.10196);
156
- background-color: var(--color-background-neutral);
157
- color: #37517e;
158
- color: var(--color-content-primary);
159
- }
160
- .wds-list-item-prompt.neutral a {
161
- color: #37517e;
162
- color: var(--color-content-primary);
163
- }
164
- .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
165
- background-color: var(--color-background-neutral-hover);
166
- }
167
- .np-prompt-interactive.wds-list-item-prompt.neutral:active {
168
- background-color: var(--color-background-neutral-active);
169
- }
170
- .wds-list-item-prompt.warning {
171
- background-color: var(--color-sentiment-warning-secondary);
172
- color: var(--color-sentiment-warning-content);
173
- }
174
- .wds-list-item-prompt.warning a {
175
- color: var(--color-sentiment-warning-content);
176
- }
177
- .wds-list-item-prompt.warning a:hover {
178
- color: var(--color-sentiment-warning-content-hover);
179
- }
180
- .wds-list-item-prompt.warning a:active {
181
- color: var(--color-sentiment-warning-content-active);
182
- }
183
- .np-prompt-interactive.wds-list-item-prompt.warning:hover {
184
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
185
- }
186
- .np-prompt-interactive.wds-list-item-prompt.warning:active {
187
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
188
- }
package/build/test-utils/assets/apple-pay-logo.svg DELETED
@@ -1,84 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- width="165.52107px" height="105.9651px" viewBox="0 0 165.52107 105.9651" enable-background="new 0 0 165.52107 105.9651"
5
- xml:space="preserve">
6
- <g>
7
- <path id="XMLID_4_" d="M150.69807,0H14.82318c-0.5659,0-1.1328,0-1.69769,0.0033c-0.47751,0.0034-0.95391,0.0087-1.43031,0.0217
8
- c-1.039,0.0281-2.0869,0.0894-3.1129,0.2738c-1.0424,0.1876-2.0124,0.4936-2.9587,0.9754
9
- c-0.9303,0.4731-1.782,1.0919-2.52009,1.8303c-0.73841,0.7384-1.35721,1.5887-1.83021,2.52
10
- c-0.4819,0.9463-0.7881,1.9166-0.9744,2.9598c-0.18539,1.0263-0.2471,2.074-0.2751,3.1119
11
- c-0.0128,0.4764-0.01829,0.9528-0.0214,1.4291c-0.0033,0.5661-0.0022,1.1318-0.0022,1.6989V91.142
12
- c0,0.5671-0.0011,1.13181,0.0022,1.69901c0.00311,0.4763,0.0086,0.9527,0.0214,1.4291
13
- c0.028,1.03699,0.08971,2.08469,0.2751,3.11069c0.1863,1.0436,0.4925,2.0135,0.9744,2.9599
14
- c0.473,0.9313,1.0918,1.7827,1.83021,2.52c0.73809,0.7396,1.58979,1.3583,2.52009,1.8302
15
- c0.9463,0.4831,1.9163,0.7892,2.9587,0.9767c1.026,0.1832,2.0739,0.2456,3.1129,0.2737c0.4764,0.0108,0.9528,0.0172,1.43031,0.0194
16
- c0.56489,0.0044,1.13179,0.0044,1.69769,0.0044h135.87489c0.5649,0,1.13181,0,1.69659-0.0044
17
- c0.47641-0.0022,0.95282-0.0086,1.4314-0.0194c1.0368-0.0281,2.0845-0.0905,3.11301-0.2737
18
- c1.041-0.1875,2.0112-0.4936,2.9576-0.9767c0.9313-0.4719,1.7805-1.0906,2.52011-1.8302c0.7372-0.7373,1.35599-1.5887,1.8302-2.52
19
- c0.48299-0.9464,0.78889-1.9163,0.97429-2.9599c0.1855-1.026,0.2457-2.0737,0.2738-3.11069
20
- c0.013-0.4764,0.01941-0.9528,0.02161-1.4291c0.00439-0.5672,0.00439-1.1319,0.00439-1.69901V14.8242
21
- c0-0.5671,0-1.1328-0.00439-1.6989c-0.0022-0.4763-0.00861-0.9527-0.02161-1.4291c-0.02811-1.0379-0.0883-2.0856-0.2738-3.1119
22
- c-0.18539-1.0432-0.4913-2.0135-0.97429-2.9598c-0.47421-0.9313-1.093-1.7816-1.8302-2.52
23
- c-0.73961-0.7384-1.58881-1.3572-2.52011-1.8303c-0.9464-0.4818-1.9166-0.7878-2.9576-0.9754
24
- c-1.0285-0.1844-2.0762-0.2457-3.11301-0.2738c-0.47858-0.013-0.95499-0.0183-1.4314-0.0217C151.82988,0,151.26297,0,150.69807,0
25
- L150.69807,0z"/>
26
- <path id="XMLID_3_" fill="#FFFFFF" d="M150.69807,3.532l1.67149,0.0032c0.4528,0.0032,0.90561,0.0081,1.36092,0.0205
27
- c0.79201,0.0214,1.71849,0.0643,2.58209,0.2191c0.7507,0.1352,1.38029,0.3408,1.9845,0.6484
28
- c0.5965,0.3031,1.14301,0.7003,1.62019,1.1768c0.479,0.4797,0.87671,1.0271,1.18381,1.6302
29
- c0.30589,0.5995,0.51019,1.2261,0.64459,1.9823c0.1544,0.8542,0.1971,1.7832,0.21881,2.5801
30
- c0.01219,0.4498,0.01819,0.8996,0.0204,1.3601c0.00429,0.5569,0.0042,1.1135,0.0042,1.6715V91.142
31
- c0,0.558,0.00009,1.1136-0.0043,1.6824c-0.00211,0.4497-0.0081,0.8995-0.0204,1.3501c-0.02161,0.7957-0.0643,1.7242-0.2206,2.5885
32
- c-0.13251,0.7458-0.3367,1.3725-0.64429,1.975c-0.30621,0.6016-0.70331,1.1484-1.18022,1.6251
33
- c-0.47989,0.48-1.0246,0.876-1.62819,1.1819c-0.5997,0.3061-1.22821,0.51151-1.97151,0.6453
34
- c-0.88109,0.157-1.84639,0.2002-2.57339,0.2199c-0.4574,0.0103-0.9126,0.01649-1.37889,0.0187
35
- c-0.55571,0.0043-1.1134,0.0042-1.6692,0.0042H14.82318c-0.0074,0-0.0146,0-0.0221,0c-0.5494,0-1.0999,0-1.6593-0.0043
36
- c-0.4561-0.00211-0.9112-0.0082-1.3512-0.0182c-0.7436-0.0201-1.7095-0.0632-2.5834-0.2193
37
- c-0.74969-0.1348-1.3782-0.3402-1.9858-0.6503c-0.59789-0.3032-1.1422-0.6988-1.6223-1.1797
38
- c-0.4764-0.4756-0.8723-1.0207-1.1784-1.6232c-0.3064-0.6019-0.5114-1.2305-0.64619-1.9852
39
- c-0.15581-0.8626-0.19861-1.7874-0.22-2.5777c-0.01221-0.4525-0.01731-0.9049-0.02021-1.3547l-0.0022-1.3279l0.0001-0.3506V14.8242
40
- l-0.0001-0.3506l0.0021-1.3251c0.003-0.4525,0.0081-0.9049,0.02031-1.357c0.02139-0.7911,0.06419-1.7163,0.22129-2.5861
41
- c0.1336-0.7479,0.3385-1.3765,0.6465-1.9814c0.3037-0.5979,0.7003-1.1437,1.17921-1.6225
42
- c0.477-0.4772,1.02309-0.8739,1.62479-1.1799c0.6011-0.3061,1.2308-0.5116,1.9805-0.6465c0.8638-0.1552,1.7909-0.198,2.5849-0.2195
43
- c0.4526-0.0123,0.9052-0.0172,1.3544-0.0203l1.6771-0.0033H150.69807"/>
44
- <g>
45
- <g>
46
- <path d="M45.1862,35.64053c1.41724-1.77266,2.37897-4.15282,2.12532-6.58506c-2.07464,0.10316-4.60634,1.36871-6.07207,3.14276
47
- c-1.31607,1.5192-2.4809,3.99902-2.17723,6.3293C41.39111,38.72954,43.71785,37.36345,45.1862,35.64053"/>
48
- <path d="M47.28506,38.98252c-3.38211-0.20146-6.25773,1.91951-7.87286,1.91951c-1.61602,0-4.08931-1.81799-6.76438-1.76899
49
- c-3.48177,0.05114-6.71245,2.01976-8.4793,5.15079c-3.63411,6.2636-0.95904,15.55471,2.57494,20.65606
50
- c1.71618,2.5238,3.78447,5.30269,6.50976,5.20287c2.57494-0.10104,3.58421-1.66732,6.71416-1.66732
51
- c3.12765,0,4.03679,1.66732,6.76252,1.61681c2.82665-0.05054,4.59381-2.52506,6.30997-5.05132
52
- c1.96878-2.877,2.77473-5.65498,2.82542-5.80748c-0.0507-0.05051-5.45058-2.12204-5.50065-8.33358
53
- c-0.05098-5.20101,4.23951-7.6749,4.44144-7.82832C52.3832,39.4881,48.5975,39.08404,47.28506,38.98252"/>
54
- </g>
55
- <g>
56
- <path d="M76.73385,31.94381c7.35096,0,12.4697,5.06708,12.4697,12.44437c0,7.40363-5.22407,12.49704-12.65403,12.49704h-8.13892
57
- v12.94318h-5.88037v-37.8846H76.73385z M68.41059,51.9493h6.74732c5.11975,0,8.0336-2.75636,8.0336-7.53479
58
- c0-4.77792-2.91385-7.50845-8.00727-7.50845h-6.77365V51.9493z"/>
59
- <path d="M90.73997,61.97864c0-4.8311,3.70182-7.79761,10.26583-8.16526l7.56061-0.44614v-2.12639
60
- c0-3.07185-2.07423-4.90959-5.53905-4.90959c-3.28251,0-5.33041,1.57492-5.82871,4.04313h-5.35574
61
- c0.31499-4.98859,4.56777-8.66407,11.3941-8.66407c6.69466,0,10.97377,3.54432,10.97377,9.08388v19.03421h-5.43472v-4.54194
62
- h-0.13065c-1.60125,3.07185-5.09341,5.01441-8.71623,5.01441C94.52078,70.30088,90.73997,66.94038,90.73997,61.97864z
63
- M108.56641,59.4846v-2.17905l-6.8,0.41981c-3.38683,0.23649-5.30306,1.73291-5.30306,4.09579
64
- c0,2.41504,1.99523,3.99046,5.04075,3.99046C105.46823,65.81161,108.56641,63.08108,108.56641,59.4846z"/>
65
- <path d="M119.34167,79.9889v-4.5946c0.4193,0.10483,1.36425,0.10483,1.83723,0.10483c2.6252,0,4.04313-1.10245,4.90908-3.9378
66
- c0-0.05267,0.49931-1.68025,0.49931-1.70658l-9.97616-27.64562h6.14268l6.98432,22.47371h0.10432l6.98433-22.47371h5.9857
67
- l-10.34483,29.06304c-2.36186,6.69517-5.0924,8.84789-10.81577,8.84789C121.17891,80.12006,119.76098,80.06739,119.34167,79.9889
68
- z"/>
69
- </g>
70
- </g>
71
- </g>
72
- <g>
73
- </g>
74
- <g>
75
- </g>
76
- <g>
77
- </g>
78
- <g>
79
- </g>
80
- <g>
81
- </g>
82
- <g>
83
- </g>
84
- </svg>
package/build/types/listItem/ListItem.d.ts DELETED
@@ -1,43 +0,0 @@
1
- import { ReactNode } from 'react';
2
- export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
3
- export type Props = {
4
- as?: 'li' | 'div' | 'span';
5
- inverted?: boolean;
6
- disabled?: boolean;
7
- spotlight?: 'active' | 'inactive';
8
- title: ReactNode;
9
- subtitle?: ReactNode;
10
- additionalInfo?: ReactNode;
11
- valueTitle?: ReactNode;
12
- valueSubtitle?: ReactNode;
13
- media?: ReactNode;
14
- control?: ReactNode;
15
- prompt?: ReactNode;
16
- };
17
- export type ListItemContextData = {
18
- setControlType: (type: ListItemTypes) => void;
19
- ids: {
20
- label: string;
21
- additionalInfo: string;
22
- value: string;
23
- control: string;
24
- prompt: string;
25
- };
26
- props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
27
- };
28
- export declare const ListItemContext: import("react").Context<ListItemContextData>;
29
- export declare const ListItem: {
30
- ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
31
- Image: ({ alt, size, ...props }: import("./ListItemMedia").ListItemImageProps) => import("react").JSX.Element;
32
- AvatarView: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarViewProps) => import("react").JSX.Element;
33
- AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;
34
- AdditionalInfo: ({ children, action }: import("./ListItemAdditionalInfo").ListItemAdditionalInfoProps) => import("react").JSX.Element;
35
- Checkbox: (props: import("./ListItemCheckbox").ListItemCheckboxProps) => import("react").JSX.Element;
36
- IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
37
- Navigation: ({ onClick }: import("./ListItemNavigation").ListItemNavigationProps) => import("react").JSX.Element;
38
- Button: ({ priority, ...props }: import("./ListItemButton").ListItemButtonProps) => import("react").JSX.Element;
39
- Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
40
- Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => import("react").JSX.Element;
41
- };
42
- export default ListItem;
43
- //# sourceMappingURL=ListItem.d.ts.map
package/build/types/listItem/ListItem.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAa3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;uIAalB,KAAK;;;;;;;;;;;CAqGP,CAAC;AAeF,eAAe,QAAQ,CAAC"}