@transferwise/components 0.0.0-experimental-de92c64 → 0.0.0-experimental-1f90331
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/button/Button.js +4 -3
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +4 -3
- package/build/button/Button.mjs.map +1 -1
- package/build/iconButton/IconButton.js +2 -2
- package/build/iconButton/IconButton.mjs +2 -2
- package/build/link/Link.js +2 -2
- package/build/link/Link.mjs +2 -2
- package/build/main.css +13 -3
- package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.js → src/PrimitiveAnchor.js} +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -0
- package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.mjs → src/PrimitiveAnchor.mjs} +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -0
- package/build/primitives/PrimitiveButton/{PrimitiveButton.js → src/PrimitiveButton.js} +3 -2
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -0
- package/build/primitives/PrimitiveButton/{PrimitiveButton.mjs → src/PrimitiveButton.mjs} +3 -2
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -0
- package/build/styles/button/Button.css +13 -3
- package/build/styles/button/Button.vars.css +10 -3
- package/build/styles/main.css +13 -3
- package/build/types/button/Button.d.ts.map +1 -1
- 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/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveAnchor/src/index.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/primitives/PrimitiveButton/{PrimitiveButton.d.ts → src/PrimitiveButton.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/{PrimitiveButton.types.d.ts → src/PrimitiveButton.types.d.ts} +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
- package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
- package/package.json +3 -3
- package/src/button/Button.css +13 -3
- package/src/button/Button.less +7 -1
- package/src/button/Button.spec.tsx +103 -0
- package/src/button/Button.tsx +2 -1
- package/src/button/Button.vars.css +10 -3
- package/src/button/Button.vars.less +16 -6
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +0 -1
- package/src/main.css +13 -3
- package/src/primitives/PrimitiveAnchor/index.ts +2 -6
- package/src/primitives/PrimitiveAnchor/{PrimitiveAnchor.tsx → src/PrimitiveAnchor.tsx} +1 -1
- package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
- 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/index.ts +2 -6
- package/src/primitives/PrimitiveButton/{PrimitiveButton.tsx → src/PrimitiveButton.tsx} +5 -6
- package/src/primitives/PrimitiveButton/{PrimitiveButton.types.ts → src/PrimitiveButton.types.ts} +1 -1
- package/src/primitives/PrimitiveButton/src/index.ts +6 -0
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +15 -9
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +0 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +0 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +0 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts +0 -25
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +0 -1
- package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +0 -1
- package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +0 -33
- /package/build/types/primitives/PrimitiveAnchor/{PrimitiveAnchor.d.ts → src/PrimitiveAnchor.d.ts} +0 -0
package/src/button/Button.less
CHANGED
|
@@ -30,10 +30,16 @@
|
|
|
30
30
|
|
|
31
31
|
&.wds-Button--disabled,
|
|
32
32
|
&:disabled {
|
|
33
|
+
// The declarations below are necessary as design specs for
|
|
34
|
+
// the button's disabled state have changed. This is to be
|
|
35
|
+
// further investigated at a later stage.
|
|
36
|
+
// @see https://transferwise.atlassian.net/browse/DS-7386
|
|
37
|
+
filter: none;
|
|
33
38
|
mix-blend-mode: luminosity;
|
|
34
39
|
opacity: 0.45;
|
|
35
40
|
cursor: not-allowed;
|
|
36
41
|
|
|
42
|
+
&,
|
|
37
43
|
&:hover,
|
|
38
44
|
&:active {
|
|
39
45
|
background-color: var(--Button-background);
|
|
@@ -122,7 +128,7 @@
|
|
|
122
128
|
|
|
123
129
|
|
|
124
130
|
|
|
125
|
-
// Width
|
|
131
|
+
// Width modifiers
|
|
126
132
|
&--block {
|
|
127
133
|
width: 100%;
|
|
128
134
|
}
|
|
@@ -71,6 +71,109 @@ describe('Button', () => {
|
|
|
71
71
|
);
|
|
72
72
|
expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
|
|
73
73
|
});
|
|
74
|
+
|
|
75
|
+
describe('disabled mode', () => {
|
|
76
|
+
describe('button', () => {
|
|
77
|
+
it('should not be disabled by default', () => {
|
|
78
|
+
render(<Button v2>{name}</Button>);
|
|
79
|
+
const button = screen.getByRole('button');
|
|
80
|
+
expect(button).toBeEnabled();
|
|
81
|
+
expect(button).not.toHaveAttribute('aria-disabled');
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it('should respect disabled mode and set it only via the `disabled` attribute', () => {
|
|
85
|
+
render(
|
|
86
|
+
<Button v2 disabled>
|
|
87
|
+
{name}
|
|
88
|
+
</Button>,
|
|
89
|
+
);
|
|
90
|
+
const button = screen.getByRole('button');
|
|
91
|
+
expect(button).toBeDisabled();
|
|
92
|
+
expect(button).not.toHaveAttribute('aria-disabled');
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
describe('anchor', () => {
|
|
97
|
+
it('should not be disabled by default', () => {
|
|
98
|
+
render(
|
|
99
|
+
<Button v2 href="wise.com">
|
|
100
|
+
{name}
|
|
101
|
+
</Button>,
|
|
102
|
+
);
|
|
103
|
+
const button = screen.getByRole('link');
|
|
104
|
+
expect(button).toBeEnabled();
|
|
105
|
+
expect(button).not.toHaveAttribute('aria-disabled');
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
it('should respect disabled mode', () => {
|
|
109
|
+
render(
|
|
110
|
+
<Button v2 href="wise.com" disabled>
|
|
111
|
+
{name}
|
|
112
|
+
</Button>,
|
|
113
|
+
);
|
|
114
|
+
const button = screen.getByRole('link');
|
|
115
|
+
expect(button).toHaveAttribute('aria-disabled');
|
|
116
|
+
expect(button).toBeEnabled();
|
|
117
|
+
expect(button).not.toHaveAttribute('href');
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
describe('loading mode', () => {
|
|
123
|
+
describe('button', () => {
|
|
124
|
+
it('should not be loading by default', () => {
|
|
125
|
+
render(<Button v2>{name}</Button>);
|
|
126
|
+
const button = screen.getByRole('button');
|
|
127
|
+
expect(button).toBeEnabled();
|
|
128
|
+
expect(button).not.toHaveAttribute('aria-busy');
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
it('should respect loading mode', () => {
|
|
132
|
+
render(
|
|
133
|
+
<Button v2 loading>
|
|
134
|
+
{name}
|
|
135
|
+
</Button>,
|
|
136
|
+
);
|
|
137
|
+
const button = screen.getByRole('button');
|
|
138
|
+
expect(button).toHaveAttribute('aria-busy');
|
|
139
|
+
// the `disabled` attribute is not set to keep the button
|
|
140
|
+
// focusable but aria attribute is defined to make it
|
|
141
|
+
// announced properly by the assistive tech
|
|
142
|
+
expect(button).toBeEnabled();
|
|
143
|
+
expect(button).toHaveAttribute('aria-disabled');
|
|
144
|
+
});
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
describe('anchor', () => {
|
|
148
|
+
it('should not be loading by default', () => {
|
|
149
|
+
render(
|
|
150
|
+
<Button v2 href="wise.com">
|
|
151
|
+
{name}
|
|
152
|
+
</Button>,
|
|
153
|
+
);
|
|
154
|
+
const button = screen.getByRole('link');
|
|
155
|
+
expect(button).toBeEnabled();
|
|
156
|
+
expect(button).not.toHaveAttribute('aria-busy');
|
|
157
|
+
expect(button).not.toHaveAttribute('aria-disabled');
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
it('should respect loading mode', () => {
|
|
161
|
+
render(
|
|
162
|
+
<Button v2 loading href="wise.com">
|
|
163
|
+
{name}
|
|
164
|
+
</Button>,
|
|
165
|
+
);
|
|
166
|
+
const button = screen.getByRole('link');
|
|
167
|
+
expect(button).toHaveAttribute('aria-busy');
|
|
168
|
+
// the `disabled` attribute is not set to keep the button
|
|
169
|
+
// focusable but aria attribute is defined to make it
|
|
170
|
+
// announced properly by the assistive tech
|
|
171
|
+
expect(button).toBeEnabled();
|
|
172
|
+
expect(button).toHaveAttribute('aria-disabled');
|
|
173
|
+
expect(button).not.toHaveAttribute('href');
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
});
|
|
74
177
|
});
|
|
75
178
|
});
|
|
76
179
|
|
package/src/button/Button.tsx
CHANGED
|
@@ -94,7 +94,8 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
94
94
|
{...(props as any)}
|
|
95
95
|
href={href}
|
|
96
96
|
className={classNames}
|
|
97
|
-
disabled={disabled}
|
|
97
|
+
disabled={disabled || loading}
|
|
98
|
+
aria-busy={loading || undefined}
|
|
98
99
|
>
|
|
99
100
|
{content}
|
|
100
101
|
</PrimitiveAnchor>
|
|
@@ -26,14 +26,21 @@
|
|
|
26
26
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
27
27
|
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
28
28
|
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
29
|
-
--Button-primary-negative-color: var(--color-contrast);
|
|
29
|
+
--Button-primary-negative-color: var(--color-contrast-overlay);
|
|
30
30
|
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
31
31
|
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
32
32
|
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
33
33
|
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
34
34
|
}
|
|
35
35
|
.np-theme-personal--bright-green .wds-Button {
|
|
36
|
-
--color
|
|
36
|
+
--Button-primary-negative-color: var(--color-white);
|
|
37
37
|
--Button-secondary-color: var(--color-interactive-control);
|
|
38
|
-
--Button-secondary-negative-color: var(--color-
|
|
38
|
+
--Button-secondary-negative-color: var(--color-white);
|
|
39
|
+
}
|
|
40
|
+
.np-theme-personal--forest-green .wds-Button {
|
|
41
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
42
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-primary);
|
|
43
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
44
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
45
|
+
--Button-secondary-negative-color: var(--color-contrast-overlay);
|
|
39
46
|
}
|
|
@@ -33,18 +33,28 @@
|
|
|
33
33
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
34
34
|
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
35
35
|
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
36
|
-
--Button-primary-negative-color: var(--color-contrast);
|
|
36
|
+
--Button-primary-negative-color: var(--color-contrast-overlay);
|
|
37
37
|
|
|
38
38
|
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
39
39
|
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
40
40
|
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
41
41
|
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
42
|
-
}
|
|
43
42
|
|
|
44
|
-
|
|
45
|
-
.
|
|
46
|
-
--color
|
|
43
|
+
|
|
44
|
+
.np-theme-personal--bright-green & {
|
|
45
|
+
--Button-primary-negative-color: var(--color-white);
|
|
47
46
|
--Button-secondary-color: var(--color-interactive-control);
|
|
48
|
-
--Button-secondary-negative-color: var(--color-
|
|
47
|
+
--Button-secondary-negative-color: var(--color-white);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
.np-theme-personal--forest-green & {
|
|
52
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
53
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-primary);
|
|
54
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
55
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
56
|
+
--Button-secondary-negative-color: var(--color-contrast-overlay);
|
|
49
57
|
}
|
|
50
58
|
}
|
|
59
|
+
|
|
60
|
+
|
|
@@ -9,7 +9,6 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
9
9
|
class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
|
|
10
10
|
>
|
|
11
11
|
<button
|
|
12
|
-
aria-disabled="false"
|
|
13
12
|
aria-label="back to previous step"
|
|
14
13
|
aria-live="off"
|
|
15
14
|
class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
|
package/src/main.css
CHANGED
|
@@ -744,16 +744,23 @@ div.critical-comms .critical-comms-body {
|
|
|
744
744
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
745
745
|
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
746
746
|
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
747
|
-
--Button-primary-negative-color: var(--color-contrast);
|
|
747
|
+
--Button-primary-negative-color: var(--color-contrast-overlay);
|
|
748
748
|
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
749
749
|
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
750
750
|
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
751
751
|
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
752
752
|
}
|
|
753
753
|
.np-theme-personal--bright-green .wds-Button {
|
|
754
|
-
--color
|
|
754
|
+
--Button-primary-negative-color: var(--color-white);
|
|
755
755
|
--Button-secondary-color: var(--color-interactive-control);
|
|
756
|
-
--Button-secondary-negative-color: var(--color-
|
|
756
|
+
--Button-secondary-negative-color: var(--color-white);
|
|
757
|
+
}
|
|
758
|
+
.np-theme-personal--forest-green .wds-Button {
|
|
759
|
+
--Button-secondary-background: var(--color-interactive-neutral);
|
|
760
|
+
--Button-secondary-negative-background: var(--color-sentiment-negative-primary);
|
|
761
|
+
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
762
|
+
--Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
763
|
+
--Button-secondary-negative-color: var(--color-contrast-overlay);
|
|
757
764
|
}
|
|
758
765
|
/* Button Styles */
|
|
759
766
|
.wds-Button {
|
|
@@ -786,10 +793,13 @@ div.critical-comms .critical-comms-body {
|
|
|
786
793
|
}
|
|
787
794
|
.wds-Button.wds-Button--disabled,
|
|
788
795
|
.wds-Button:disabled {
|
|
796
|
+
filter: none;
|
|
789
797
|
mix-blend-mode: luminosity;
|
|
790
798
|
opacity: 0.45;
|
|
791
799
|
cursor: not-allowed;
|
|
792
800
|
}
|
|
801
|
+
.wds-Button.wds-Button--disabled,
|
|
802
|
+
.wds-Button:disabled,
|
|
793
803
|
.wds-Button.wds-Button--disabled:hover,
|
|
794
804
|
.wds-Button:disabled:hover,
|
|
795
805
|
.wds-Button.wds-Button--disabled:active,
|
|
@@ -90,7 +90,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
|
|
|
90
90
|
* https://www.scottohara.me/blog/2021/05/28/disabled-links.html
|
|
91
91
|
*/
|
|
92
92
|
const anchorProps = {
|
|
93
|
-
'aria-disabled': disabled,
|
|
93
|
+
'aria-disabled': disabled || undefined,
|
|
94
94
|
className: anchorClasses,
|
|
95
95
|
'data-testid': testId,
|
|
96
96
|
href: disabled ? undefined : href,
|
|
@@ -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 '../src';
|
|
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
|
|
@@ -95,10 +95,9 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
|
|
|
95
95
|
* by assistive technologies, set to 'polite' during loading.
|
|
96
96
|
*/
|
|
97
97
|
const buttonProps = {
|
|
98
|
-
'aria-disabled':
|
|
99
|
-
'aria-
|
|
100
|
-
|
|
101
|
-
: props['aria-label'],
|
|
98
|
+
'aria-disabled': loading || undefined,
|
|
99
|
+
'aria-busy': loading || undefined,
|
|
100
|
+
'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],
|
|
102
101
|
'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,
|
|
103
102
|
className: classNames,
|
|
104
103
|
'data-testid': testId,
|
|
@@ -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 '../src';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Primitives/Button/Tests',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { screen } from '@testing-library/react';
|
|
2
|
-
import PrimitiveButton from '..';
|
|
3
|
-
import messages from '../../../i18n/commonMessages/Button.messages';
|
|
4
2
|
import { render } from '../../../test-utils';
|
|
3
|
+
import PrimitiveButton from '../src';
|
|
4
|
+
import allMessages from '../../../i18n';
|
|
5
5
|
|
|
6
6
|
describe('Button', () => {
|
|
7
7
|
const defaultProps = {
|
|
@@ -11,7 +11,7 @@ describe('Button', () => {
|
|
|
11
11
|
const renderButton = (
|
|
12
12
|
props?: Partial<typeof defaultProps>,
|
|
13
13
|
locale = 'en',
|
|
14
|
-
localeMessages =
|
|
14
|
+
localeMessages = allMessages.en,
|
|
15
15
|
) => {
|
|
16
16
|
return render(
|
|
17
17
|
<PrimitiveButton {...defaultProps} {...props} />,
|
|
@@ -50,6 +50,17 @@ describe('Button', () => {
|
|
|
50
50
|
expect(button).toBeDisabled();
|
|
51
51
|
});
|
|
52
52
|
|
|
53
|
+
it('disables and announces the button as busy in loading mode', () => {
|
|
54
|
+
const props = {
|
|
55
|
+
...defaultProps,
|
|
56
|
+
loading: true,
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
renderButton(props);
|
|
60
|
+
|
|
61
|
+
expect(screen.getByRole('button', { busy: true })).toHaveAttribute('aria-disabled', 'true');
|
|
62
|
+
});
|
|
63
|
+
|
|
53
64
|
it('sets data-testid attribute', () => {
|
|
54
65
|
const props = {
|
|
55
66
|
...defaultProps,
|
|
@@ -98,12 +109,7 @@ describe('Button', () => {
|
|
|
98
109
|
loading: true,
|
|
99
110
|
};
|
|
100
111
|
|
|
101
|
-
|
|
102
|
-
...messages,
|
|
103
|
-
'neptune.Button.loadingAriaLabel': 'cargando',
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
renderButton(props, 'es', spanishMessages);
|
|
112
|
+
renderButton(props, 'es', allMessages.es);
|
|
107
113
|
|
|
108
114
|
const button = screen.getByRole('button');
|
|
109
115
|
expect(button).toHaveAttribute('aria-label', 'cargando');
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.js","sources":["../../../src/primitives/PrimitiveAnchor/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,\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;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,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/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,\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;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,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/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': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : 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","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,SAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,eAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,cAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.mjs","sources":["../../../src/primitives/PrimitiveButton/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': disabled || loading,\n 'aria-label': loading\n ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)\n : 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","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":";;;;;;AAAA;AAgBA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AACtB,EAAA,MAAMC,UAAU,GAAGC,IAAI,CAACjB,SAAS,CAAC,CAAA;AAElC,EAAA,MAAMkB,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;IAC7C,IAAIlB,QAAQ,IAAIC,OAAO,EAAE;MACvBiB,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLf,OAAO,GAAGc,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,EACD,CAAClB,QAAQ,EAAEC,OAAO,EAAEG,OAAO,CAAC,CAC7B,CAAA;AAED,EAAA,MAAMgB,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7Cb,OAAO,GAAGa,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACb,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMgB,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CZ,MAAM,GAAGY,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACZ,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CX,YAAY,GAAGW,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACX,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CV,YAAY,GAAGU,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACV,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMgB,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDT,SAAS,GAAGS,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACT,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMgB,WAAW,GAAG;IAClB,eAAe,EAAEzB,QAAQ,IAAIC,OAAO;AACpC,IAAA,YAAY,EAAEA,OAAO,GACjBW,IAAI,CAACc,aAAa,CAACC,QAAQ,CAACC,gBAAqC,CAAC,GAClElB,KAAK,CAAC,YAAY,CAAC;AACvB,IAAA,WAAW,EAAGT,OAAO,GAAG,QAAQ,GAAG,KAAoD;AACvFH,IAAAA,SAAS,EAAEgB,UAAU;AACrB,IAAA,aAAa,EAAEZ,MAAM;IACrBF,QAAQ;IACRD,EAAE;IACFY,GAAG;IACHR,IAAI;AACJG,IAAAA,MAAM,EAAEe,UAAU;AAClBjB,IAAAA,OAAO,EAAEY,WAAW;AACpBX,IAAAA,OAAO,EAAEe,WAAW;AACpBb,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,YAAY,EAAEe,gBAAgB;AAC9Bd,IAAAA,SAAS,EAAEe,aAAa;IACxB,GAAGd,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOmB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAA,GAAYJ,WAAW;AAAA5B,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAS,CAAC,CAAA;AACrD,CAAC,EACF;AAEDF,eAAe,CAACmC,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/PrimitiveAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAC;AAE/C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAkGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { BasePrimitiveProps, StyleProp } from '..';
|
|
3
|
-
/**
|
|
4
|
-
* Type aliases for an anchor component.
|
|
5
|
-
*/
|
|
6
|
-
export type PrimitiveAnchorAttributes = React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
7
|
-
export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
|
|
8
|
-
/**
|
|
9
|
-
* Properties for the anchor component.
|
|
10
|
-
*/
|
|
11
|
-
export interface PrimitiveAnchorProps extends BasePrimitiveProps, StyleProp, Omit<PrimitiveAnchorAttributes, 'role'> {
|
|
12
|
-
/** Content of the anchor */
|
|
13
|
-
children?: ReactNode;
|
|
14
|
-
/** The URL to navigate to when the anchor is clicked */
|
|
15
|
-
href?: string | undefined;
|
|
16
|
-
/** Disable the anchor */
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
/** Reference to the anchor element */
|
|
19
|
-
ref?: PrimitiveAnchorElementRef;
|
|
20
|
-
/**
|
|
21
|
-
* HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
|
|
22
|
-
*/
|
|
23
|
-
target?: HTMLAnchorElement['target'];
|
|
24
|
-
}
|
|
25
|
-
//# sourceMappingURL=PrimitiveAnchor.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AACtF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC;IACzC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACtC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/PrimitiveButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AAE9C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAuGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/PrimitiveButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AACpG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,yBAAyB;IAC3B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;CACjC"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
import { BasePrimitiveProps, StyleProp } from '..';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Type aliases for an anchor component.
|
|
6
|
-
*/
|
|
7
|
-
export type PrimitiveAnchorAttributes = React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
8
|
-
export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Properties for the anchor component.
|
|
12
|
-
*/
|
|
13
|
-
export interface PrimitiveAnchorProps
|
|
14
|
-
extends BasePrimitiveProps,
|
|
15
|
-
StyleProp,
|
|
16
|
-
Omit<PrimitiveAnchorAttributes, 'role'> {
|
|
17
|
-
/** Content of the anchor */
|
|
18
|
-
children?: ReactNode;
|
|
19
|
-
|
|
20
|
-
/** The URL to navigate to when the anchor is clicked */
|
|
21
|
-
href?: string | undefined;
|
|
22
|
-
|
|
23
|
-
/** Disable the anchor */
|
|
24
|
-
disabled?: boolean;
|
|
25
|
-
|
|
26
|
-
/** Reference to the anchor element */
|
|
27
|
-
ref?: PrimitiveAnchorElementRef;
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
|
|
31
|
-
*/
|
|
32
|
-
target?: HTMLAnchorElement['target'];
|
|
33
|
-
}
|
/package/build/types/primitives/PrimitiveAnchor/{PrimitiveAnchor.d.ts → src/PrimitiveAnchor.d.ts}
RENAMED
|
File without changes
|