@transferwise/components 0.0.0-experimental-65253b2 → 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 (96) 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.spec.tsx +0 -90
  76. package/src/item/ItemButton.tsx +0 -25
  77. package/src/item/ItemCheckbox.tsx +0 -19
  78. package/src/item/ItemIconButton.tsx +0 -15
  79. package/src/item/ItemMedia.tsx +0 -52
  80. package/src/item/ItemNavigation.tsx +0 -16
  81. package/src/item/ItemSwitch.tsx +0 -13
  82. package/src/item/index.ts +0 -6
  83. package/src/item/prompt/Prompt.spec.tsx +0 -77
  84. package/src/item/prompt/Prompt.story.tsx +0 -170
  85. package/src/item/prompt/Prompt.tsx +0 -44
  86. package/src/listItem/index.ts +0 -4
  87. package/src/test-utils/assets/apple-pay-logo.svg +0 -84
  88. /package/build/{listItem → legacylistItem}/List.js +0 -0
  89. /package/build/{listItem → legacylistItem}/List.mjs +0 -0
  90. /package/build/styles/{listItem/ListItem.css → legacylistItem/LegacyListItem.css} +0 -0
  91. /package/build/types/{listItem → legacylistItem}/List.d.ts +0 -0
  92. /package/src/{listItem/ListItem.css → legacylistItem/LegacyListItem.css} +0 -0
  93. /package/src/{listItem/ListItem.less → legacylistItem/LegacyListItem.less} +0 -0
  94. /package/src/{listItem/ListItem.spec.tsx → legacylistItem/LegacyListItem.spec.tsx} +0 -0
  95. /package/src/{listItem/ListItem.story.tsx → legacylistItem/LegacyListItem.story.tsx} +0 -0
  96. /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.spec.tsx DELETED
@@ -1,90 +0,0 @@
1
- import { render, screen, mockMatchMedia } from '../test-utils';
2
- import { Button as ItemButton } from './ItemButton';
3
- import { ButtonPriority } from '../button/Button.types';
4
- import { ItemContext } from './Item';
5
-
6
- mockMatchMedia();
7
-
8
- describe('ItemButton', () => {
9
- const mockSetControlType = jest.fn();
10
-
11
- const renderWithItemContext = (ui: React.ReactNode) => {
12
- return render(
13
- <ItemContext.Provider
14
- value={{
15
- setControlType: mockSetControlType,
16
- ids: {
17
- label: 'label',
18
- additionalInfo: 'additional Info',
19
- value: 'value',
20
- control: 'control',
21
- prompt: 'prompt',
22
- },
23
- props: {},
24
- }}
25
- >
26
- {ui}
27
- </ItemContext.Provider>,
28
- );
29
- };
30
-
31
- beforeEach(() => {
32
- jest.clearAllMocks();
33
- });
34
-
35
- it('always sets v2 to true', () => {
36
- renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
37
- const button = screen.getByRole('button');
38
- expect(button).toBeInTheDocument();
39
- expect(mockSetControlType).toHaveBeenCalledWith('button');
40
- });
41
-
42
- it('always sets size to "md"', () => {
43
- renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
44
- const button = screen.getByRole('button');
45
- expect(button).toHaveClass('wds-Button--medium');
46
- });
47
-
48
- it('supports all priorities', () => {
49
- const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
50
- priorities.forEach((priority) => {
51
- renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
52
- const button = screen.getByRole('button', { name: `Test ${priority}` });
53
- expect(button).toBeInTheDocument();
54
- });
55
- });
56
-
57
- it('renders as a button by default', () => {
58
- renderWithItemContext(<ItemButton>Click me</ItemButton>);
59
- const button = screen.getByRole('button');
60
- expect(button).toBeInTheDocument();
61
- expect(button.tagName).toBe('BUTTON');
62
- });
63
-
64
- it('renders as an anchor when href is provided', () => {
65
- renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
66
- const link = screen.getByRole('link', { name: 'Go to Example' });
67
- expect(link).toBeInTheDocument();
68
- expect(link.tagName).toBe('A');
69
- expect(link).toHaveAttribute('href', 'https://example.com');
70
- });
71
-
72
- it('spreads additional props to the button', () => {
73
- renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
74
- const button = screen.getByRole('button', { name: 'Custom Button' });
75
- expect(button).toBeInTheDocument();
76
- expect(button).toHaveAttribute('aria-label', 'Custom Button');
77
- });
78
-
79
- it('spreads additional props to the anchor', () => {
80
- renderWithItemContext(
81
- <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
82
- Custom Link
83
- </ItemButton>,
84
- );
85
- const link = screen.getByRole('link', { name: 'Custom Link' });
86
- expect(link).toBeInTheDocument();
87
- expect(link).toHaveAttribute('href', 'https://example.com');
88
- expect(link).toHaveAttribute('target', '_blank');
89
- });
90
- });
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
- });