@transferwise/components 0.0.0-experimental-2383b44 → 0.0.0-experimental-a39cae6

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 (11) hide show
  1. package/build/main.css +1 -1
  2. package/build/styles/listItem/ListItem.css +1 -1
  3. package/build/styles/main.css +1 -1
  4. package/package.json +2 -2
  5. package/src/listItem/ListItem.css +1 -1
  6. package/src/listItem/ListItem.less +4 -2
  7. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +62 -0
  8. package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx +62 -0
  9. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +62 -0
  10. package/src/listItem/_stories/ListItem.story.tsx +3 -2
  11. package/src/main.css +1 -1
package/build/main.css CHANGED
@@ -3692,7 +3692,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3692
3692
  .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
3693
3693
  opacity: 0.93;
3694
3694
  }
3695
- .wds-list-item-spotlight {
3695
+ .wds-list-item-spotlight .wds-list-item-gridWrapper {
3696
3696
  padding-left: 12px;
3697
3697
  padding-left: var(--size-12);
3698
3698
  padding-right: 12px;
package/build/styles/listItem/ListItem.css CHANGED
@@ -599,7 +599,7 @@
599
599
  .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
600
600
  opacity: 0.93;
601
601
  }
602
- .wds-list-item-spotlight {
602
+ .wds-list-item-spotlight .wds-list-item-gridWrapper {
603
603
  padding-left: 12px;
604
604
  padding-left: var(--size-12);
605
605
  padding-right: 12px;
package/build/styles/main.css CHANGED
@@ -3692,7 +3692,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3692
3692
  .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
3693
3693
  opacity: 0.93;
3694
3694
  }
3695
- .wds-list-item-spotlight {
3695
+ .wds-list-item-spotlight .wds-list-item-gridWrapper {
3696
3696
  padding-left: 12px;
3697
3697
  padding-left: var(--size-12);
3698
3698
  padding-right: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-2383b44",
3
+ "version": "0.0.0-experimental-a39cae6",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -103,7 +103,7 @@
103
103
  },
104
104
  "dependencies": {
105
105
  "@babel/runtime": "^7.28.6",
106
- "@floating-ui/react": "^0.27.18",
106
+ "@floating-ui/react": "^0.27.17",
107
107
  "@headlessui/react": "^2.2.9",
108
108
  "@popperjs/core": "^2.11.8",
109
109
  "@react-aria/focus": "^3.21.4",
package/src/listItem/ListItem.css CHANGED
@@ -599,7 +599,7 @@
599
599
  .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
600
600
  opacity: 0.93;
601
601
  }
602
- .wds-list-item-spotlight {
602
+ .wds-list-item-spotlight .wds-list-item-gridWrapper {
603
603
  padding-left: 12px;
604
604
  padding-left: var(--size-12);
605
605
  padding-right: 12px;
package/src/listItem/ListItem.less CHANGED
@@ -266,8 +266,10 @@
266
266
  }
267
267
 
268
268
  &-spotlight {
269
- padding-left: var(--size-12);
270
- padding-right: var(--size-12);
269
+ .wds-list-item-gridWrapper {
270
+ padding-left: var(--size-12);
271
+ padding-right: var(--size-12);
272
+ }
271
273
 
272
274
  &-active {
273
275
  background-color: var(--color-background-neutral);
package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx ADDED
@@ -0,0 +1,62 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import List from '../../../list';
3
+ import { ListItem, type ListItemProps } from '../../ListItem';
4
+ import {
5
+ SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
6
+ SB_LIST_ITEM_CONTROLS as CONTROLS,
7
+ SB_LIST_ITEM_PROMPTS as PROMPT,
8
+ SB_LIST_ITEM_TEXT as TEXT,
9
+ SB_LIST_ITEM_MEDIA as MEDIA,
10
+ } from '../subcomponents';
11
+
12
+ export default {
13
+ component: ListItem,
14
+ title: 'Content/ListItem/tests/Breakpoints/NoMedia',
15
+ tags: ['!autodocs', '!manifest'],
16
+ parameters: {
17
+ controls: { disable: true },
18
+ actions: { disable: true },
19
+ knobs: { disable: true },
20
+ },
21
+ } satisfies Meta<ListItemProps>;
22
+
23
+ type Story = StoryObj<ListItemProps>;
24
+
25
+ const widths = [240, 241];
26
+
27
+ const sharedProps: Partial<ListItemProps> = {
28
+ subtitle: TEXT.subtitle,
29
+ valueTitle: TEXT.valueTitle,
30
+ valueSubtitle: TEXT.valueSubtitle,
31
+ additionalInfo: INFO.nonInteractive,
32
+ control: CONTROLS.switch,
33
+ prompt: PROMPT.interactive,
34
+ media: MEDIA.avatarSingle,
35
+ };
36
+
37
+ export const NoMedia: Story = {
38
+ render: () => (
39
+ <div
40
+ style={{
41
+ display: 'grid',
42
+ gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
43
+ gap: 16,
44
+ }}
45
+ >
46
+ {widths.map((w) => (
47
+ <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
48
+ {w}px
49
+ </div>
50
+ ))}
51
+ {widths.map((w) => (
52
+ <div key={w} style={{ width: w }}>
53
+ <List>
54
+ <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
55
+ <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
56
+ <ListItem {...sharedProps} title="No Spotlight" />
57
+ </List>
58
+ </div>
59
+ ))}
60
+ </div>
61
+ ),
62
+ };
package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx ADDED
@@ -0,0 +1,62 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import List from '../../../list';
3
+ import { ListItem, type ListItemProps } from '../../ListItem';
4
+ import {
5
+ SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
6
+ SB_LIST_ITEM_CONTROLS as CONTROLS,
7
+ SB_LIST_ITEM_MEDIA as MEDIA,
8
+ SB_LIST_ITEM_PROMPTS as PROMPT,
9
+ SB_LIST_ITEM_TEXT as TEXT,
10
+ } from '../subcomponents';
11
+
12
+ export default {
13
+ component: ListItem,
14
+ title: 'Content/ListItem/tests/Breakpoints/SideMedia',
15
+ tags: ['!autodocs', '!manifest'],
16
+ parameters: {
17
+ controls: { disable: true },
18
+ actions: { disable: true },
19
+ knobs: { disable: true },
20
+ },
21
+ } satisfies Meta<ListItemProps>;
22
+
23
+ type Story = StoryObj<ListItemProps>;
24
+
25
+ const widths = [332, 333];
26
+
27
+ const sharedProps: Partial<ListItemProps> = {
28
+ subtitle: TEXT.subtitle,
29
+ valueTitle: TEXT.valueTitle,
30
+ valueSubtitle: TEXT.valueSubtitle,
31
+ additionalInfo: INFO.nonInteractive,
32
+ control: CONTROLS.switch,
33
+ prompt: PROMPT.interactive,
34
+ media: MEDIA.avatarSingle,
35
+ };
36
+
37
+ export const SideMedia: Story = {
38
+ render: () => (
39
+ <div
40
+ style={{
41
+ display: 'grid',
42
+ gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
43
+ gap: 16,
44
+ }}
45
+ >
46
+ {widths.map((w) => (
47
+ <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
48
+ {w}px
49
+ </div>
50
+ ))}
51
+ {widths.map((w) => (
52
+ <div key={w} style={{ width: w }}>
53
+ <List>
54
+ <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
55
+ <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
56
+ <ListItem {...sharedProps} title="No Spotlight" />
57
+ </List>
58
+ </div>
59
+ ))}
60
+ </div>
61
+ ),
62
+ };
package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx ADDED
@@ -0,0 +1,62 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import List from '../../../list';
3
+ import { ListItem, type ListItemProps } from '../../ListItem';
4
+ import {
5
+ SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
6
+ SB_LIST_ITEM_CONTROLS as CONTROLS,
7
+ SB_LIST_ITEM_MEDIA as MEDIA,
8
+ SB_LIST_ITEM_PROMPTS as PROMPT,
9
+ SB_LIST_ITEM_TEXT as TEXT,
10
+ } from '../subcomponents';
11
+
12
+ export default {
13
+ component: ListItem,
14
+ title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
15
+ tags: ['!autodocs', '!manifest'],
16
+ parameters: {
17
+ controls: { disable: true },
18
+ actions: { disable: true },
19
+ knobs: { disable: true },
20
+ },
21
+ } satisfies Meta<ListItemProps>;
22
+
23
+ type Story = StoryObj<ListItemProps>;
24
+
25
+ const widths = [308, 309];
26
+
27
+ const sharedProps: Partial<ListItemProps> = {
28
+ subtitle: TEXT.subtitle,
29
+ valueTitle: TEXT.valueTitle,
30
+ valueSubtitle: TEXT.valueSubtitle,
31
+ additionalInfo: INFO.nonInteractive,
32
+ control: CONTROLS.switch,
33
+ prompt: PROMPT.interactive,
34
+ media: MEDIA.avatarSingle,
35
+ };
36
+
37
+ export const StackedMedia: Story = {
38
+ render: () => (
39
+ <div
40
+ style={{
41
+ display: 'grid',
42
+ gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
43
+ gap: 16,
44
+ }}
45
+ >
46
+ {widths.map((w) => (
47
+ <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
48
+ {w}px
49
+ </div>
50
+ ))}
51
+ {widths.map((w) => (
52
+ <div key={w} style={{ width: w }}>
53
+ <List>
54
+ <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
55
+ <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
56
+ <ListItem {...sharedProps} title="No Spotlight" />
57
+ </List>
58
+ </div>
59
+ ))}
60
+ </div>
61
+ ),
62
+ };
package/src/listItem/_stories/ListItem.story.tsx CHANGED
@@ -428,8 +428,9 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
428
428
 
429
429
  return (
430
430
  <List>
431
- <ListItem {...props} {...previewProps} spotlight="inactive" />
432
- <ListItem {...props} {...previewProps} spotlight="active" />
431
+ <ListItem {...props} {...previewProps} title="Inactive Spotlight" spotlight="inactive" />
432
+ <ListItem {...props} {...previewProps} title="Active Spotlight" spotlight="active" />
433
+ <ListItem {...props} {...previewProps} title="No Spotlight" />
433
434
  </List>
434
435
  );
435
436
  },
package/src/main.css CHANGED
@@ -3692,7 +3692,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3692
3692
  .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
3693
3693
  opacity: 0.93;
3694
3694
  }
3695
- .wds-list-item-spotlight {
3695
+ .wds-list-item-spotlight .wds-list-item-gridWrapper {
3696
3696
  padding-left: 12px;
3697
3697
  padding-left: var(--size-12);
3698
3698
  padding-right: 12px;