@transferwise/components 46.132.0 → 46.133.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 (103) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/alert/Alert.js +1 -1
  4. package/build/alert/Alert.js.map +1 -1
  5. package/build/alert/Alert.mjs +1 -1
  6. package/build/alert/Alert.mjs.map +1 -1
  7. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  8. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  9. package/build/common/Option/Option.js.map +1 -1
  10. package/build/common/Option/Option.mjs.map +1 -1
  11. package/build/inputs/InputGroup.js +10 -1
  12. package/build/inputs/InputGroup.js.map +1 -1
  13. package/build/inputs/InputGroup.mjs +10 -1
  14. package/build/inputs/InputGroup.mjs.map +1 -1
  15. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  16. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  17. package/build/main.css +18 -2
  18. package/build/navigationOption/NavigationOption.js.map +1 -1
  19. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  20. package/build/phoneNumberInput/PhoneNumberInput.js +6 -1
  21. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  22. package/build/phoneNumberInput/PhoneNumberInput.mjs +6 -1
  23. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  24. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  25. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  26. package/build/radioOption/RadioOption.js.map +1 -1
  27. package/build/radioOption/RadioOption.mjs.map +1 -1
  28. package/build/styles/inputs/InputGroup.css +10 -2
  29. package/build/styles/main.css +18 -2
  30. package/build/styles/phoneNumberInput/PhoneNumberInput.css +5 -0
  31. package/build/summary/Summary.js +1 -1
  32. package/build/summary/Summary.js.map +1 -1
  33. package/build/summary/Summary.mjs +1 -1
  34. package/build/summary/Summary.mjs.map +1 -1
  35. package/build/switchOption/SwitchOption.js +1 -1
  36. package/build/switchOption/SwitchOption.js.map +1 -1
  37. package/build/switchOption/SwitchOption.mjs +1 -1
  38. package/build/switchOption/SwitchOption.mjs.map +1 -1
  39. package/build/types/actionOption/ActionOption.d.ts +1 -1
  40. package/build/types/alert/Alert.d.ts +1 -1
  41. package/build/types/checkboxOption/CheckboxOption.d.ts +1 -1
  42. package/build/types/common/Option/Option.d.ts +3 -0
  43. package/build/types/common/Option/Option.d.ts.map +1 -1
  44. package/build/types/legacylistItem/LegacyListItem.d.ts +1 -1
  45. package/build/types/navigationOption/NavigationOption.d.ts +1 -1
  46. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  47. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +2 -2
  48. package/build/types/radioOption/RadioOption.d.ts +1 -1
  49. package/build/types/summary/Summary.d.ts +1 -1
  50. package/build/types/switchOption/SwitchOption.d.ts +1 -1
  51. package/package.json +21 -21
  52. package/src/actionOption/ActionOption.story.tsx +2 -1
  53. package/src/actionOption/ActionOption.tsx +1 -1
  54. package/src/alert/Alert.story.tsx +1 -1
  55. package/src/alert/Alert.tsx +1 -1
  56. package/src/button/_stories/Button.accessibility.docs.mdx +10 -6
  57. package/src/button/_stories/Button.story.tsx +0 -2
  58. package/src/checkboxOption/CheckboxOption.story.tsx +2 -1
  59. package/src/checkboxOption/CheckboxOption.tsx +1 -1
  60. package/src/common/Option/Option.tsx +3 -0
  61. package/src/common/bottomSheet/BottomSheet.story.tsx +11 -9
  62. package/src/common/bottomSheet/BottomSheet.test.story.tsx +28 -15
  63. package/src/divider/Divider.accessibility.docs.mdx +1 -10
  64. package/src/divider/Divider.story.tsx +0 -1
  65. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +1 -2
  66. package/src/header/Header.accessibility.docs.mdx +9 -5
  67. package/src/inputs/InputGroup.css +10 -2
  68. package/src/inputs/InputGroup.less +12 -2
  69. package/src/inputs/InputGroup.story.tsx +27 -0
  70. package/src/inputs/InputGroup.tsx +10 -0
  71. package/src/inputs/SelectInput/_stories/SelectInput.story.tsx +0 -1
  72. package/src/legacylistItem/LegacyListItem.story.tsx +2 -1
  73. package/src/legacylistItem/LegacyListItem.test.story.tsx +1 -1
  74. package/src/legacylistItem/LegacyListItem.tsx +1 -1
  75. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx +0 -1
  76. package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +0 -1
  77. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +0 -1
  78. package/src/listItem/Button/ListItemButton.story.tsx +0 -1
  79. package/src/listItem/Checkbox/ListItemCheckbox.story.tsx +0 -1
  80. package/src/listItem/IconButton/ListItemIconButton.story.tsx +0 -1
  81. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -1
  82. package/src/listItem/Prompt/ListItemPrompt.story.tsx +0 -1
  83. package/src/listItem/Radio/ListItemRadio.story.tsx +0 -1
  84. package/src/listItem/Switch/ListItemSwitch.story.tsx +0 -1
  85. package/src/listItem/_stories/ListItem.story.tsx +2 -1
  86. package/src/main.css +18 -2
  87. package/src/navigationOption/NavigationOption.story.tsx +2 -1
  88. package/src/navigationOption/NavigationOption.tsx +1 -1
  89. package/src/phoneNumberInput/PhoneNumberInput.css +5 -0
  90. package/src/phoneNumberInput/PhoneNumberInput.less +7 -0
  91. package/src/phoneNumberInput/PhoneNumberInput.tsx +10 -1
  92. package/src/prompt/InfoPrompt/InfoPrompt.tsx +2 -2
  93. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +0 -1
  94. package/src/radioOption/RadioOption.story.tsx +2 -1
  95. package/src/radioOption/RadioOption.tsx +1 -1
  96. package/src/section/Section.story.tsx +12 -7
  97. package/src/sentimentSurface/SentimentSurface.story.tsx +1 -1
  98. package/src/snackbar/Snackbar.test.story.tsx +16 -104
  99. package/src/summary/Summary.story.tsx +1 -1
  100. package/src/summary/Summary.test.story.tsx +1 -1
  101. package/src/summary/Summary.tsx +1 -1
  102. package/src/switchOption/SwitchOption.story.tsx +2 -2
  103. package/src/switchOption/SwitchOption.tsx +1 -1
package/src/common/bottomSheet/BottomSheet.test.story.tsx CHANGED
@@ -8,8 +8,8 @@ import { Typography } from '../propsValues/typography';
8
8
  import Alert from '../../alert';
9
9
  import Body from '../../body';
10
10
  import Button from '../../button';
11
- import NavigationOption from '../../navigationOption';
12
11
  import Title from '../../title';
12
+ import ListItem from '../../listItem';
13
13
  import BottomSheet from './BottomSheet';
14
14
  import { withVariantConfig } from '../../../.storybook/helpers';
15
15
 
@@ -109,11 +109,15 @@ const Basic: Story = {
109
109
  {lorem10}
110
110
  <br />
111
111
  <br />
112
- <NavigationOption
113
- title="Navigation option"
114
- content="Button and icon are vertically centered."
115
- media={<FastFlag size={24} />}
116
- isContainerAligned
112
+ <ListItem
113
+ title="List item"
114
+ subtitle="Button and icon are vertically centered."
115
+ control={<ListItem.Navigation href="#" />}
116
+ media={
117
+ <ListItem.AvatarView>
118
+ <FastFlag />
119
+ </ListItem.AvatarView>
120
+ }
117
121
  />
118
122
  </>
119
123
  ),
@@ -153,16 +157,25 @@ const WithOverflowContent: Story = {
153
157
  <>
154
158
  <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
155
159
  {lorem10}
156
- <NavigationOption
157
- title="Navigation option"
158
- content="Button and icon are vertically centered."
159
- media={<FastFlag size={24} />}
160
+ <ListItem
161
+ title="List item"
162
+ subtitle="Button and icon are vertically centered."
163
+ control={<ListItem.Navigation href="#" />}
164
+ media={
165
+ <ListItem.AvatarView>
166
+ <FastFlag />
167
+ </ListItem.AvatarView>
168
+ }
160
169
  />
161
- <NavigationOption
162
- title="Navigation option"
163
- content="Button and icon are vertically centered."
164
- media={<FastFlag size={24} />}
165
- isContainerAligned
170
+ <ListItem
171
+ title="List item"
172
+ subtitle="Button and icon are vertically centered."
173
+ control={<ListItem.Navigation href="#" />}
174
+ media={
175
+ <ListItem.AvatarView>
176
+ <FastFlag />
177
+ </ListItem.AvatarView>
178
+ }
166
179
  />
167
180
  {lorem500}
168
181
  <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
package/src/divider/Divider.accessibility.docs.mdx CHANGED
@@ -1,6 +1,4 @@
1
- import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
2
- import { NavigationOption } from '..';
3
- import { Bulb } from '@transferwise/icons';
1
+ import { Meta, Source } from '@storybook/addon-docs/blocks';
4
2
 
5
3
  <Meta title="Layouts/Divider/Accessibility" />
6
4
 
@@ -8,13 +6,6 @@ import { Bulb } from '@transferwise/icons';
8
6
 
9
7
  A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
10
8
 
11
- <NavigationOption
12
- media={<Bulb size={24} />}
13
- title="Design guidance"
14
- content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
15
- href="https://wise.design/components/divider"
16
- />
17
-
18
9
  <br />
19
10
  <br />
20
11
 
package/src/divider/Divider.story.tsx CHANGED
@@ -84,7 +84,6 @@ export const Playground: Story = {
84
84
  args: {
85
85
  level: 'section',
86
86
  },
87
- tags: ['!autodocs'],
88
87
  };
89
88
 
90
89
  /**
package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx CHANGED
@@ -52,7 +52,7 @@ const withScrollbarProtector: Decorator = (Story) => (
52
52
  export default {
53
53
  title: 'Forms/ExpressiveMoneyInput',
54
54
  component: ExpressiveMoneyInput,
55
- tags: ['contribution'],
55
+ tags: ['early-access', 'contribution'],
56
56
  parameters: {
57
57
  docs: {
58
58
  canvas: {
@@ -78,7 +78,6 @@ export default {
78
78
  type Story = StoryObj<ExpressiveMoneyInputProps>;
79
79
 
80
80
  export const Playground: Story = {
81
- tags: ['!autodocs'],
82
81
  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
83
82
  };
84
83
 
package/src/header/Header.accessibility.docs.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
2
- import { NavigationOption } from '..';
3
2
  import { Bulb } from '@transferwise/icons';
3
+ import ListItem from '../listItem';
4
4
  import * as stories from './Header.story';
5
5
 
6
6
  <Meta title="Typography/Header/Accessibility" />
@@ -9,11 +9,15 @@ import * as stories from './Header.story';
9
9
 
10
10
  Given the `Header` is a key component for structuring content and conveying hierarchy, ensuring its accessibility is crucial for an inclusive experience.
11
11
 
12
- <NavigationOption
13
- media={<Bulb size={24} />}
12
+ <ListItem
14
13
  title="Design guidance"
15
- content="Before you start, familiarise yourself with the dedicated accessibility documentation."
16
- href="https://wise.design/components/section-header#accessibility"
14
+ subtitle="Before you start, familiarise yourself with the provided guidance."
15
+ control={<ListItem.Navigation href="https://wise.design/components/section-header" />}
16
+ media={
17
+ <ListItem.AvatarView>
18
+ <Bulb />
19
+ </ListItem.AvatarView>
20
+ }
17
21
  />
18
22
 
19
23
  <br />
package/src/inputs/InputGroup.css CHANGED
@@ -10,6 +10,10 @@
10
10
  grid-column-start: 1;
11
11
  grid-row-start: 1;
12
12
  }
13
+ .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
14
+ padding-left: 48px;
15
+ padding-left: var(--size-48);
16
+ }
13
17
  .np-input-addon {
14
18
  pointer-events: none;
15
19
  z-index: 10;
@@ -21,14 +25,18 @@
21
25
  transition-timing-function: ease-out;
22
26
  transition-duration: 150ms;
23
27
  }
28
+ .np-input-addon.np-input-addon--avatar > .np-avatar-view {
29
+ margin-right: 8px;
30
+ margin-right: var(--size-8);
31
+ }
24
32
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
25
33
  opacity: 0.45;
26
34
  mix-blend-mode: luminosity;
27
35
  }
28
- .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
36
+ .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
29
37
  color: var(--color-interactive-primary);
30
38
  }
31
- .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
39
+ .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
32
40
  color: #b5b7ba;
33
41
  color: var(--color-interactive-secondary-hover);
34
42
  }
package/src/inputs/InputGroup.less CHANGED
@@ -10,9 +10,19 @@
10
10
 
11
11
  /* Prevent unwanted `group-hover/input` triggers */
12
12
  border-radius: var(--radius-full);
13
+
14
+ .np-input-addon--avatar
15
+ + fieldset
16
+ .form-control.np-form-control.np-form-control--size-md.np-button-input {
17
+ padding-left: 48px;
18
+ padding-left: var(--size-48);
19
+ }
13
20
  }
14
21
 
15
22
  .np-input-addon {
23
+ &.np-input-addon--avatar > .np-avatar-view {
24
+ margin-right: var(--size-8);
25
+ }
16
26
  pointer-events: none;
17
27
  z-index: 10;
18
28
  display: inline-flex;
@@ -27,11 +37,11 @@
27
37
  mix-blend-mode: luminosity;
28
38
  }
29
39
 
30
- .np-input-group:has(>:is(input,button,select):focus-visible) & {
40
+ .np-input-group:has(> :is(input, button, select):focus-visible) & {
31
41
  color: var(--color-interactive-primary);
32
42
  }
33
43
 
34
- .np-input-group:has(>:is(input,button,select):hover) & {
44
+ .np-input-group:has(> :is(input, button, select):hover) & {
35
45
  color: var(--color-interactive-secondary-hover);
36
46
  }
37
47
 
package/src/inputs/InputGroup.story.tsx CHANGED
@@ -6,7 +6,10 @@ import { Button } from '..';
6
6
  import { Field } from '../field/Field';
7
7
 
8
8
  import { Input } from './Input';
9
+ import { Flag } from '@wise/art';
9
10
  import { InputGroup } from './InputGroup';
11
+ import AvatarView from '../avatarView';
12
+ import PhoneNumberInput from '../phoneNumberInput';
10
13
 
11
14
  export default {
12
15
  component: InputGroup,
@@ -81,3 +84,27 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
81
84
  </InputGroup>
82
85
  );
83
86
  }
87
+
88
+ export const PhoneNumberWithPrefix: Story = {
89
+ render: (args) => <PhoneNumberInputGroupWithPrefix {...args} />,
90
+ args: {
91
+ disabled: false,
92
+ },
93
+ };
94
+
95
+ function PhoneNumberInputGroupWithPrefix(args: NonNullable<Story['args']>) {
96
+ return (
97
+ <InputGroup
98
+ {...args}
99
+ addonStart={{
100
+ content: (
101
+ <AvatarView size={24}>
102
+ <Flag code="gbp" />
103
+ </AvatarView>
104
+ ),
105
+ }}
106
+ >
107
+ <PhoneNumberInput onChange={() => {}} />
108
+ </InputGroup>
109
+ );
110
+ }
package/src/inputs/InputGroup.tsx CHANGED
@@ -126,6 +126,15 @@ function InputAddon({
126
126
  }
127
127
  });
128
128
 
129
+ const isAvatarView = (node: unknown): boolean => {
130
+ if (!node || typeof node !== 'object') return false;
131
+ const { type } = node as { type?: { displayName?: string; name?: string } };
132
+ if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;
133
+ return type.displayName === 'AvatarView' || type.name === 'AvatarView';
134
+ };
135
+
136
+ const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
137
+
129
138
  return (
130
139
  /* Prevent nested controls from being labeled redundantly */
131
140
  <FieldLabelContextProvider value={undefined}>
@@ -145,6 +154,7 @@ function InputAddon({
145
154
  'np-input-addon--padding-sm': padding === 'sm',
146
155
  'np-input-addon--padding-md': padding === 'md',
147
156
  },
157
+ hasAvatarView && 'np-input-addon--avatar',
148
158
  )}
149
159
  >
150
160
  {content}
package/src/inputs/SelectInput/_stories/SelectInput.story.tsx CHANGED
@@ -61,7 +61,6 @@ const meta = {
61
61
  },
62
62
  parameters: {
63
63
  actions: { argTypesRegex: '' },
64
- docs: { toc: true },
65
64
  },
66
65
  } satisfies Meta<typeof SelectInput>;
67
66
  export default meta;
package/src/legacylistItem/LegacyListItem.story.tsx CHANGED
@@ -9,7 +9,8 @@ import Title from '../title/Title';
9
9
  import LegacyListItem from '.';
10
10
 
11
11
  /**
12
- * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
12
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs)
13
+ * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
13
14
  */
14
15
  export default {
15
16
  component: LegacyListItem,
package/src/legacylistItem/LegacyListItem.test.story.tsx CHANGED
@@ -6,7 +6,7 @@ import List from '../list';
6
6
 
7
7
  export default {
8
8
  component: LegacyListItem,
9
- tags: ['!autodocs', 'deprecated', '!manifest'],
9
+ tags: ['!autodocs', '!manifest', 'deprecated'],
10
10
  title: 'Content/LegacyListItem/Tests',
11
11
  };
12
12
 
package/src/legacylistItem/LegacyListItem.tsx CHANGED
@@ -14,7 +14,7 @@ export type LegacyListItemProps = {
14
14
  };
15
15
 
16
16
  /**
17
- * @deprecated Use `<ListItem />` instead.
17
+ * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
18
18
  * @deprecatedSince 46.104.0
19
19
  * @see [Source](../listItem/ListItem.tsx)
20
20
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx CHANGED
@@ -75,7 +75,6 @@ const previewArgTypes = {
75
75
  } as const;
76
76
 
77
77
  export const Playground: StoryObj<PreviewStoryArgs> = {
78
- tags: ['!autodocs'],
79
78
  argTypes: previewArgTypes,
80
79
  args: {
81
80
  children: lorem20,
package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx CHANGED
@@ -41,7 +41,6 @@ export default {
41
41
  type Story = StoryObj<ListItemAvatarLayoutProps>;
42
42
 
43
43
  export const Playground: Story = {
44
- tags: ['!autodocs'],
45
44
  render: (args: ListItemAvatarLayoutProps) => {
46
45
  return (
47
46
  <List>
package/src/listItem/AvatarView/ListItemAvatarView.story.tsx CHANGED
@@ -117,7 +117,6 @@ export default {
117
117
  type Story = StoryObj<ListItemAvatarViewProps>;
118
118
 
119
119
  export const Playground: Story = {
120
- tags: ['!autodocs'],
121
120
  render: (args: ListItemAvatarViewProps) => {
122
121
  return (
123
122
  <List>
package/src/listItem/Button/ListItemButton.story.tsx CHANGED
@@ -146,7 +146,6 @@ export default meta;
146
146
  type Story = StoryObj<ListItemButtonProps>;
147
147
 
148
148
  export const Playground: StoryObj<PreviewStoryArgs> = {
149
- tags: ['!autodocs'],
150
149
  render: (args: PreviewStoryArgs) => {
151
150
  const [props, previewProps] = getPropsForPreview(args);
152
151
 
package/src/listItem/Checkbox/ListItemCheckbox.story.tsx CHANGED
@@ -51,7 +51,6 @@ export default meta;
51
51
  type Story = StoryObj<ListItemCheckboxProps>;
52
52
 
53
53
  export const Playground: Story = {
54
- tags: ['!autodocs'],
55
54
  render: (args: ListItemCheckboxProps) => {
56
55
  return (
57
56
  <List>
package/src/listItem/IconButton/ListItemIconButton.story.tsx CHANGED
@@ -84,7 +84,6 @@ export default meta;
84
84
  type Story = StoryObj<ListItemIconButtonProps>;
85
85
 
86
86
  export const Playground: Story = {
87
- tags: ['!autodocs'],
88
87
  render: (args: ListItemIconButtonProps) => {
89
88
  return (
90
89
  <List>
package/src/listItem/Navigation/ListItemNavigation.story.tsx CHANGED
@@ -37,7 +37,6 @@ export default meta;
37
37
  type Story = StoryObj<ListItemNavigationProps>;
38
38
 
39
39
  export const Playground: Story = {
40
- tags: ['!autodocs'],
41
40
  render: (args: ListItemNavigationProps) => {
42
41
  return (
43
42
  <List>
package/src/listItem/Prompt/ListItemPrompt.story.tsx CHANGED
@@ -50,7 +50,6 @@ export default meta;
50
50
  type Story = StoryObj<ListItemPromptProps>;
51
51
 
52
52
  export const Playground: Story = {
53
- tags: ['!autodocs'],
54
53
  parameters: {
55
54
  docs: {
56
55
  source: 'dynamic',
package/src/listItem/Radio/ListItemRadio.story.tsx CHANGED
@@ -33,7 +33,6 @@ export default meta;
33
33
  type Story = StoryObj<ListItemRadioProps>;
34
34
 
35
35
  export const Playground: Story = {
36
- tags: ['!autodocs'],
37
36
  render: (args: ListItemRadioProps) => {
38
37
  return (
39
38
  <List>
package/src/listItem/Switch/ListItemSwitch.story.tsx CHANGED
@@ -33,7 +33,6 @@ export default meta;
33
33
  type Story = StoryObj<ListItemSwitchProps>;
34
34
 
35
35
  export const Playground: Story = {
36
- tags: ['!autodocs'],
37
36
  render: (args: ListItemSwitchProps) => {
38
37
  return (
39
38
  <List>
package/src/listItem/_stories/ListItem.story.tsx CHANGED
@@ -29,10 +29,11 @@ const hideControls = disableControls([
29
29
  * List Items let users review or select options from a dynamic list.<br />
30
30
  * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes) and the [design spec](https://wise.design/components/list-item). <br />
31
31
  *
32
- * > This component replaces now deprecated `LegacyListItem`, `Summary` and all `*Option` components
32
+ * > This component replaces now deprecated `LegacyListItem`, `Summary` and all `*Option` components (run codemod to migrate: **`npx @wise/wds-codemods@latest info-prompt`**).
33
33
  */
34
34
  export default {
35
35
  component: ListItem,
36
+ tags: ['new'],
36
37
  subcomponents: {
37
38
  'ListItem.AdditionalInfo': ListItem.AdditionalInfo,
38
39
  'ListItem.Prompt': ListItem.Prompt,
package/src/main.css CHANGED
@@ -30167,6 +30167,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30167
30167
  grid-row-start: 1;
30168
30168
  }
30169
30169
 
30170
+ .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
30171
+ padding-left: 48px;
30172
+ padding-left: var(--size-48);
30173
+ }
30174
+
30170
30175
  .np-input-addon {
30171
30176
  pointer-events: none;
30172
30177
  z-index: 10;
@@ -30179,16 +30184,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30179
30184
  transition-duration: 150ms;
30180
30185
  }
30181
30186
 
30187
+ .np-input-addon.np-input-addon--avatar > .np-avatar-view {
30188
+ margin-right: 8px;
30189
+ margin-right: var(--size-8);
30190
+ }
30191
+
30182
30192
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
30183
30193
  opacity: 0.45;
30184
30194
  mix-blend-mode: luminosity;
30185
30195
  }
30186
30196
 
30187
- .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
30197
+ .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
30188
30198
  color: var(--color-interactive-primary);
30189
30199
  }
30190
30200
 
30191
- .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
30201
+ .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
30192
30202
  color: #b5b7ba;
30193
30203
  color: var(--color-interactive-secondary-hover);
30194
30204
  }
@@ -31687,6 +31697,12 @@ html:not([dir="rtl"]) .np-navigation-option {
31687
31697
  width: 100%;
31688
31698
  }
31689
31699
 
31700
+ .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
31701
+ padding-inline-start: 48px;
31702
+ padding-inline-start: var(--size-48);
31703
+ padding-inline-end: 26px !important;
31704
+ }
31705
+
31690
31706
  .tw-telephone__number-input {
31691
31707
  flex: auto 1 1;
31692
31708
  }
package/src/navigationOption/NavigationOption.story.tsx CHANGED
@@ -16,7 +16,8 @@ import { fn } from 'storybook/test';
16
16
  type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
17
17
 
18
18
  /**
19
- * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
19
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs)
20
+ * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
20
21
  */
21
22
  const meta: Meta<StoryArgs> = {
22
23
  component: NavigationOption,
package/src/navigationOption/NavigationOption.tsx CHANGED
@@ -9,7 +9,7 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
9
9
  export type NavigationOptionProps = OptionProps;
10
10
 
11
11
  /**
12
- * @deprecated Use `<ListItem />` instead.
12
+ * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
13
13
  * @deprecatedSince 46.104.0
14
14
  * @see [Source](../listItem/ListItem.tsx)
15
15
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
package/src/phoneNumberInput/PhoneNumberInput.css CHANGED
@@ -18,6 +18,11 @@
18
18
  .tw-telephone__country-select .np-input-group {
19
19
  width: 100%;
20
20
  }
21
+ .tw-telephone__country-select--with-input-group-addon-start .np-button-input {
22
+ padding-inline-start: 48px;
23
+ padding-inline-start: var(--size-48);
24
+ padding-inline-end: 26px !important;
25
+ }
21
26
  .tw-telephone__number-input {
22
27
  flex: auto 1 1;
23
28
  }
package/src/phoneNumberInput/PhoneNumberInput.less CHANGED
@@ -19,6 +19,13 @@
19
19
  }
20
20
  }
21
21
 
22
+ .tw-telephone__country-select--with-input-group-addon-start {
23
+ .np-button-input {
24
+ padding-inline-start: var(--size-48);
25
+ padding-inline-end: 26px !important;
26
+ }
27
+ }
28
+
22
29
  .tw-telephone__number-input {
23
30
  flex: auto 1 1;
24
31
  }
package/src/phoneNumberInput/PhoneNumberInput.tsx CHANGED
@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
3
3
 
4
4
  import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
5
5
  import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
6
+ import { useInputPaddings } from '../inputs/InputGroup';
6
7
  import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
7
8
  import messages from './PhoneNumberInput.messages';
8
9
  import countries from './data/countries';
@@ -67,6 +68,8 @@ const PhoneNumberInput = ({
67
68
  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
68
69
  const phoneNumberInputRef = useRef<HTMLInputElement>(null);
69
70
  const inputAttributes = useInputAttributes({ nonLabelable: true });
71
+ const { paddingInlineStart } = useInputPaddings();
72
+ const hasInputGroupAddonStart = paddingInlineStart != null;
70
73
  const fieldLabelRef = useFieldLabelRef();
71
74
  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
72
75
 
@@ -197,7 +200,13 @@ const PhoneNumberInput = ({
197
200
  <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
198
201
  {formatMessage(messages.countryCodeLabel)}
199
202
  </label>
200
- <div className="tw-telephone__country-select">
203
+ <div
204
+ className={`tw-telephone__country-select${
205
+ hasInputGroupAddonStart
206
+ ? ' tw-telephone__country-select--with-input-group-addon-start'
207
+ : ''
208
+ }`}
209
+ >
201
210
  <SelectInput
202
211
  triggerRef={countryCodeSelectRef}
203
212
  placeholder={formatMessage(messages.selectInputPlaceholder)}
package/src/prompt/InfoPrompt/InfoPrompt.tsx CHANGED
@@ -65,11 +65,11 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
65
65
  };
66
66
 
67
67
  /**
68
- * InfoPrompt displays important contextual messages to users within a screen.
68
+ * `InfoPrompt` displays important contextual messages to users within a screen.
69
69
  * It provides a visually distinct way to communicate information, warnings, errors,
70
70
  * or positive feedback with optional actions and dismissal capabilities.
71
71
  *
72
- * Use this component to replace the deprecated Alert component.
72
+ * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \@wise/wds-codemods@latest info-prompt`**).
73
73
  *
74
74
  * Guidance can be found in the [design system](https://wise.design/components/info-prompt).
75
75
  */
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -96,7 +96,6 @@ const getPropsForPreview = (
96
96
  };
97
97
 
98
98
  export const Playground: StoryObj<PreviewStoryArgs> = {
99
- tags: ['!autodocs'],
100
99
  argTypes: previewArgTypes,
101
100
  args: {
102
101
  previewMedia: false,
package/src/radioOption/RadioOption.story.tsx CHANGED
@@ -6,7 +6,8 @@ import { Header, Nudge, Section, Title, Typography } from '..';
6
6
  import RadioOption, { RadioOptionProps } from './RadioOption';
7
7
 
8
8
  /**
9
- * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Radio control](?path=/docs/content-listitem-listitem-radio--docs).
9
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Radio control](?path=/docs/content-listitem-listitem-radio--docs)
10
+ * (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
10
11
  */
11
12
  export default {
12
13
  component: RadioOption,
package/src/radioOption/RadioOption.tsx CHANGED
@@ -17,7 +17,7 @@ export interface RadioOptionProps<T extends string | number = string>
17
17
  }
18
18
 
19
19
  /**
20
- * @deprecated Use `<ListItem />` instead.
20
+ * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
21
21
  * @deprecatedSince 46.104.0
22
22
  * @see [Source](../listItem/ListItem.tsx)
23
23
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
package/src/section/Section.story.tsx CHANGED
@@ -1,11 +1,10 @@
1
1
  import { FastFlag as FastFlagIcon } from '@transferwise/icons';
2
2
  import { useState } from 'react';
3
-
3
+ import { action } from 'storybook/actions';
4
4
  import Accordion from '../accordion';
5
5
  import Card from '../card';
6
6
  import Header from '../header';
7
- import NavigationOption from '../navigationOption';
8
-
7
+ import ListItem from '../listItem';
9
8
  import Section from './Section';
10
9
 
11
10
  export default {
@@ -105,12 +104,18 @@ export const WithCards = () => {
105
104
  );
106
105
  };
107
106
 
108
- export const WithNavigationOptions = () => {
107
+ export const WithListItems = () => {
109
108
  return (
110
109
  <Section>
111
- <Header title="Section with options" />
112
- <NavigationOption title="Option 1" onClick={() => alert('Option 1')} />
113
- <NavigationOption title="Option 2" onClick={() => alert('Option 2')} />
110
+ <Header title="Section with list items" />
111
+ <ListItem
112
+ title="Item 1"
113
+ control={<ListItem.Navigation onClick={() => action('Item 1')} />}
114
+ />
115
+ <ListItem
116
+ title="Item 2"
117
+ control={<ListItem.Navigation onClick={() => action('Item 2')} />}
118
+ />
114
119
  </Section>
115
120
  );
116
121
  };
package/src/sentimentSurface/SentimentSurface.story.tsx CHANGED
@@ -32,6 +32,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
32
32
  const meta: Meta<typeof SentimentSurface> = {
33
33
  component: SentimentSurface,
34
34
  title: 'Foundations/SentimentSurface',
35
+ tags: ['early-access'],
35
36
  argTypes: {
36
37
  sentiment: {
37
38
  control: 'select',
@@ -124,7 +125,6 @@ export const Playground: Story = {
124
125
  </div>
125
126
  ),
126
127
  },
127
- tags: ['!autodocs'],
128
128
  };
129
129
 
130
130
  const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];