@transferwise/components 0.0.0-experimental-fb28e59 → 0.0.0-experimental-960e3a0

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 (95) hide show
  1. package/build/flowNavigation/animatedLabel/AnimatedLabel.js +1 -1
  2. package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
  3. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs +1 -1
  4. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
  5. package/build/i18n/cs.json +9 -9
  6. package/build/i18n/cs.json.js +9 -9
  7. package/build/i18n/cs.json.mjs +9 -9
  8. package/build/index.js +4 -4
  9. package/build/index.mjs +3 -3
  10. package/build/{listItem/ListItem.js → legacylistItem/LegacyListItem.js} +3 -3
  11. package/build/legacylistItem/LegacyListItem.js.map +1 -0
  12. package/build/{listItem/ListItem.mjs → legacylistItem/LegacyListItem.mjs} +3 -3
  13. package/build/legacylistItem/LegacyListItem.mjs.map +1 -0
  14. package/build/legacylistItem/List.js.map +1 -0
  15. package/build/legacylistItem/List.mjs.map +1 -0
  16. package/build/main.css +3 -183
  17. package/build/styles/main.css +3 -183
  18. package/build/styles/switch/Switch.css +3 -0
  19. package/build/types/index.d.ts +2 -4
  20. package/build/types/index.d.ts.map +1 -1
  21. package/build/types/{listItem/ListItem.d.ts → legacylistItem/LegacyListItem.d.ts} +4 -4
  22. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -0
  23. package/build/types/legacylistItem/List.d.ts.map +1 -0
  24. package/build/types/legacylistItem/index.d.ts +5 -0
  25. package/build/types/legacylistItem/index.d.ts.map +1 -0
  26. package/build/types/test-utils/fake-data.d.ts +0 -2
  27. package/build/types/test-utils/fake-data.d.ts.map +1 -1
  28. package/package.json +3 -3
  29. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +1 -1
  30. package/src/i18n/cs.json +9 -9
  31. package/src/index.ts +2 -4
  32. package/src/{listItem/ListItem.tests.story.tsx → legacylistItem/LegacyListItem.tests.story.tsx} +2 -2
  33. package/src/{listItem/ListItem.tsx → legacylistItem/LegacyListItem.tsx} +3 -3
  34. package/src/legacylistItem/index.ts +4 -0
  35. package/src/main.css +3 -183
  36. package/src/main.less +1 -2
  37. package/src/switch/Switch.css +3 -0
  38. package/src/switch/Switch.less +1 -0
  39. package/src/test-utils/fake-data.ts +0 -5
  40. package/build/listItem/List.js.map +0 -1
  41. package/build/listItem/List.mjs.map +0 -1
  42. package/build/listItem/ListItem.js.map +0 -1
  43. package/build/listItem/ListItem.mjs.map +0 -1
  44. package/build/styles/item/Item.css +0 -183
  45. package/build/test-utils/assets/apple-pay-logo.svg +0 -84
  46. package/build/types/item/Item.d.ts +0 -44
  47. package/build/types/item/Item.d.ts.map +0 -1
  48. package/build/types/item/ItemAdditionalInfo.d.ts +0 -9
  49. package/build/types/item/ItemAdditionalInfo.d.ts.map +0 -1
  50. package/build/types/item/ItemButton.d.ts +0 -7
  51. package/build/types/item/ItemButton.d.ts.map +0 -1
  52. package/build/types/item/ItemCheckbox.d.ts +0 -4
  53. package/build/types/item/ItemCheckbox.d.ts.map +0 -1
  54. package/build/types/item/ItemIconButton.d.ts +0 -4
  55. package/build/types/item/ItemIconButton.d.ts.map +0 -1
  56. package/build/types/item/ItemMedia.d.ts +0 -19
  57. package/build/types/item/ItemMedia.d.ts.map +0 -1
  58. package/build/types/item/ItemNavigation.d.ts +0 -4
  59. package/build/types/item/ItemNavigation.d.ts.map +0 -1
  60. package/build/types/item/ItemSwitch.d.ts +0 -3
  61. package/build/types/item/ItemSwitch.d.ts.map +0 -1
  62. package/build/types/item/index.d.ts +0 -6
  63. package/build/types/item/index.d.ts.map +0 -1
  64. package/build/types/item/prompt/Prompt.d.ts +0 -12
  65. package/build/types/item/prompt/Prompt.d.ts.map +0 -1
  66. package/build/types/listItem/List.d.ts.map +0 -1
  67. package/build/types/listItem/ListItem.d.ts.map +0 -1
  68. package/build/types/listItem/index.d.ts +0 -5
  69. package/build/types/listItem/index.d.ts.map +0 -1
  70. package/src/item/Item.css +0 -183
  71. package/src/item/Item.less +0 -177
  72. package/src/item/Item.story.tsx +0 -175
  73. package/src/item/Item.tsx +0 -177
  74. package/src/item/ItemAdditionalInfo.tsx +0 -31
  75. package/src/item/ItemButton.tsx +0 -25
  76. package/src/item/ItemCheckbox.tsx +0 -19
  77. package/src/item/ItemIconButton.tsx +0 -15
  78. package/src/item/ItemMedia.tsx +0 -52
  79. package/src/item/ItemNavigation.tsx +0 -16
  80. package/src/item/ItemSwitch.tsx +0 -13
  81. package/src/item/index.ts +0 -6
  82. package/src/item/prompt/Prompt.spec.tsx +0 -77
  83. package/src/item/prompt/Prompt.story.tsx +0 -170
  84. package/src/item/prompt/Prompt.tsx +0 -44
  85. package/src/listItem/index.ts +0 -4
  86. package/src/test-utils/assets/apple-pay-logo.svg +0 -84
  87. /package/build/{listItem → legacylistItem}/List.js +0 -0
  88. /package/build/{listItem → legacylistItem}/List.mjs +0 -0
  89. /package/build/styles/{listItem/ListItem.css → legacylistItem/LegacyListItem.css} +0 -0
  90. /package/build/types/{listItem → legacylistItem}/List.d.ts +0 -0
  91. /package/src/{listItem/ListItem.css → legacylistItem/LegacyListItem.css} +0 -0
  92. /package/src/{listItem/ListItem.less → legacylistItem/LegacyListItem.less} +0 -0
  93. /package/src/{listItem/ListItem.spec.tsx → legacylistItem/LegacyListItem.spec.tsx} +0 -0
  94. /package/src/{listItem/ListItem.story.tsx → legacylistItem/LegacyListItem.story.tsx} +0 -0
  95. /package/src/{listItem → legacylistItem}/List.tsx +0 -0
package/src/item/Item.tsx DELETED
@@ -1,177 +0,0 @@
1
- import { createContext, ReactNode, useId, useMemo, useState } from 'react';
2
- import { Typography } from '../common';
3
- import Body from '../body';
4
- import { AdditionalInfo } from './ItemAdditionalInfo';
5
- import { IconButton } from './ItemIconButton';
6
- import { Checkbox } from './ItemCheckbox';
7
- import { Navigation } from './ItemNavigation';
8
- import { clsx } from 'clsx';
9
- import { Button } from './ItemButton';
10
- import { Switch } from './ItemSwitch';
11
- import { AvatarLayout, AvatarView, Image } from './ItemMedia';
12
- import Prompt from './prompt/Prompt';
13
-
14
- export type ItemTypes =
15
- | 'none'
16
- | 'navigation'
17
- | 'radio'
18
- | 'checkbox'
19
- | 'switch'
20
- | 'button'
21
- | 'icon-button';
22
-
23
- export type Props = {
24
- as?: 'li' | 'div' | 'span';
25
- inverted?: boolean;
26
- disabled?: boolean;
27
- partialInteractivity?: boolean;
28
- spotlight?: 'active' | 'inactive';
29
- title: ReactNode;
30
- subtitle?: ReactNode;
31
- additionalInfo?: ReactNode;
32
- valueTitle?: ReactNode;
33
- valueSubtitle?: ReactNode;
34
- media?: ReactNode;
35
- control?: ReactNode;
36
- prompt?: ReactNode;
37
- };
38
-
39
- export type ItemContextData = {
40
- setControlType: (type: ItemTypes) => void;
41
- ids: {
42
- label: string;
43
- additionalInfo: string;
44
- value: string;
45
- control: string;
46
- prompt: string;
47
- };
48
- props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
49
- };
50
-
51
- // @ts-expect-error for now let's mock it with `null` value
52
- // but actually by default we should specify `setControlType('none')`
53
- export const ItemContext = createContext<ItemContextData>(null);
54
-
55
- export const Item = ({
56
- as: View = 'li',
57
- title,
58
- subtitle,
59
- additionalInfo,
60
- prompt,
61
- inverted,
62
- media,
63
- spotlight = undefined,
64
- valueTitle,
65
- valueSubtitle,
66
- control,
67
- disabled,
68
- }: Props) => {
69
- /*
70
- const returnType = (): ReactNode => {
71
- switch (type) {
72
- case 'Navigation':
73
- return <Chevron orientation={Position.RIGHT} disabled />;
74
- case 'Radio':
75
- return <RadioButton name="Hello" checked />;
76
- case 'Checkbox':
77
- return <CheckboxButton name="Hello" checked />;
78
- case 'Switch':
79
- return <Switch onClick={() => console.log('clicked')} />;
80
- case 'Button':
81
- return <Button v2>Hello</Button>;
82
- case 'IconButton':
83
- return (
84
- <IconButton size={40} priority="minimal">
85
- <InfoCircle />
86
- </IconButton>
87
- );
88
- case 'NonInteractive':
89
- default:
90
- return <></>;
91
- }
92
- };
93
- */
94
- const idPrefix = useId();
95
-
96
- const [controlType, setControlType] = useState<ItemTypes>();
97
- const ids = {
98
- label: `${idPrefix}_label`,
99
- value: `${idPrefix}_value`,
100
- control: `${idPrefix}_control`,
101
- prompt: `${idPrefix}_prompt`,
102
- additionalInfo: `${idPrefix}_additional-info`,
103
- };
104
-
105
- const itemCtx = useMemo(
106
- () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
107
- [],
108
- );
109
-
110
- return (
111
- <ItemContext.Provider value={itemCtx}>
112
- <View
113
- className={clsx(
114
- 'np-item',
115
- `np-item-${controlType}`,
116
- 'd-flex flex-row',
117
- { 'align-items-center': !subtitle },
118
- {
119
- [`np-item-spotlight-${spotlight}`]: !!spotlight,
120
- },
121
- )}
122
- aria-describedby={[ids.additionalInfo].join(' ')}
123
- >
124
- {media && <div className="np-item-media">{media}</div>}
125
-
126
- {/* Title + Subtitle + Values + Additional Info - Group */}
127
- <div>
128
- {/* Title + Subtitle + Values - Group */}
129
- <div className="d-flex justify-content-between">
130
- <span>
131
- {/* @ts-expect-error div can have role and aria-lavel props */}
132
- <Body
133
- type={Typography.BODY_LARGE_BOLD}
134
- className="np-item-title"
135
- // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
136
- // so we enable header semantics via `role` and `aria-level` attrs
137
- role="heading"
138
- aria-level="4"
139
- >
140
- {title}
141
- </Body>
142
- <Body className="np-item-subtitle">{subtitle}</Body>
143
- </span>
144
- {(valueTitle || valueSubtitle) && (
145
- <span id={ids.value} className="np-item-value">
146
- <Body type={Typography.BODY_LARGE_BOLD} className="np-item-title-value">
147
- {valueTitle}
148
- </Body>
149
- <Body className="np-item-subtitle-value">{valueSubtitle}</Body>
150
- </span>
151
- )}
152
- </div>
153
-
154
- {/* Additional Info and Prompt here */}
155
- {Boolean(subtitle) && additionalInfo}
156
- </div>
157
- <Body className="np-item-control">{control}</Body>
158
- {prompt}
159
- </View>
160
- </ItemContext.Provider>
161
- );
162
- };
163
-
164
- /* eslint-disable functional/immutable-data */
165
- Item.Image = Image;
166
- Item.AvatarView = AvatarView;
167
- Item.AvatarLayout = AvatarLayout;
168
- Item.AdditionalInfo = AdditionalInfo;
169
- Item.Checkbox = Checkbox;
170
- Item.IconButton = IconButton;
171
- Item.Navigation = Navigation;
172
- Item.Button = Button;
173
- Item.Switch = Switch;
174
- Item.Prompt = Prompt;
175
- /* eslint-enable functional/immutable-data */
176
-
177
- export default Item;
package/src/item/ItemAdditionalInfo.tsx DELETED
@@ -1,31 +0,0 @@
1
- import { PropsWithChildren, useContext } from 'react';
2
- import { ItemContext, ItemContextData } from './Item';
3
- import Body from '../body';
4
- import Link, { LinkProps } from '../link';
5
- import { Typography } from '../common';
6
-
7
- export type ItemAdditionalInfoProps = PropsWithChildren<{
8
- action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
9
- }>;
10
-
11
- export const AdditionalInfo = function ({ children, action }: ItemAdditionalInfoProps) {
12
- const { ids } = useContext<ItemContextData>(ItemContext);
13
-
14
- return (
15
- <Body
16
- type={Typography.BODY_DEFAULT}
17
- id={ids.additionalInfo}
18
- className="np-item-additional-info"
19
- >
20
- {children}
21
- {action ? (
22
- <>
23
- {' '}
24
- <Link href={action.href} target={action.target} onClick={action.onClick}>
25
- {action.label}
26
- </Link>
27
- </>
28
- ) : null}
29
- </Body>
30
- );
31
- };
package/src/item/ItemButton.tsx DELETED
@@ -1,25 +0,0 @@
1
- import { useContext, useEffect } from 'react';
2
- import { default as ButtonComp, NewButtonProps } from '../button';
3
- import { ButtonPriority } from '../button/Button.types';
4
- import { ItemContext, ItemContextData } from './Item';
5
-
6
- export type ItemButtonProps = Omit<NewButtonProps, 'v2' | 'size'> & {
7
- priority?: ButtonPriority;
8
- };
9
-
10
- export const Button = ({ priority = 'secondary', ...props }: ItemButtonProps) => {
11
- const { setControlType } = useContext<ItemContextData>(ItemContext);
12
-
13
- useEffect(() => {
14
- setControlType('button');
15
- }, []);
16
-
17
- const commonProps = {
18
- ...props,
19
- priority,
20
- v2: true,
21
- size: 'md',
22
- };
23
-
24
- return <ButtonComp {...(commonProps as NewButtonProps)} />;
25
- };
package/src/item/ItemCheckbox.tsx DELETED
@@ -1,19 +0,0 @@
1
- import { useContext, useEffect } from 'react';
2
- import CheckboxButton from '../checkboxButton';
3
- import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
4
- import { ItemContext, ItemContextData } from './Item';
5
-
6
- export type ItemCheckboxProps = Pick<
7
- CheckboxButtonProps,
8
- 'checked' | 'indeterminate' | 'onChange' | 'disabled'
9
- >;
10
-
11
- export const Checkbox = function (props: ItemCheckboxProps) {
12
- const { setControlType } = useContext<ItemContextData>(ItemContext);
13
-
14
- useEffect(() => {
15
- setControlType('checkbox');
16
- }, []);
17
-
18
- return <CheckboxButton {...props} />;
19
- };
package/src/item/ItemIconButton.tsx DELETED
@@ -1,15 +0,0 @@
1
- import { useContext, useEffect } from 'react';
2
- import { default as IconButtonComp, IconButtonProps } from '../iconButton';
3
- import { ItemContext, ItemContextData } from './Item';
4
-
5
- export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
6
-
7
- export const IconButton = function (props: ItemIconButtonProps) {
8
- const { setControlType } = useContext<ItemContextData>(ItemContext);
9
-
10
- useEffect(() => {
11
- setControlType('icon-button');
12
- }, []);
13
-
14
- return <IconButtonComp {...props} size={32} />;
15
- };
package/src/item/ItemMedia.tsx DELETED
@@ -1,52 +0,0 @@
1
- import { default as AvatarViewComp, AvatarViewProps } from '../avatarView';
2
- import { default as AvatarLayoutComp, AvatarLayoutProps } from '../avatarLayout';
3
- import { default as ImageComp, ImageProps } from '../image/Image';
4
- import { clsx } from 'clsx';
5
-
6
- type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
7
-
8
- export type ItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
9
-
10
- export const AvatarView = ({ className, size = 48, ...props }: ItemAvatarViewProps) => {
11
- return (
12
- <AvatarViewComp
13
- {...props}
14
- size={size}
15
- className={clsx('np-item-media-avatar-view', className)}
16
- />
17
- );
18
- };
19
-
20
- export type ItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
21
-
22
- export const AvatarLayout = ({ className, size = 48, ...props }: ItemAvatarLayoutProps) => {
23
- return (
24
- <AvatarLayoutComp
25
- {...props}
26
- size={size}
27
- className={clsx('np-item-media-avatar-layout', className)}
28
- />
29
- );
30
- };
31
-
32
- export type ItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
33
- SizeProp & {
34
- alt?: string;
35
- };
36
-
37
- /**
38
- * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
39
- */
40
- export const Image = ({ alt = '', size = 48, ...props }: ItemImageProps) => {
41
- return (
42
- <div
43
- className={clsx('np-item-media-image')}
44
- style={{
45
- // @ts-expect-error CSS custom props allowed
46
- '--item-media-image-size': `${size}px`,
47
- }}
48
- >
49
- <ImageComp {...props} alt={alt} />
50
- </div>
51
- );
52
- };
package/src/item/ItemNavigation.tsx DELETED
@@ -1,16 +0,0 @@
1
- import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
2
- import { ButtonProps } from '../button/Button.types';
3
- import Item, { ItemContext, ItemContextData } from './Item';
4
- import { useContext, useEffect } from 'react';
5
-
6
- export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
7
-
8
- export const Navigation = function Navigation({ onClick }: ItemNavigationProps) {
9
- const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
10
-
11
- useEffect(() => {
12
- setControlType('navigation');
13
- }, []);
14
-
15
- return baseItemProps?.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
16
- };
package/src/item/ItemSwitch.tsx DELETED
@@ -1,13 +0,0 @@
1
- import { useContext, useEffect } from 'react';
2
- import { default as SwitchComp, SwitchProps } from '../switch';
3
- import { ItemContext, ItemContextData } from './Item';
4
-
5
- export const Switch = function (props: SwitchProps) {
6
- const { setControlType } = useContext<ItemContextData>(ItemContext);
7
-
8
- useEffect(() => {
9
- setControlType('checkbox');
10
- }, []);
11
-
12
- return <SwitchComp {...props} />;
13
- };
package/src/item/index.ts DELETED
@@ -1,6 +0,0 @@
1
- export type { Props as ItemProps } from './Item';
2
- export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
3
- export type { ItemCheckboxProps } from './ItemCheckbox';
4
- export type { ItemImageProps, ItemAvatarViewProps, ItemAvatarLayoutProps } from './ItemMedia';
5
-
6
- export { default } from './Item';
package/src/item/prompt/Prompt.spec.tsx DELETED
@@ -1,77 +0,0 @@
1
- import { render, screen, mockMatchMedia } from '../../test-utils';
2
- import { ItemPrompt } from './Prompt';
3
- import { Sentiment } from '../../common';
4
-
5
- mockMatchMedia();
6
-
7
- describe('ItemPrompt', () => {
8
- it('renders the aria-label when provided', () => {
9
- const ariaLabel = 'Test aria-label';
10
- render(
11
- <ItemPrompt
12
- type={Sentiment.POSITIVE}
13
- action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
14
- >
15
- Positive prompt
16
- </ItemPrompt>,
17
- );
18
-
19
- expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
20
- });
21
-
22
- it('applies the interactive class when href is provided', () => {
23
- render(
24
- <ItemPrompt
25
- type={Sentiment.POSITIVE}
26
- action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
27
- >
28
- Interactive link
29
- </ItemPrompt>,
30
- );
31
-
32
- expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
33
- });
34
-
35
- it('applies the interactive class when onClick is provided', () => {
36
- render(
37
- <ItemPrompt
38
- type={Sentiment.POSITIVE}
39
- action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
40
- >
41
- Interactive button
42
- </ItemPrompt>,
43
- );
44
-
45
- expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
46
- });
47
-
48
- it('does not apply the interactive class when no action is provided', () => {
49
- render(<ItemPrompt type={Sentiment.POSITIVE}>Non-interactive prompt</ItemPrompt>);
50
-
51
- expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
52
- });
53
-
54
- it('renders the children content', () => {
55
- render(<ItemPrompt type={Sentiment.POSITIVE}>This is a child prompt</ItemPrompt>);
56
-
57
- expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
58
- });
59
-
60
- it('spreads additional props to the wrapper element', () => {
61
- render(
62
- <ItemPrompt
63
- type={Sentiment.POSITIVE}
64
- action={{
65
- href: 'https://example.com',
66
- target: '_blank',
67
- 'aria-label': 'Custom props prompt',
68
- }}
69
- >
70
- Custom props prompt
71
- </ItemPrompt>,
72
- );
73
-
74
- const link = screen.getByRole('link');
75
- expect(link).toHaveAttribute('target', '_blank');
76
- });
77
- });
package/src/item/prompt/Prompt.story.tsx DELETED
@@ -1,170 +0,0 @@
1
- import Link from '../../link';
2
- import { Sentiment } from '../../common';
3
- import { ItemPrompt, ItemPromptProps } from './Prompt';
4
- import { lorem40 } from '../../test-utils';
5
- import { StoryObj } from '@storybook/react';
6
-
7
- export default {
8
- component: ItemPrompt,
9
- title: 'Content/Item/Prompt',
10
- args: {
11
- type: Sentiment.NEGATIVE,
12
- children: 'You have done a terrible thing',
13
- },
14
- argTypes: {
15
- type: {
16
- options: [
17
- Sentiment.POSITIVE,
18
- Sentiment.NEGATIVE,
19
- Sentiment.NEUTRAL,
20
- Sentiment.WARNING,
21
- 'discount',
22
- 'savings',
23
- ],
24
- control: { type: 'radio' },
25
- description: 'The type of prompt to display',
26
- },
27
- action: {
28
- table: {
29
- disable: true,
30
- },
31
- },
32
- children: {
33
- type: {
34
- name: 'string',
35
- required: true,
36
- description: 'The content of the prompt',
37
- },
38
- },
39
- },
40
- };
41
-
42
- type CustomStory = StoryObj<
43
- ItemPromptProps & {
44
- interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
45
- }
46
- >;
47
-
48
- export const Basic: CustomStory = {
49
- args: {
50
- interactivity: 'none',
51
- },
52
- argTypes: {
53
- interactivity: {
54
- options: ['none', 'full-button', 'full-anchor', 'link'],
55
- control: { type: 'radio' },
56
- description: 'The type of interactivity to display',
57
- },
58
- },
59
- render: ({ interactivity, ...args }) => {
60
- return (
61
- <div>
62
- <ItemPrompt
63
- type={args.type}
64
- action={
65
- interactivity === 'full-anchor'
66
- ? { href: 'wise.com' }
67
- : interactivity === 'full-button'
68
- ? {
69
- onClick: () => {
70
- console.log('clicked');
71
- },
72
- }
73
- : undefined
74
- }
75
- >
76
- {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
77
- </ItemPrompt>
78
- </div>
79
- );
80
- },
81
- };
82
-
83
- export const Variants = () => {
84
- return (
85
- <>
86
- <div className="m-b-2">
87
- <ItemPrompt type={Sentiment.POSITIVE}>
88
- Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
89
- </ItemPrompt>
90
- </div>
91
- <div className="m-b-2">
92
- <ItemPrompt type={Sentiment.NEGATIVE}>
93
- Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
94
- </ItemPrompt>
95
- </div>
96
- <div className="m-b-2">
97
- <ItemPrompt type={Sentiment.NEUTRAL}>
98
- Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
99
- </ItemPrompt>
100
- </div>
101
- <div className="m-b-2">
102
- <ItemPrompt type={Sentiment.WARNING}>
103
- Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
104
- </ItemPrompt>
105
- </div>
106
- <div className="m-b-2">
107
- <ItemPrompt type="discount">
108
- Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
109
- </ItemPrompt>
110
- </div>
111
- <div className="m-b-2">
112
- <ItemPrompt type="savings">
113
- Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
114
- </ItemPrompt>
115
- </div>
116
- <div className="m-b-2">
117
- <ItemPrompt
118
- type="discount"
119
- action={{
120
- href: 'www.wise.com',
121
- target: '_self',
122
- 'aria-label': 'hidden anchor tags are accessible, right?',
123
- }}
124
- >
125
- The whole prompt is secretly clickable
126
- </ItemPrompt>
127
- </div>
128
- <div className="m-b-2">
129
- <ItemPrompt
130
- type="negative"
131
- action={{
132
- href: 'www.wise.com',
133
- target: '_self',
134
- 'aria-label': 'clickable <a>',
135
- }}
136
- >
137
- The whole prompt is secretly clickable as an anchor tag
138
- </ItemPrompt>
139
- </div>
140
- <div className="m-b-2">
141
- <ItemPrompt
142
- type="warning"
143
- action={{
144
- onClick: () => {
145
- console.log('clicked');
146
- },
147
- 'aria-label': 'clickable button',
148
- }}
149
- >
150
- The whole prompt is secretly clickable as a button
151
- </ItemPrompt>
152
- </div>
153
- <div className="m-b-2">
154
- <ItemPrompt
155
- type="neutral"
156
- action={{
157
- href: 'www.wise.com',
158
- target: '_self',
159
- 'aria-label': 'clickable prompt',
160
- }}
161
- >
162
- The whole prompt is secretly clickable
163
- </ItemPrompt>
164
- </div>
165
- <div className="m-b-2" style={{ maxWidth: '300px' }}>
166
- <ItemPrompt type="warning">The prompt has very long text that wraps {lorem40}</ItemPrompt>
167
- </div>
168
- </>
169
- );
170
- };
package/src/item/prompt/Prompt.tsx DELETED
@@ -1,44 +0,0 @@
1
- import { Confetti, Tags } from '@transferwise/icons';
2
- import { Sentiment } from '../../common';
3
- import StatusIcon from '../../statusIcon';
4
- import { clsx } from 'clsx';
5
- import { LinkProps } from '../../link';
6
- import Body from '../../body';
7
-
8
- export type ItemPromptProps = {
9
- type:
10
- | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
11
- | 'discount'
12
- | 'savings';
13
- children: React.ReactNode;
14
- action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
15
- };
16
-
17
- export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
18
- const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
19
-
20
- const icon =
21
- type === 'discount' ? (
22
- <Tags size={16} />
23
- ) : type === 'savings' ? (
24
- <Confetti size={16} />
25
- ) : (
26
- <StatusIcon size={16} sentiment={type} />
27
- );
28
-
29
- return (
30
- <Wrapper
31
- className={clsx(
32
- 'np-item-prompt',
33
- type,
34
- (action?.href || action?.onClick) && 'np-prompt-interactive',
35
- )}
36
- {...(action ?? {})}
37
- >
38
- <div className="np-prompt-icon">{icon}</div>
39
- <Body>{children}</Body>
40
- </Wrapper>
41
- );
42
- };
43
-
44
- export default ItemPrompt;
package/src/listItem/index.ts DELETED
@@ -1,4 +0,0 @@
1
- export { List } from './List';
2
- export type { ListProps } from './List';
3
- export { default } from './ListItem';
4
- export type { ListItemProps } from './ListItem';