@transferwise/components 46.106.0 → 46.108.0

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 (152) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  4. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  5. package/build/header/Header.js +1 -0
  6. package/build/header/Header.js.map +1 -1
  7. package/build/header/Header.mjs +1 -0
  8. package/build/header/Header.mjs.map +1 -1
  9. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  11. package/build/link/Link.js +6 -2
  12. package/build/link/Link.js.map +1 -1
  13. package/build/link/Link.mjs +6 -2
  14. package/build/link/Link.mjs.map +1 -1
  15. package/build/listItem/ListItem.js +28 -16
  16. package/build/listItem/ListItem.js.map +1 -1
  17. package/build/listItem/ListItem.mjs +28 -16
  18. package/build/listItem/ListItem.mjs.map +1 -1
  19. package/build/listItem/ListItemContext.js.map +1 -1
  20. package/build/listItem/ListItemContext.mjs.map +1 -1
  21. package/build/listItem/Navigation/ListItemNavigation.js +1 -3
  22. package/build/listItem/Navigation/ListItemNavigation.js.map +1 -1
  23. package/build/listItem/Navigation/ListItemNavigation.mjs +2 -4
  24. package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -1
  25. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js +74 -0
  26. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  27. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs +72 -0
  28. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  29. package/build/listItem/Prompt/ListItemPrompt.js +10 -15
  30. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  31. package/build/listItem/Prompt/ListItemPrompt.mjs +11 -16
  32. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  33. package/build/main.css +122 -81
  34. package/build/navigationOption/NavigationOption.js.map +1 -1
  35. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  36. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  37. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  38. package/build/radioOption/RadioOption.js.map +1 -1
  39. package/build/radioOption/RadioOption.mjs.map +1 -1
  40. package/build/styles/link/Link.css +7 -0
  41. package/build/styles/listItem/ListItem.css +115 -81
  42. package/build/styles/listItem/ListItem.grid.css +11 -3
  43. package/build/styles/listItem/ListItem.vars.css +0 -0
  44. package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  45. package/build/styles/listItem/Prompt/ListItemPrompt.css +72 -72
  46. package/build/styles/main.css +122 -81
  47. package/build/summary/Summary.js +8 -0
  48. package/build/summary/Summary.js.map +1 -1
  49. package/build/summary/Summary.mjs +8 -0
  50. package/build/summary/Summary.mjs.map +1 -1
  51. package/build/switchOption/SwitchOption.js +8 -0
  52. package/build/switchOption/SwitchOption.js.map +1 -1
  53. package/build/switchOption/SwitchOption.mjs +8 -0
  54. package/build/switchOption/SwitchOption.mjs.map +1 -1
  55. package/build/types/actionOption/ActionOption.d.ts +8 -0
  56. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  57. package/build/types/checkboxOption/CheckboxOption.d.ts +8 -0
  58. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  59. package/build/types/header/Header.d.ts +1 -0
  60. package/build/types/header/Header.d.ts.map +1 -1
  61. package/build/types/legacylistItem/LegacyListItem.d.ts +8 -0
  62. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
  63. package/build/types/link/Link.d.ts +1 -1
  64. package/build/types/link/Link.d.ts.map +1 -1
  65. package/build/types/listItem/ListItem.d.ts +10 -1
  66. package/build/types/listItem/ListItem.d.ts.map +1 -1
  67. package/build/types/listItem/ListItemContext.d.ts +2 -1
  68. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  69. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -1
  70. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts +15 -0
  71. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  72. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts +3 -0
  73. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +1 -0
  74. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +4 -6
  75. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  76. package/build/types/listItem/_stories/helpers.d.ts +1 -1
  77. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  78. package/build/types/listItem/_stories/subcomponents.d.ts +4 -0
  79. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  80. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -1
  81. package/build/types/listItem/constants.d.ts +16 -0
  82. package/build/types/listItem/constants.d.ts.map +1 -0
  83. package/build/types/listItem/useListItemControl.d.ts +1 -1
  84. package/build/types/navigationOption/NavigationOption.d.ts +8 -0
  85. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  86. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +9 -0
  87. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  88. package/build/types/radioOption/RadioOption.d.ts +8 -0
  89. package/build/types/radioOption/RadioOption.d.ts.map +1 -1
  90. package/build/types/summary/Summary.d.ts +8 -0
  91. package/build/types/summary/Summary.d.ts.map +1 -1
  92. package/build/types/switchOption/SwitchOption.d.ts +8 -0
  93. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  94. package/package.json +2 -2
  95. package/src/actionOption/ActionOption.story.tsx +4 -0
  96. package/src/actionOption/ActionOption.tsx +8 -0
  97. package/src/checkboxOption/CheckboxOption.story.tsx +4 -0
  98. package/src/checkboxOption/CheckboxOption.tsx +8 -0
  99. package/src/header/Header.story.tsx +14 -0
  100. package/src/header/Header.tsx +2 -0
  101. package/src/legacylistItem/LegacyListItem.story.tsx +4 -0
  102. package/src/legacylistItem/LegacyListItem.tsx +8 -0
  103. package/src/link/Link.css +7 -0
  104. package/src/link/Link.less +8 -0
  105. package/src/link/Link.spec.tsx +28 -0
  106. package/src/link/Link.story.tsx +72 -16
  107. package/src/link/Link.tsx +5 -1
  108. package/src/listItem/ListItem.css +115 -81
  109. package/src/listItem/ListItem.grid.css +11 -3
  110. package/src/listItem/ListItem.grid.less +14 -4
  111. package/src/listItem/ListItem.less +35 -8
  112. package/src/listItem/ListItem.spec.tsx +37 -1
  113. package/src/listItem/ListItem.tsx +47 -21
  114. package/src/listItem/ListItem.vars.css +0 -0
  115. package/src/listItem/ListItem.vars.less +11 -0
  116. package/src/listItem/ListItemContext.tsx +2 -1
  117. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +1 -10
  118. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -22
  119. package/src/listItem/Navigation/ListItemNavigation.tsx +2 -3
  120. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  121. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less +162 -0
  122. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx +66 -0
  123. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx +56 -0
  124. package/src/listItem/Prompt/InlinePrompt/index.ts +2 -0
  125. package/src/listItem/Prompt/ListItemPrompt.css +72 -72
  126. package/src/listItem/Prompt/ListItemPrompt.less +2 -130
  127. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
  128. package/src/listItem/Prompt/ListItemPrompt.story.tsx +4 -2
  129. package/src/listItem/Prompt/ListItemPrompt.tsx +14 -14
  130. package/src/listItem/_stories/ListItem.disabled.story.tsx +433 -0
  131. package/src/listItem/_stories/ListItem.layout.test.story.tsx +10 -155
  132. package/src/listItem/_stories/ListItem.scenarios.story.tsx +4 -25
  133. package/src/listItem/_stories/ListItem.story.tsx +17 -187
  134. package/src/listItem/_stories/helpers.tsx +23 -6
  135. package/src/listItem/_stories/subcomponents.tsx +19 -2
  136. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  137. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +55 -0
  138. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  139. package/src/listItem/_stories/variants/helpers.tsx +28 -1
  140. package/src/listItem/constants.ts +15 -0
  141. package/src/main.css +122 -81
  142. package/src/navigationOption/NavigationOption.story.tsx +4 -1
  143. package/src/navigationOption/NavigationOption.tsx +8 -0
  144. package/src/navigationOptionsList/NavigationOptionsList.story.tsx +4 -0
  145. package/src/navigationOptionsList/NavigationOptionsList.tsx +9 -0
  146. package/src/radioOption/RadioOption.story.tsx +4 -0
  147. package/src/radioOption/RadioOption.tsx +8 -0
  148. package/src/summary/Summary.story.tsx +4 -0
  149. package/src/summary/Summary.tsx +8 -0
  150. package/src/switchOption/SwitchOption.story.tsx +4 -1
  151. package/src/switchOption/SwitchOption.tsx +8 -0
  152. package/src/table/Table.story.tsx +1 -1
package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import { Sentiment } from '../../../common';
2
+ import { BackslashCircle } from '@transferwise/icons';
3
+ import ProcessIndicator from '../../../processIndicator';
4
+ import StatusIcon from '../../../statusIcon';
5
+ import { clsx } from 'clsx';
6
+ import Body from '../../../body';
7
+
8
+ export type InlinePromptProps = {
9
+ sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
10
+ loading?: boolean;
11
+ /**
12
+ * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
13
+ */
14
+ muted?: boolean;
15
+ id?: string;
16
+ className?: string;
17
+ 'data-testid'?: string;
18
+ children: React.ReactNode;
19
+ };
20
+
21
+ export const InlinePrompt = ({
22
+ sentiment = Sentiment.POSITIVE,
23
+ muted = false,
24
+ loading = false,
25
+ className,
26
+ children,
27
+ ...rest
28
+ }: InlinePromptProps) => {
29
+ const renderMedia = () => {
30
+ if (muted) {
31
+ return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
32
+ }
33
+ if (loading) {
34
+ return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
35
+ }
36
+ return <StatusIcon size={16} sentiment={sentiment} />;
37
+ };
38
+
39
+ return (
40
+ <div
41
+ className={clsx(
42
+ 'wds-inline-prompt',
43
+ `wds-inline-prompt--${sentiment}`,
44
+ {
45
+ 'wds-inline-prompt--muted': muted,
46
+ 'wds-inline-prompt--loading': loading,
47
+ },
48
+ className,
49
+ )}
50
+ {...rest}
51
+ >
52
+ <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
53
+ <Body>{children}</Body>
54
+ </div>
55
+ );
56
+ };
package/src/listItem/Prompt/InlinePrompt/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { InlinePromptProps } from './InlinePrompt';
2
+ export { InlinePrompt } from './InlinePrompt';
package/src/listItem/Prompt/ListItemPrompt.css CHANGED
@@ -1,7 +1,5 @@
1
- .wds-list-item-prompt {
2
- grid-area: prompt;
1
+ .wds-inline-prompt {
3
2
  display: inline-flex;
4
- justify-self: start;
5
3
  text-align: left;
6
4
  padding-top: calc(8px / 2);
7
5
  padding-top: calc(var(--padding-x-small) / 2);
@@ -16,33 +14,27 @@
16
14
  word-break: break-word;
17
15
  word-wrap: break-word;
18
16
  }
19
- .wds-list-item-prompt:has(a),
20
- .wds-list-item-prompt:has(button) {
17
+ .wds-inline-prompt:has(a),
18
+ .wds-inline-prompt:has(button) {
21
19
  position: relative;
22
20
  z-index: 1;
23
21
  }
24
- .wds-list-item-prompt a,
25
- .wds-list-item-prompt button {
22
+ .wds-inline-prompt--muted {
23
+ opacity: 0.93;
24
+ filter: grayscale(1);
25
+ }
26
+ .wds-inline-prompt a,
27
+ .wds-inline-prompt button {
26
28
  text-underline-offset: calc(4px / 2);
27
29
  text-underline-offset: calc(var(--size-4) / 2);
28
30
  }
29
- .wds-list-item-prompt a:first-of-type:before,
30
- .wds-list-item-prompt button:first-of-type:before {
31
+ .wds-inline-prompt a:first-of-type:before,
32
+ .wds-inline-prompt button:first-of-type:before {
31
33
  content: '';
32
34
  position: absolute;
33
35
  inset: 0;
34
36
  }
35
- .wds-list-item-prompt.np-prompt-icon {
36
- padding-left: calc(8px - 1px);
37
- padding-left: calc(var(--padding-x-small) - 1px);
38
- padding-right: 8px;
39
- padding-right: var(--padding-x-small);
40
- display: inline-flex;
41
- align-items: center;
42
- gap: 4px;
43
- gap: var(--size-4);
44
- }
45
- .wds-list-item-prompt .np-prompt-icon {
37
+ .wds-inline-prompt__media-wrapper {
46
38
  padding-right: calc(12px / 2);
47
39
  padding-right: calc(var(--size-12) / 2);
48
40
  padding-top: calc(4px - 1px);
@@ -50,108 +42,116 @@
50
42
  padding-bottom: calc(4px - 1px);
51
43
  padding-bottom: calc(var(--size-4) - 1px);
52
44
  }
53
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
54
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
45
+ .wds-inline-prompt__media-wrapper .tw-icon-tags,
46
+ .wds-inline-prompt__media-wrapper .tw-icon-confetti {
55
47
  color: var(--color-sentiment-positive-primary);
56
48
  }
57
- .wds-list-item-prompt.negative {
49
+ .wds-inline-prompt--negative {
58
50
  background-color: var(--color-sentiment-negative-secondary);
59
51
  color: var(--color-sentiment-negative-primary);
60
52
  }
61
- .wds-list-item-prompt.negative a,
62
- .wds-list-item-prompt.negative button {
53
+ .wds-inline-prompt--negative a,
54
+ .wds-inline-prompt--negative button {
63
55
  color: var(--color-sentiment-negative-primary);
64
56
  }
65
- .wds-list-item-prompt.negative a:hover,
66
- .wds-list-item-prompt.negative button:hover {
57
+ .wds-inline-prompt--negative a:hover,
58
+ .wds-inline-prompt--negative button:hover {
67
59
  color: var(--color-sentiment-negative-primary-hover);
68
60
  }
69
- .wds-list-item-prompt.negative a:active,
70
- .wds-list-item-prompt.negative button:active {
61
+ .wds-inline-prompt--negative a:active,
62
+ .wds-inline-prompt--negative button:active {
71
63
  color: var(--color-sentiment-negative-primary-active);
72
64
  }
73
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
65
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
74
66
  background-color: var(--color-sentiment-negative-secondary-hover);
75
67
  }
76
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
68
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
77
69
  background-color: var(--color-sentiment-negative-secondary-active);
78
70
  }
79
- .wds-list-item-prompt.positive,
80
- .wds-list-item-prompt.discount,
81
- .wds-list-item-prompt.savings {
71
+ .wds-inline-prompt--positive {
82
72
  background-color: var(--color-sentiment-positive-secondary);
83
73
  color: var(--color-sentiment-positive-primary);
84
74
  }
85
- .wds-list-item-prompt.positive a,
86
- .wds-list-item-prompt.discount a,
87
- .wds-list-item-prompt.savings a,
88
- .wds-list-item-prompt.positive button,
89
- .wds-list-item-prompt.discount button,
90
- .wds-list-item-prompt.savings button {
75
+ .wds-inline-prompt--positive a,
76
+ .wds-inline-prompt--positive button {
91
77
  color: var(--color-sentiment-positive-primary);
92
78
  }
93
- .wds-list-item-prompt.positive a:hover,
94
- .wds-list-item-prompt.discount a:hover,
95
- .wds-list-item-prompt.savings a:hover,
96
- .wds-list-item-prompt.positive button:hover,
97
- .wds-list-item-prompt.discount button:hover,
98
- .wds-list-item-prompt.savings button:hover {
79
+ .wds-inline-prompt--positive a:hover,
80
+ .wds-inline-prompt--positive button:hover {
99
81
  color: var(--color-sentiment-positive-primary-hover);
100
82
  }
101
- .wds-list-item-prompt.positive a:active,
102
- .wds-list-item-prompt.discount a:active,
103
- .wds-list-item-prompt.savings a:active,
104
- .wds-list-item-prompt.positive button:active,
105
- .wds-list-item-prompt.discount button:active,
106
- .wds-list-item-prompt.savings button:active {
83
+ .wds-inline-prompt--positive a:active,
84
+ .wds-inline-prompt--positive button:active {
107
85
  color: var(--color-sentiment-positive-primary-active);
108
86
  }
109
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
110
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
111
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
87
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
112
88
  background-color: var(--color-sentiment-positive-secondary-hover);
113
89
  }
114
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
115
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
116
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
90
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
117
91
  background-color: var(--color-sentiment-positive-secondary-active);
118
92
  }
119
- .wds-list-item-prompt.neutral {
93
+ .wds-inline-prompt--proposition {
94
+ background-color: var(--color-sentiment-positive-secondary);
95
+ color: var(--color-sentiment-positive-primary);
96
+ }
97
+ .wds-inline-prompt--proposition a,
98
+ .wds-inline-prompt--proposition button {
99
+ color: var(--color-sentiment-positive-primary);
100
+ }
101
+ .wds-inline-prompt--proposition a:hover,
102
+ .wds-inline-prompt--proposition button:hover {
103
+ color: var(--color-sentiment-positive-primary-hover);
104
+ }
105
+ .wds-inline-prompt--proposition a:active,
106
+ .wds-inline-prompt--proposition button:active {
107
+ color: var(--color-sentiment-positive-primary-active);
108
+ }
109
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
110
+ background-color: var(--color-sentiment-positive-secondary-hover);
111
+ }
112
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
113
+ background-color: var(--color-sentiment-positive-secondary-active);
114
+ }
115
+ .wds-inline-prompt--neutral {
120
116
  background-color: rgba(134,167,189,0.10196);
121
117
  background-color: var(--color-background-neutral);
122
118
  color: #37517e;
123
119
  color: var(--color-content-primary);
124
120
  }
125
- .wds-list-item-prompt.neutral a,
126
- .wds-list-item-prompt.neutral button {
121
+ .wds-inline-prompt--neutral a,
122
+ .wds-inline-prompt--neutral button {
127
123
  color: #37517e;
128
124
  color: var(--color-content-primary);
129
125
  }
130
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
126
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
131
127
  background-color: var(--color-background-neutral-hover);
132
128
  }
133
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
129
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
134
130
  background-color: var(--color-background-neutral-active);
135
131
  }
136
- .wds-list-item-prompt.warning {
132
+ .wds-inline-prompt--warning {
137
133
  background-color: var(--color-sentiment-warning-secondary);
138
134
  color: var(--color-sentiment-warning-content);
139
135
  }
140
- .wds-list-item-prompt.warning a,
141
- .wds-list-item-prompt.warning button {
136
+ .wds-inline-prompt--warning a,
137
+ .wds-inline-prompt--warning button {
142
138
  color: var(--color-sentiment-warning-content);
143
139
  }
144
- .wds-list-item-prompt.warning a:hover,
145
- .wds-list-item-prompt.warning button:hover {
140
+ .wds-inline-prompt--warning a:hover,
141
+ .wds-inline-prompt--warning button:hover {
146
142
  color: var(--color-sentiment-warning-content-hover);
147
143
  }
148
- .wds-list-item-prompt.warning a:active,
149
- .wds-list-item-prompt.warning button:active {
144
+ .wds-inline-prompt--warning a:active,
145
+ .wds-inline-prompt--warning button:active {
150
146
  color: var(--color-sentiment-warning-content-active);
151
147
  }
152
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
148
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
153
149
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
154
150
  }
155
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
151
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
156
152
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
157
153
  }
154
+ .wds-list-item-prompt {
155
+ grid-area: prompt;
156
+ justify-self: start;
157
+ }
package/src/listItem/Prompt/ListItemPrompt.less CHANGED
@@ -1,134 +1,6 @@
1
+ @import "./InlinePrompt/InlinePrompt.less";
2
+
1
3
  .wds-list-item-prompt {
2
4
  grid-area: prompt;
3
-
4
- display: inline-flex;
5
5
  justify-self: start;
6
- text-align: left;
7
- padding-top: calc(var(--padding-x-small) / 2);
8
- padding-bottom: calc(var(--padding-x-small) / 2);
9
- padding-left: calc(var(--padding-x-small) - 1px);
10
- padding-right: var(--padding-x-small);
11
- border-radius: var(--radius-small);
12
- word-break: break-word;
13
- overflow-wrap: break-word;
14
-
15
- &:has(a),
16
- &:has(button) {
17
- position: relative;
18
- z-index: 1;
19
- }
20
-
21
- a, button {
22
- text-underline-offset: calc(var(--size-4) / 2);
23
- &:first-of-type {
24
- &:before {
25
- content: '';
26
- position: absolute;
27
- inset: 0;
28
- }
29
- }
30
- }
31
-
32
- &.np-prompt-icon {
33
- padding-left: calc(var(--padding-x-small) - 1px);
34
- padding-right: var(--padding-x-small);
35
- display: inline-flex;
36
- align-items: center;
37
- gap: var(--size-4);
38
- }
39
-
40
- .np-prompt-icon {
41
- padding-right: calc(var(--size-12) / 2);
42
- padding-top: calc(var(--size-4) - 1px);
43
- padding-bottom: calc(var(--size-4) - 1px);
44
-
45
- .tw-icon-tags,
46
- .tw-icon-confetti {
47
- color: var(--color-sentiment-positive-primary);
48
- }
49
- }
50
-
51
- &.negative {
52
- background-color: var(--color-sentiment-negative-secondary);
53
- color: var(--color-sentiment-negative-primary);
54
- a, button {
55
- color: var(--color-sentiment-negative-primary);
56
- &:hover {
57
- color: var(--color-sentiment-negative-primary-hover);
58
- }
59
- &:active {
60
- color: var(--color-sentiment-negative-primary-active);
61
- }
62
- }
63
- .wds-list-item-prompt&:has(a, button) {
64
- &:hover {
65
- background-color: var(--color-sentiment-negative-secondary-hover);
66
- }
67
- &:active {
68
- background-color: var(--color-sentiment-negative-secondary-active);
69
- }
70
- }
71
- }
72
- &.positive,
73
- &.discount,
74
- &.savings {
75
- background-color: var(--color-sentiment-positive-secondary);
76
- color: var(--color-sentiment-positive-primary);
77
- a, button {
78
- color: var(--color-sentiment-positive-primary);
79
- &:hover {
80
- color: var(--color-sentiment-positive-primary-hover);
81
- }
82
- &:active {
83
- color: var(--color-sentiment-positive-primary-active);
84
- }
85
- }
86
- .wds-list-item-prompt&:has(a, button) {
87
- &:hover {
88
- background-color: var(--color-sentiment-positive-secondary-hover);
89
- }
90
- &:active {
91
- background-color: var(--color-sentiment-positive-secondary-active);
92
- }
93
- }
94
- }
95
- &.neutral {
96
- background-color: var(--color-background-neutral);
97
- color: var(--color-content-primary);
98
- a, button {
99
- color: var(--color-content-primary);
100
- }
101
- .wds-list-item-prompt&:has(a, button) {
102
- &:hover {
103
- background-color: var(--color-background-neutral-hover);
104
- }
105
- &:active {
106
- background-color: var(--color-background-neutral-active);
107
- }
108
- }
109
- }
110
- &.warning {
111
- background-color: var(--color-sentiment-warning-secondary);
112
- color: var(--color-sentiment-warning-content);
113
- a, button {
114
- color: var(--color-sentiment-warning-content);
115
- &:hover {
116
- color: var(--color-sentiment-warning-content-hover);
117
- }
118
- &:active {
119
- color: var(--color-sentiment-warning-content-active);
120
- }
121
- }
122
- .wds-list-item-prompt&:has(a, button) {
123
- &:hover {
124
- // someday we'll have hover and active states for warning
125
- // background-color: var(--color-sentiment-warning-secondary-hover);
126
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
127
- }
128
- &:active {
129
- // background-color: var(--color-sentiment-warning-secondary-active);
130
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
131
- }
132
- }
133
- }
134
6
  }
package/src/listItem/Prompt/ListItemPrompt.spec.tsx CHANGED
@@ -33,4 +33,40 @@ describe('ListItem.Prompt', () => {
33
33
  expect(screen.getByTestId(iconId)).toBeInTheDocument();
34
34
  });
35
35
  });
36
+
37
+ describe('muted state', () => {
38
+ it('does not render backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is not', () => {
39
+ render(
40
+ <ListItem
41
+ title="Test Title"
42
+ disabled
43
+ prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
44
+ />,
45
+ );
46
+ expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
47
+ });
48
+
49
+ it('does not renders backslash-cross icon when parent ListItem is not disabled but disabledPromptMessage is set', () => {
50
+ render(
51
+ <ListItem
52
+ title="Test Title"
53
+ disabledPromptMessage="Test reason"
54
+ prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
55
+ />,
56
+ );
57
+ expect(screen.queryByTestId('InlinePrompt_Muted')).not.toBeInTheDocument();
58
+ });
59
+
60
+ it('renders backslash-cross icon when parent ListItem is disabled and disabledPromptMessage is provided', () => {
61
+ render(
62
+ <ListItem
63
+ title="Test Title"
64
+ disabled
65
+ disabledPromptMessage="Test reason"
66
+ prompt={<ListItem.Prompt>Message</ListItem.Prompt>}
67
+ />,
68
+ );
69
+ expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
70
+ });
71
+ });
36
72
  });
package/src/listItem/Prompt/ListItemPrompt.story.tsx CHANGED
@@ -4,12 +4,13 @@ import { lorem10, lorem5 } from '../../test-utils';
4
4
  import Link from '../../link';
5
5
  import List from '../../list';
6
6
  import { Sentiment as Sentiments } from '../../common';
7
- import { ListItem } from '../ListItem';
8
- import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
7
+ import { withoutKey } from '../_stories/helpers';
9
8
  import {
10
9
  SB_LIST_ITEM_CONTROLS as CONTROLS,
11
10
  SB_LIST_ITEM_MEDIA as MEDIA,
12
11
  } from '../_stories/subcomponents';
12
+ import { ListItem } from '../ListItem';
13
+ import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
13
14
 
14
15
  const meta: Meta<ListItemPromptProps> = {
15
16
  component: Prompt,
@@ -19,6 +20,7 @@ const meta: Meta<ListItemPromptProps> = {
19
20
  toc: true,
20
21
  },
21
22
  },
23
+ decorators: [withoutKey],
22
24
  args: {
23
25
  sentiment: undefined,
24
26
  children: 'You have done a terrible thing',
package/src/listItem/Prompt/ListItemPrompt.tsx CHANGED
@@ -1,30 +1,30 @@
1
1
  import { useContext } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { Sentiment } from '../../common';
4
- import StatusIcon from '../../statusIcon';
5
- import Body from '../../body';
6
4
  import { ListItemContext, type ListItemContextData } from '../ListItemContext';
5
+ import { InlinePrompt, type InlinePromptProps } from './InlinePrompt';
7
6
 
8
- export type ListItemPromptProps = {
9
- sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
10
- children: React.ReactNode;
11
- };
7
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;
12
8
 
13
9
  /**
14
- * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />
10
+ * This component allows for rendering an Inline Prompt. <br />
11
+ * In the future it will be a thin wrapper around a standalone component.<br />
15
12
  *
16
13
  * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
17
14
  */
18
15
  export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
19
- const { ids } = useContext<ListItemContextData>(ListItemContext);
16
+ const { ids, props } = useContext<ListItemContextData>(ListItemContext);
17
+ const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
20
18
 
21
19
  return (
22
- <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>
23
- <div className="np-prompt-icon">
24
- <StatusIcon size={16} sentiment={sentiment} />
25
- </div>
26
- <Body>{children}</Body>
27
- </div>
20
+ <InlinePrompt
21
+ id={ids.prompt}
22
+ sentiment={sentiment}
23
+ muted={isLongLivedMuted}
24
+ className="wds-list-item-prompt"
25
+ >
26
+ {isLongLivedMuted ? props.disabledPromptMessage : children}
27
+ </InlinePrompt>
28
28
  );
29
29
  };
30
30