@transferwise/components 46.88.2 → 46.89.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.
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +19 -3
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +19 -3
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +23 -20
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +20 -17
- package/build/alert/Alert.mjs.map +1 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatar/avatarTypes.js +3 -1
- package/build/avatar/avatarTypes.js.map +1 -1
- package/build/avatar/avatarTypes.mjs +3 -1
- package/build/avatar/avatarTypes.mjs.map +1 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/button/Button.js +2 -2
- package/build/button/Button.mjs +2 -2
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/carousel/Carousel.js +9 -8
- package/build/carousel/Carousel.js.map +1 -1
- package/build/carousel/Carousel.mjs +9 -8
- package/build/carousel/Carousel.mjs.map +1 -1
- package/build/common/action/Action.js +26 -15
- package/build/common/action/Action.js.map +1 -1
- package/build/common/action/Action.mjs +26 -15
- package/build/common/action/Action.mjs.map +1 -1
- package/build/common/closeButton/CloseButton.js +2 -1
- package/build/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.mjs +2 -1
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +10 -73
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +11 -74
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/iconButton/IconButton.js +2 -2
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/iconButton/IconButton.mjs +2 -2
- package/build/iconButton/IconButton.mjs.map +1 -1
- package/build/link/Link.js +2 -2
- package/build/link/Link.mjs +2 -2
- package/build/main.css +46 -75
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -0
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +1 -0
- package/build/primitives/PrimitiveButton/{src/PrimitiveButton.js → PrimitiveButton.js} +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -0
- package/build/primitives/PrimitiveButton/{src/PrimitiveButton.mjs → PrimitiveButton.mjs} +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +1 -0
- package/build/styles/alert/Alert.css +4 -0
- package/build/styles/carousel/Carousel.css +0 -8
- package/build/styles/common/closeButton/CloseButton.css +15 -0
- package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -73
- package/build/styles/main.css +46 -75
- package/build/table/TableCell.js +7 -1
- package/build/table/TableCell.js.map +1 -1
- package/build/table/TableCell.mjs +7 -1
- package/build/table/TableCell.mjs.map +1 -1
- package/build/test-utils/assets/wise-card.svg +1 -0
- package/build/types/actionButton/ActionButton.d.ts +6 -0
- package/build/types/actionButton/ActionButton.d.ts.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +2 -1
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/build/types/alert/Alert.d.ts +3 -4
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/avatar/Avatar.d.ts +3 -0
- package/build/types/avatar/Avatar.d.ts.map +1 -1
- package/build/types/avatar/avatarTypes.d.ts +3 -0
- package/build/types/avatar/avatarTypes.d.ts.map +1 -1
- package/build/types/badge/Badge.d.ts +3 -0
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/button/LegacyButton.d.ts +27 -0
- package/build/types/button/LegacyButton.d.ts.map +1 -1
- package/build/types/carousel/Carousel.d.ts.map +1 -1
- package/build/types/common/action/Action.d.ts +5 -2
- package/build/types/common/action/Action.d.ts.map +1 -1
- package/build/types/common/closeButton/CloseButton.d.ts +3 -3
- package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/iconButton/IconButton.d.ts +2 -2
- package/build/types/iconButton/IconButton.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts} +1 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.d.ts → PrimitiveAnchor.types.d.ts} +1 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
- package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.d.ts → PrimitiveButton.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.types.d.ts → PrimitiveButton.types.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
- package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
- package/build/types/table/TableCell.d.ts +6 -3
- package/build/types/table/TableCell.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/actionButton/ActionButton.story.tsx +6 -1
- package/src/actionButton/ActionButton.tsx +6 -0
- package/src/actionOption/ActionOption.story.tsx +9 -6
- package/src/actionOption/ActionOption.tsx +29 -5
- package/src/alert/Alert.css +4 -0
- package/src/alert/Alert.less +4 -0
- package/src/alert/Alert.spec.tsx +0 -30
- package/src/alert/Alert.story.tsx +74 -2
- package/src/alert/Alert.tsx +18 -21
- package/src/avatar/Avatar.tsx +3 -0
- package/src/avatar/avatarTypes.ts +3 -1
- package/src/badge/Badge.tsx +3 -0
- package/src/button/LegacyButton.tsx +27 -0
- package/src/carousel/Carousel.css +0 -8
- package/src/carousel/Carousel.less +0 -7
- package/src/carousel/Carousel.spec.tsx +2 -2
- package/src/carousel/Carousel.tsx +11 -10
- package/src/common/action/Action.tsx +40 -22
- package/src/common/closeButton/CloseButton.css +15 -0
- package/src/common/closeButton/CloseButton.less +10 -0
- package/src/common/closeButton/CloseButton.tsx +4 -3
- package/src/criticalBanner/CriticalCommsBanner.css +33 -73
- package/src/criticalBanner/CriticalCommsBanner.less +37 -64
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +26 -4
- package/src/criticalBanner/CriticalCommsBanner.tsx +8 -50
- package/src/iconButton/IconButton.tsx +4 -1
- package/src/main.css +46 -75
- package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx} +1 -1
- package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.ts → PrimitiveAnchor.types.ts} +1 -1
- package/src/primitives/PrimitiveAnchor/index.ts +6 -2
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
- package/src/primitives/PrimitiveButton/{src/PrimitiveButton.tsx → PrimitiveButton.tsx} +2 -2
- package/src/primitives/PrimitiveButton/{src/PrimitiveButton.types.ts → PrimitiveButton.types.ts} +1 -1
- package/src/primitives/PrimitiveButton/index.ts +6 -2
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +1 -1
- package/src/table/Table.story.tsx +59 -1
- package/src/table/TableCell.spec.tsx +17 -0
- package/src/table/TableCell.tsx +14 -5
- package/src/test-utils/assets/wise-card.svg +1 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +0 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +0 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +0 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +0 -3
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/src/index.d.ts +0 -3
- package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +0 -1
- package/src/primitives/PrimitiveAnchor/src/index.ts +0 -6
- package/src/primitives/PrimitiveButton/src/index.ts +0 -6
- /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.js → PrimitiveAnchor.js} +0 -0
- /package/build/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.mjs → PrimitiveAnchor.mjs} +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { Meta
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
2
|
|
|
3
3
|
import CriticalCommsBanner from '.';
|
|
4
|
+
import { storyConfig } from '../test-utils';
|
|
4
5
|
|
|
5
6
|
export default {
|
|
6
7
|
component: CriticalCommsBanner,
|
|
@@ -8,12 +9,33 @@ export default {
|
|
|
8
9
|
tags: ['autodocs'],
|
|
9
10
|
} satisfies Meta<typeof CriticalCommsBanner>;
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export const Basic: Story = {
|
|
12
|
+
export const Basic = {
|
|
14
13
|
args: {
|
|
15
14
|
title: 'Your account is overdrawn',
|
|
16
15
|
subtitle: 'Add money within the next 30 days',
|
|
17
16
|
action: { label: 'Take action', href: 'https://wise.com' },
|
|
18
17
|
},
|
|
19
18
|
};
|
|
19
|
+
|
|
20
|
+
export const Variants = storyConfig(
|
|
21
|
+
{
|
|
22
|
+
args: {
|
|
23
|
+
title: 'Your account is overdrawn',
|
|
24
|
+
subtitle: 'Add money within the next 30 days',
|
|
25
|
+
action: { label: 'Take action', href: 'https://wise.com' },
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
{ variants: ['default', 'dark', 'rtl'] },
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
export const Mobile = storyConfig(
|
|
32
|
+
{
|
|
33
|
+
tags: ['!autodocs'],
|
|
34
|
+
args: {
|
|
35
|
+
title: 'Your account is overdrawn',
|
|
36
|
+
subtitle: 'Add money within the next 30 days',
|
|
37
|
+
action: { label: 'Take action', href: 'https://wise.com' },
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
{ variants: ['default', 'dark', 'rtl', 'mobile'] },
|
|
41
|
+
);
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useTheme } from '@wise/components-theming';
|
|
1
|
+
import Alert from '../alert';
|
|
3
2
|
import { clsx } from 'clsx';
|
|
4
3
|
|
|
5
|
-
import Avatar, { AvatarType } from '../avatar';
|
|
6
|
-
import Body from '../body';
|
|
7
|
-
import Button from '../button';
|
|
8
|
-
import { ControlType, Priority, Size, Typography } from '../common';
|
|
9
|
-
import Title from '../title';
|
|
10
|
-
|
|
11
4
|
export type CriticalCommsBannerProps = {
|
|
12
5
|
title: string;
|
|
13
6
|
subtitle?: string;
|
|
@@ -19,50 +12,15 @@ export type CriticalCommsBannerProps = {
|
|
|
19
12
|
};
|
|
20
13
|
|
|
21
14
|
function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
|
|
22
|
-
const { isModern } = useTheme();
|
|
23
15
|
return (
|
|
24
16
|
<div className={clsx('critical-comms', className)}>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
>
|
|
34
|
-
{isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
|
|
35
|
-
</Avatar>
|
|
36
|
-
<div className="critical-comms-content d-flex align-items-center flex-grow-1">
|
|
37
|
-
<div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
|
|
38
|
-
<Title
|
|
39
|
-
type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
|
|
40
|
-
className="critical-comms--title"
|
|
41
|
-
>
|
|
42
|
-
{title}
|
|
43
|
-
</Title>
|
|
44
|
-
<Body className="critical-comms--subtitle">{subtitle}</Body>
|
|
45
|
-
</div>
|
|
46
|
-
{action ? (
|
|
47
|
-
<div className="critical-comms--cta">
|
|
48
|
-
<Button
|
|
49
|
-
block={isModern}
|
|
50
|
-
size={Size.SMALL}
|
|
51
|
-
type={ControlType.NEGATIVE}
|
|
52
|
-
priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}
|
|
53
|
-
className="cta-btn"
|
|
54
|
-
onClick={() => {
|
|
55
|
-
if (action) {
|
|
56
|
-
window.location.href = action.href;
|
|
57
|
-
}
|
|
58
|
-
}}
|
|
59
|
-
>
|
|
60
|
-
{action.label}
|
|
61
|
-
</Button>
|
|
62
|
-
</div>
|
|
63
|
-
) : null}
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
17
|
+
<Alert
|
|
18
|
+
title={title}
|
|
19
|
+
message={subtitle}
|
|
20
|
+
action={{ target: action?.href, text: action?.label }}
|
|
21
|
+
className={className}
|
|
22
|
+
type="warning"
|
|
23
|
+
/>
|
|
66
24
|
</div>
|
|
67
25
|
);
|
|
68
26
|
}
|
|
@@ -10,7 +10,10 @@ export type Props = {
|
|
|
10
10
|
'data-testid'?: string;
|
|
11
11
|
} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &
|
|
12
12
|
Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
|
|
13
|
-
Pick<
|
|
13
|
+
Pick<
|
|
14
|
+
HTMLAttributes<HTMLDivElement>,
|
|
15
|
+
'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
|
|
16
|
+
>;
|
|
14
17
|
|
|
15
18
|
const IconButton = forwardRef(function IconButton(
|
|
16
19
|
{
|
package/src/main.css
CHANGED
|
@@ -1,77 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
--critical-comms-subtitle-color: var(--color-content-secondary);
|
|
5
|
-
--critical-comms-subtitle-color-padding-left: var(--size-16);
|
|
6
|
-
--critical-comms-vertical-spacing: var(--size-8);
|
|
7
|
-
background-color: rgba(255,135,135,0.10196);
|
|
8
|
-
background-color: var(--critical-comms-background-color);
|
|
9
|
-
display: flex;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
align-items: center;
|
|
12
|
-
}
|
|
13
|
-
.np-theme-personal div.critical-comms,
|
|
14
|
-
.np-theme-personal--dark div.critical-comms {
|
|
15
|
-
--critical-comms-background-color: var(--color-sentiment-negative);
|
|
16
|
-
--critical-comms-title-color: var(--color-contrast);
|
|
17
|
-
--critical-comms-subtitle-color: var(--color-contrast);
|
|
18
|
-
--critical-comms-subtitle-color-padding-left: 0;
|
|
19
|
-
--critical-comms-vertical-spacing: var(--size-16);
|
|
20
|
-
padding: 24px;
|
|
21
|
-
padding: var(--padding-medium);
|
|
22
|
-
}
|
|
23
|
-
.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
|
|
24
|
-
.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
|
|
25
|
-
color: var(--color-contrast);
|
|
26
|
-
}
|
|
27
|
-
.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
|
|
28
|
-
.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
|
|
29
|
-
width: 48px;
|
|
30
|
-
height: 48px;
|
|
31
|
-
}
|
|
32
|
-
.np-theme-personal div.critical-comms .cta-btn,
|
|
33
|
-
.np-theme-personal--dark div.critical-comms .cta-btn {
|
|
34
|
-
background-color: var(--color-contrast);
|
|
35
|
-
}
|
|
36
|
-
.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
|
|
37
|
-
.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
|
|
38
|
-
outline-color: var(--color-contrast);
|
|
39
|
-
}
|
|
40
|
-
@media (max-width: 767px) {
|
|
41
|
-
div.critical-comms {
|
|
42
|
-
display: inline;
|
|
43
|
-
display: initial;
|
|
44
|
-
}
|
|
1
|
+
.np-theme-personal .critical-comms .alert-warning {
|
|
2
|
+
color: var(--color-contrast-overlay);
|
|
3
|
+
background-color: var(--color-sentiment-negative);
|
|
45
4
|
}
|
|
46
|
-
|
|
47
|
-
color: var(--
|
|
5
|
+
.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
|
|
6
|
+
color: var(--color-contrast-overlay);
|
|
48
7
|
}
|
|
49
|
-
|
|
50
|
-
color:
|
|
8
|
+
.np-theme-personal .critical-comms .status-circle.warning {
|
|
9
|
+
background-color: #ffffff;
|
|
10
|
+
background-color: var(--color-background-screen);
|
|
51
11
|
}
|
|
52
|
-
|
|
53
|
-
|
|
12
|
+
.np-theme-personal .critical-comms .status-circle.warning .status-icon {
|
|
13
|
+
color: var(--color-contrast-theme);
|
|
54
14
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
padding-top: var(--critical-comms-vertical-spacing);
|
|
59
|
-
min-width: 100%;
|
|
60
|
-
}
|
|
15
|
+
.np-theme-personal .critical-comms .alert__message .alert__action {
|
|
16
|
+
margin-top: 16px;
|
|
17
|
+
margin-top: var(--size-16);
|
|
61
18
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
19
|
+
.np-theme-personal .critical-comms .wds-Button {
|
|
20
|
+
--Button-background: var(--color-contrast-overlay);
|
|
21
|
+
--Button-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
22
|
+
--Button-background-active: var(--color-sentiment-negative-secondary-active);
|
|
65
23
|
}
|
|
66
|
-
@media (
|
|
67
|
-
|
|
68
|
-
flex-direction:
|
|
24
|
+
@media (min-width: 768px) {
|
|
25
|
+
.np-theme-personal .critical-comms .alert-warning .alert__message {
|
|
26
|
+
flex-direction: row;
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
align-items: center;
|
|
29
|
+
width: 100%;
|
|
69
30
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
flex-wrap: wrap;
|
|
31
|
+
.np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
|
|
32
|
+
margin-top: 0;
|
|
33
|
+
margin-left: 16px;
|
|
34
|
+
margin-left: var(--padding-small);
|
|
75
35
|
}
|
|
76
36
|
}
|
|
77
37
|
.tw-date-lookup-calendar > tbody > tr > td.weekend button {
|
|
@@ -219,6 +179,10 @@ div.critical-comms .critical-comms-body {
|
|
|
219
179
|
.wds-alert__liveRegion {
|
|
220
180
|
display: contents;
|
|
221
181
|
}
|
|
182
|
+
.alert__close {
|
|
183
|
+
min-width: 48px;
|
|
184
|
+
min-width: var(--size-48);
|
|
185
|
+
}
|
|
222
186
|
.tw-avatar {
|
|
223
187
|
position: relative;
|
|
224
188
|
border-radius: 50%;
|
|
@@ -1154,14 +1118,6 @@ div.critical-comms .critical-comms-body {
|
|
|
1154
1118
|
padding: 24px;
|
|
1155
1119
|
padding: var(--size-24);
|
|
1156
1120
|
}
|
|
1157
|
-
.carousel__scroll-button {
|
|
1158
|
-
width: 32px;
|
|
1159
|
-
width: var(--size-32);
|
|
1160
|
-
height: 32px;
|
|
1161
|
-
height: var(--size-32);
|
|
1162
|
-
align-items: center;
|
|
1163
|
-
justify-content: center;
|
|
1164
|
-
}
|
|
1165
1121
|
.carousel__indicators {
|
|
1166
1122
|
display: flex;
|
|
1167
1123
|
justify-content: center;
|
|
@@ -1647,6 +1603,21 @@ div.critical-comms .critical-comms-body {
|
|
|
1647
1603
|
width: var(--size-64);
|
|
1648
1604
|
}
|
|
1649
1605
|
}
|
|
1606
|
+
.np-theme-personal .np-close-button--x-small {
|
|
1607
|
+
height: 24px;
|
|
1608
|
+
height: var(--size-24);
|
|
1609
|
+
width: 24px;
|
|
1610
|
+
width: var(--size-24);
|
|
1611
|
+
flex-shrink: 0;
|
|
1612
|
+
}
|
|
1613
|
+
@media (max-width: 320px) {
|
|
1614
|
+
.np-theme-personal .np-close-button--x-small {
|
|
1615
|
+
height: 48px;
|
|
1616
|
+
height: var(--size-48);
|
|
1617
|
+
width: 48px;
|
|
1618
|
+
width: var(--size-48);
|
|
1619
|
+
}
|
|
1620
|
+
}
|
|
1650
1621
|
.np-theme-personal .np-close-button--large {
|
|
1651
1622
|
height: 40px;
|
|
1652
1623
|
height: var(--size-40);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef, useCallback } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import type { PrimitiveAnchorProps } from '
|
|
3
|
+
import type { PrimitiveAnchorProps } from '.';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* The Primitive `PrimitiveAnchor` component is customisable link element that can be
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
import { userEvent, within, expect, waitFor } from '@storybook/test';
|
|
3
3
|
import { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import PrimitiveAnchor from '
|
|
4
|
+
import PrimitiveAnchor from '..';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Primitives/Anchor/Tests',
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import React, { forwardRef, useCallback } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { useIntl, MessageDescriptor } from 'react-intl';
|
|
5
|
-
import messages from '
|
|
6
|
-
import type { PrimitiveButtonProps } from '
|
|
5
|
+
import messages from '../../i18n/commonMessages/Button.messages';
|
|
6
|
+
import type { PrimitiveButtonProps } from '.';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* The Primitive `PrimitiveButton` component can be used in various parts the Wise Design
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
import { userEvent, within, expect, waitFor } from '@storybook/test';
|
|
3
3
|
import { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import PrimitiveButton from '
|
|
4
|
+
import PrimitiveButton from '..';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Primitives/Button/Tests',
|
|
@@ -21,7 +21,7 @@ const tableData = {
|
|
|
21
21
|
header: 'Location',
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
header: '
|
|
24
|
+
header: 'Employment Date',
|
|
25
25
|
className: 'np-table-header--custom-class',
|
|
26
26
|
},
|
|
27
27
|
{
|
|
@@ -32,6 +32,9 @@ const tableData = {
|
|
|
32
32
|
header: 'Status',
|
|
33
33
|
status: 'error',
|
|
34
34
|
},
|
|
35
|
+
{
|
|
36
|
+
header: 'Card',
|
|
37
|
+
},
|
|
35
38
|
] satisfies TableHeaderType[],
|
|
36
39
|
rows: [
|
|
37
40
|
{
|
|
@@ -81,6 +84,17 @@ const tableData = {
|
|
|
81
84
|
sentiment: 'negative',
|
|
82
85
|
},
|
|
83
86
|
},
|
|
87
|
+
{
|
|
88
|
+
cell: {
|
|
89
|
+
type: 'media',
|
|
90
|
+
media: {
|
|
91
|
+
src: '../wise-card.svg',
|
|
92
|
+
alt: 'Wise Card',
|
|
93
|
+
width: 48,
|
|
94
|
+
},
|
|
95
|
+
primaryText: '•••• 9204',
|
|
96
|
+
},
|
|
97
|
+
},
|
|
84
98
|
],
|
|
85
99
|
},
|
|
86
100
|
{
|
|
@@ -130,6 +144,17 @@ const tableData = {
|
|
|
130
144
|
sentiment: 'neutral',
|
|
131
145
|
},
|
|
132
146
|
},
|
|
147
|
+
{
|
|
148
|
+
cell: {
|
|
149
|
+
type: 'media',
|
|
150
|
+
media: {
|
|
151
|
+
src: '../wise-card.svg',
|
|
152
|
+
alt: 'Wise Card',
|
|
153
|
+
width: 48,
|
|
154
|
+
},
|
|
155
|
+
primaryText: '•••• 9200',
|
|
156
|
+
},
|
|
157
|
+
},
|
|
133
158
|
],
|
|
134
159
|
},
|
|
135
160
|
{
|
|
@@ -179,6 +204,17 @@ const tableData = {
|
|
|
179
204
|
sentiment: 'positive',
|
|
180
205
|
},
|
|
181
206
|
},
|
|
207
|
+
{
|
|
208
|
+
cell: {
|
|
209
|
+
type: 'media',
|
|
210
|
+
media: {
|
|
211
|
+
src: '../wise-card.svg',
|
|
212
|
+
alt: 'Wise Card',
|
|
213
|
+
width: 48,
|
|
214
|
+
},
|
|
215
|
+
primaryText: '•••• 9200',
|
|
216
|
+
},
|
|
217
|
+
},
|
|
182
218
|
],
|
|
183
219
|
},
|
|
184
220
|
{
|
|
@@ -231,6 +267,17 @@ const tableData = {
|
|
|
231
267
|
sentiment: 'warning',
|
|
232
268
|
},
|
|
233
269
|
},
|
|
270
|
+
{
|
|
271
|
+
cell: {
|
|
272
|
+
type: 'media',
|
|
273
|
+
media: {
|
|
274
|
+
src: '../wise-card.svg',
|
|
275
|
+
alt: 'Wise Card',
|
|
276
|
+
width: 48,
|
|
277
|
+
},
|
|
278
|
+
primaryText: '•••• 9200',
|
|
279
|
+
},
|
|
280
|
+
},
|
|
234
281
|
],
|
|
235
282
|
},
|
|
236
283
|
{
|
|
@@ -283,6 +330,17 @@ const tableData = {
|
|
|
283
330
|
sentiment: 'pending',
|
|
284
331
|
},
|
|
285
332
|
},
|
|
333
|
+
{
|
|
334
|
+
cell: {
|
|
335
|
+
type: 'media',
|
|
336
|
+
media: {
|
|
337
|
+
src: '../wise-card.svg',
|
|
338
|
+
alt: 'Wise Card',
|
|
339
|
+
width: 48,
|
|
340
|
+
},
|
|
341
|
+
primaryText: '•••• 9200',
|
|
342
|
+
},
|
|
343
|
+
},
|
|
286
344
|
],
|
|
287
345
|
},
|
|
288
346
|
] satisfies TableRowType[] | TableRowClickableType[],
|
|
@@ -3,6 +3,7 @@ import '@testing-library/jest-dom';
|
|
|
3
3
|
import TableCell, {
|
|
4
4
|
TableCellCurrency,
|
|
5
5
|
TableCellLeading,
|
|
6
|
+
TableCellMedia,
|
|
6
7
|
TableCellStatus,
|
|
7
8
|
TableCellText,
|
|
8
9
|
} from './TableCell';
|
|
@@ -40,6 +41,15 @@ describe('TableCell Component', () => {
|
|
|
40
41
|
secondaryText: '6 days ago',
|
|
41
42
|
sentiment: 'pending',
|
|
42
43
|
} satisfies TableCellStatus,
|
|
44
|
+
media: {
|
|
45
|
+
type: 'media',
|
|
46
|
+
primaryText: 'Media content',
|
|
47
|
+
secondaryText: 'Media secondary content',
|
|
48
|
+
media: {
|
|
49
|
+
src: 'https://via.placeholder.com/150',
|
|
50
|
+
alt: 'Media content alt',
|
|
51
|
+
},
|
|
52
|
+
} satisfies TableCellMedia,
|
|
43
53
|
custom: <div>Custom content</div>,
|
|
44
54
|
};
|
|
45
55
|
|
|
@@ -295,4 +305,11 @@ describe('TableCell Component', () => {
|
|
|
295
305
|
);
|
|
296
306
|
expect(screen.queryByText('6 days ago')).not.toBeInTheDocument();
|
|
297
307
|
});
|
|
308
|
+
|
|
309
|
+
it('renders `media` cell type content', () => {
|
|
310
|
+
render(<TableCell cell={{ ...cellContentMocks.media }} />);
|
|
311
|
+
expect(screen.getByTestId('np-table-content-media')).toBeInTheDocument();
|
|
312
|
+
expect(screen.getByAltText('Media content alt')).toBeInTheDocument();
|
|
313
|
+
expect(screen.getByText('Media content')).toBeInTheDocument();
|
|
314
|
+
});
|
|
298
315
|
});
|
package/src/table/TableCell.tsx
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import TableStatusText from './TableStatusText';
|
|
2
2
|
import StatusIcon from '../statusIcon';
|
|
3
3
|
import { Flag } from '@wise/art';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { ImgHTMLAttributes } from 'react';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import Body from '../body';
|
|
7
7
|
import Money, { MoneyProps } from '../money';
|
|
8
8
|
import AvatarView from '../avatarView';
|
|
9
9
|
|
|
10
10
|
interface TableCellTypeProp {
|
|
11
|
-
type: 'leading' | 'text' | 'currency' | 'status';
|
|
11
|
+
type: 'leading' | 'text' | 'currency' | 'status' | 'media';
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
// `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`
|
|
14
|
+
// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`
|
|
15
15
|
interface TableCellTextProps {
|
|
16
16
|
primaryText?: string;
|
|
17
17
|
secondaryText?: string;
|
|
@@ -22,6 +22,10 @@ interface TableCellStatusProp {
|
|
|
22
22
|
status?: 'error' | 'success';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
export interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {
|
|
26
|
+
media?: ImgHTMLAttributes<HTMLImageElement>;
|
|
27
|
+
}
|
|
28
|
+
|
|
25
29
|
export interface TableCellLeading
|
|
26
30
|
extends TableCellTypeProp,
|
|
27
31
|
TableCellTextProps,
|
|
@@ -46,7 +50,7 @@ export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
|
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
export interface TableCellType {
|
|
49
|
-
cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
|
|
53
|
+
cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;
|
|
50
54
|
alignment?: 'left' | 'right';
|
|
51
55
|
}
|
|
52
56
|
|
|
@@ -77,6 +81,11 @@ const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: T
|
|
|
77
81
|
mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;
|
|
78
82
|
}
|
|
79
83
|
|
|
84
|
+
if (cell?.type === 'media' && cell.media) {
|
|
85
|
+
// eslint-disable-next-line jsx-a11y/alt-text
|
|
86
|
+
mediaContent = <img {...cell.media} />;
|
|
87
|
+
}
|
|
88
|
+
|
|
80
89
|
if (mediaContent) {
|
|
81
90
|
return (
|
|
82
91
|
<div
|
|
@@ -111,7 +120,7 @@ const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: T
|
|
|
111
120
|
{cell?.type === 'text' && cell?.text && (
|
|
112
121
|
<TableStatusText text={cell?.text} status={cell?.status} />
|
|
113
122
|
)}
|
|
114
|
-
{cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && (
|
|
123
|
+
{cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (
|
|
115
124
|
<div
|
|
116
125
|
className={clsx('np-table-content', {
|
|
117
126
|
'np-table-content--reversed': alignment === 'right',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="64" height="42" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#business_green_wise_2023_active__a)"><g filter="url(#business_green_wise_2023_active__b)" clip-path="url(#business_green_wise_2023_active__c)"><g clip-path="url(#business_green_wise_2023_active__d)"><rect width="64" height="42" rx="5" fill="#163300"/><mask id="business_green_wise_2023_active__e" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="6" width="15" height="14"><path d="m43.917 15.059 3.65-4.294h-.002l-2.218-3.892h12.07l-4.672 12.916h-2.648l3.87-10.716h-4.991l1.11 1.922-.006.053-1.706 1.986h2.792l-.733 2.025h-6.516Z" fill="#F0F"/></mask><g mask="url(#business_green_wise_2023_active__e)"><path fill="#9FE870" d="M42.667 5.333h16v16h-16z"/></g><g style="mix-blend-mode:overlay" opacity=".2" filter="url(#business_green_wise_2023_active__f)"><path fill="#fff" d="m35.549-5.015 35.995-.628.907 51.992-35.994.628z"/></g><g style="mix-blend-mode:overlay" opacity=".14" filter="url(#business_green_wise_2023_active__g)"><path fill="#000" d="m-18.197-5.015 35.995-.628.907 51.992-35.994.628z"/></g></g></g></g><defs><filter id="business_green_wise_2023_active__a" x="0" y="-.6" width="64" height="42.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-.6"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="shape" result="effect1_innerShadow_957_18749"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/><feBlend in2="effect1_innerShadow_957_18749" result="effect2_innerShadow_957_18749"/></filter><filter id="business_green_wise_2023_active__b" x="0" y="-.6" width="64" height="42.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-.6"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/><feBlend in2="shape" result="effect1_innerShadow_957_18749"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/><feBlend in2="effect1_innerShadow_957_18749" result="effect2_innerShadow_957_18749"/></filter><filter id="business_green_wise_2023_active__f" x="24.549" y="-16.644" width="58.902" height="74.62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.5" result="effect1_foregroundBlur_957_18749"/></filter><filter id="business_green_wise_2023_active__g" x="-36.197" y="-23.644" width="72.902" height="88.62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur_957_18749"/></filter><clipPath id="business_green_wise_2023_active__c"><rect width="64" height="42" rx="5" fill="#fff"/></clipPath><clipPath id="business_green_wise_2023_active__d"><rect width="64" height="42" rx="5" fill="#fff"/></clipPath></defs></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled || undefined,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;IAClB,eAAe,EAAErB,QAAQ,IAAIsB,SAAS;AACtCzB,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled || undefined,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;IAClB,eAAe,EAAErB,QAAQ,IAAIsB,SAAS;AACtCzB,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.js","sources":["../../../../src/primitives/PrimitiveButton/src/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '..';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":"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"}
|