@transferwise/components 0.0.0-experimental-5e036d6 → 0.0.0-experimental-de92c64
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/avatarLayout/AvatarLayout.js +1 -2
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +1 -2
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +2 -2
- package/build/button/Button.mjs +2 -2
- package/build/iconButton/IconButton.js +2 -2
- package/build/iconButton/IconButton.mjs +2 -2
- package/build/index.js +0 -2
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -1
- package/build/index.mjs.map +1 -1
- package/build/link/Link.js +2 -2
- package/build/link/Link.mjs +2 -2
- package/build/main.css +1 -2
- 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/avatarLayout/AvatarLayout.css +1 -2
- package/build/styles/main.css +1 -2
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +1 -0
- package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts +25 -0
- 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/uploadInput/uploadButton/getAllowedFileTypes.d.ts.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -23
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs +3 -23
- package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
- package/package.json +3 -3
- package/src/avatarLayout/AvatarLayout.css +1 -2
- package/src/avatarLayout/AvatarLayout.less +1 -1
- package/src/avatarLayout/AvatarLayout.tsx +0 -1
- package/src/drawer/Drawer.rtl.spec.tsx +59 -0
- package/src/drawer/Drawer.spec.js +101 -0
- package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap +55 -0
- package/src/index.ts +0 -12
- package/src/main.css +1 -2
- package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +33 -0
- 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/uploadInput/UploadInput.tests.story.tsx +5 -5
- package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts +0 -12
- package/src/uploadInput/uploadButton/getAllowedFileTypes.ts +7 -33
- 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/table/Table.js +0 -166
- package/build/table/Table.js.map +0 -1
- package/build/table/Table.messages.js +0 -24
- package/build/table/Table.messages.js.map +0 -1
- package/build/table/Table.messages.mjs +0 -22
- package/build/table/Table.messages.mjs.map +0 -1
- package/build/table/Table.mjs +0 -164
- package/build/table/Table.mjs.map +0 -1
- package/build/table/TableCell.js +0 -86
- package/build/table/TableCell.js.map +0 -1
- package/build/table/TableCell.mjs +0 -84
- package/build/table/TableCell.mjs.map +0 -1
- package/build/table/TableHeader.js +0 -57
- package/build/table/TableHeader.js.map +0 -1
- package/build/table/TableHeader.mjs +0 -55
- package/build/table/TableHeader.mjs.map +0 -1
- package/build/table/TableRow.js +0 -85
- package/build/table/TableRow.js.map +0 -1
- package/build/table/TableRow.mjs +0 -83
- package/build/table/TableRow.mjs.map +0 -1
- package/build/table/TableStatusText.js +0 -54
- package/build/table/TableStatusText.js.map +0 -1
- package/build/table/TableStatusText.mjs +0 -52
- package/build/table/TableStatusText.mjs.map +0 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.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/drawer/Drawer.spec.tsx +0 -93
- 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
- /package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts} +0 -0
- /package/src/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.tsx → PrimitiveAnchor.tsx} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst
|
|
1
|
+
{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n fileTypes.map((fileTypeDefinition: string) =>\n fileTypeDefinition\n .split(',')\n .filter((extension) => !extension.includes('/')) // Filter out mime types\n .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n .join(', '),\n );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-de92c64",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,12 +92,12 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
95
|
+
"@transferwise/neptune-css": "0.0.0-experimental-de92c64",
|
|
96
96
|
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
100
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
100
|
+
"@transferwise/neptune-css": "0.0.0-experimental-de92c64",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -24,8 +24,7 @@
|
|
|
24
24
|
margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
25
25
|
}
|
|
26
26
|
.np-avatar-layout-horizontal {
|
|
27
|
-
width: calc(var(--np-avatar-size) *
|
|
28
|
-
width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
|
|
27
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
29
28
|
height: var(--np-avatar-layout-size);
|
|
30
29
|
}
|
|
31
30
|
.np-avatar-layout-horizontal-mask {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&-horizontal {
|
|
38
|
-
width: calc(var(--np-avatar-size) *
|
|
38
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
39
39
|
height: var(--np-avatar-layout-size);
|
|
40
40
|
|
|
41
41
|
&-mask {
|
|
@@ -40,7 +40,6 @@ export default function AvatarLayout({
|
|
|
40
40
|
'--np-avatar-layout-size': `${size}px`,
|
|
41
41
|
'--np-avatar-size': `${avatarSize}px`,
|
|
42
42
|
'--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
|
|
43
|
-
'--np-avatar-avatars-count': avatars.length,
|
|
44
43
|
}}
|
|
45
44
|
{...restProps}
|
|
46
45
|
>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { DimmerProps } from '../dimmer';
|
|
2
|
+
import { SlidingPanelProps } from '../slidingPanel';
|
|
3
|
+
import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
|
|
4
|
+
|
|
5
|
+
import Drawer from './Drawer';
|
|
6
|
+
|
|
7
|
+
mockMatchMedia();
|
|
8
|
+
|
|
9
|
+
jest.mock(
|
|
10
|
+
'../dimmer',
|
|
11
|
+
() =>
|
|
12
|
+
function Dimmer({ open, children }: DimmerProps) {
|
|
13
|
+
return open ? <div className="dimmer">{children}</div> : null;
|
|
14
|
+
},
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
jest.mock(
|
|
18
|
+
'../slidingPanel',
|
|
19
|
+
() =>
|
|
20
|
+
function SlidingPanel({ open, children }: SlidingPanelProps) {
|
|
21
|
+
return open ? <div className="sliding-panel">{children}</div> : null;
|
|
22
|
+
},
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
describe('Drawer', () => {
|
|
26
|
+
const props = {
|
|
27
|
+
onClose: jest.fn(),
|
|
28
|
+
open: true,
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
afterEach(() => {
|
|
32
|
+
jest.clearAllMocks();
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
it('renders content when open', () => {
|
|
36
|
+
const { container } = render(<Drawer {...props}>content</Drawer>);
|
|
37
|
+
|
|
38
|
+
expect(container).toMatchSnapshot();
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it("doesn't render content when closed", () => {
|
|
42
|
+
const { container } = render(
|
|
43
|
+
<Drawer {...props} open={false}>
|
|
44
|
+
content
|
|
45
|
+
</Drawer>,
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
expect(container).toMatchSnapshot();
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it('calls onClose when user clicks close button', async () => {
|
|
52
|
+
render(<Drawer {...props}>content</Drawer>);
|
|
53
|
+
expect(props.onClose).not.toHaveBeenCalled();
|
|
54
|
+
await userEvent.click(getCloseButton());
|
|
55
|
+
expect(props.onClose).toHaveBeenCalledTimes(1);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
const getCloseButton = () => screen.getByLabelText('Close');
|
|
59
|
+
});
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { mount } from 'enzyme';
|
|
2
|
+
|
|
3
|
+
import { mockMatchMedia } from '../test-utils';
|
|
4
|
+
import Title from '../title/Title';
|
|
5
|
+
|
|
6
|
+
import Drawer from '.';
|
|
7
|
+
|
|
8
|
+
mockMatchMedia();
|
|
9
|
+
jest.mock('../common');
|
|
10
|
+
jest.useFakeTimers();
|
|
11
|
+
|
|
12
|
+
jest.mock(
|
|
13
|
+
'../dimmer',
|
|
14
|
+
() =>
|
|
15
|
+
function Dimmer({ open, children }) {
|
|
16
|
+
return open ? <div className="dimmer">{children}</div> : null;
|
|
17
|
+
},
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
jest.mock(
|
|
21
|
+
'../slidingPanel',
|
|
22
|
+
() =>
|
|
23
|
+
function SlidingPanel({ open, children }) {
|
|
24
|
+
return open ? <div className="sliding-panel">{children}</div> : null;
|
|
25
|
+
},
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const defaultLocale = 'en-GB';
|
|
29
|
+
|
|
30
|
+
jest.mock('react-intl', () => ({
|
|
31
|
+
injectIntl: (Component) =>
|
|
32
|
+
function InjectedComponent(props) {
|
|
33
|
+
return <Component {...props} intl={{ locale: defaultLocale }} />;
|
|
34
|
+
},
|
|
35
|
+
useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
|
|
36
|
+
defineMessages: (translations) => translations,
|
|
37
|
+
}));
|
|
38
|
+
|
|
39
|
+
describe('Drawer', () => {
|
|
40
|
+
let component;
|
|
41
|
+
const props = {
|
|
42
|
+
open: true,
|
|
43
|
+
position: 'left',
|
|
44
|
+
onClose: jest.fn(),
|
|
45
|
+
children: null,
|
|
46
|
+
headerTitle: null,
|
|
47
|
+
footerContent: null,
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
beforeEach(() => {
|
|
51
|
+
component = mount(<Drawer {...props} />);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
afterEach(() => {
|
|
55
|
+
jest.clearAllMocks();
|
|
56
|
+
component.unmount();
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('renders drawer header if title is provided', () => {
|
|
60
|
+
expect(component.find('.np-drawer-header--title')).toHaveLength(0);
|
|
61
|
+
component.setProps({ headerTitle: 'A title' });
|
|
62
|
+
expect(component.find(Title)).toHaveLength(1);
|
|
63
|
+
expect(component.find(Title).props().children).toBe('A title');
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('renders header with or without borders', () => {
|
|
67
|
+
expect(component.find('.np-drawer-header--withborder')).toHaveLength(0);
|
|
68
|
+
component.setProps({ headerTitle: 'A title' });
|
|
69
|
+
expect(component.find('.np-drawer-header--withborder')).toHaveLength(1);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
it('renders content if children are provided', () => {
|
|
73
|
+
expect(component.find('.np-drawer-content')).toHaveLength(0);
|
|
74
|
+
component.setProps({ children: 'SomeChildren' });
|
|
75
|
+
expect(component.find('.np-drawer-content')).toHaveLength(1);
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('renders drawer footer if footerContent is provided', () => {
|
|
79
|
+
expect(component.find('.np-drawer-footer')).toHaveLength(0);
|
|
80
|
+
component.setProps({ footerContent: 'SomeContent' });
|
|
81
|
+
expect(component.find('.np-drawer-footer')).toHaveLength(1);
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it('passes onUnmount to Dimmer onExited prop', () => {
|
|
85
|
+
const onUnmount = jest.fn();
|
|
86
|
+
component.setProps({ onUnmount });
|
|
87
|
+
component.setProps({ open: true });
|
|
88
|
+
expect(component.find('Dimmer').prop('onExited')).toBe(onUnmount);
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('calls onUnmount when the component unmounts', () => {
|
|
92
|
+
const onUnmount = jest.fn();
|
|
93
|
+
component.setProps({ onUnmount });
|
|
94
|
+
component.setProps({ open: true });
|
|
95
|
+
expect(onUnmount).not.toHaveBeenCalled();
|
|
96
|
+
jest.runAllTimers();
|
|
97
|
+
component.setProps({ open: false });
|
|
98
|
+
component.find('Dimmer').prop('onExited')();
|
|
99
|
+
expect(onUnmount).toHaveBeenCalledTimes(1);
|
|
100
|
+
});
|
|
101
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Drawer doesn't render content when closed 1`] = `<div />`;
|
|
4
|
+
|
|
5
|
+
exports[`Drawer renders content when open 1`] = `
|
|
6
|
+
<div>
|
|
7
|
+
<div
|
|
8
|
+
class="dimmer"
|
|
9
|
+
>
|
|
10
|
+
<div
|
|
11
|
+
class="sliding-panel"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
aria-modal="true"
|
|
15
|
+
class="np-drawer"
|
|
16
|
+
role="dialog"
|
|
17
|
+
>
|
|
18
|
+
<div
|
|
19
|
+
class="np-drawer-header"
|
|
20
|
+
>
|
|
21
|
+
<button
|
|
22
|
+
aria-label="Close"
|
|
23
|
+
class="np-close-button close btn-link text-no-decoration np-close-button--large"
|
|
24
|
+
type="button"
|
|
25
|
+
>
|
|
26
|
+
<span
|
|
27
|
+
class="tw-icon tw-icon-cross "
|
|
28
|
+
data-testid="cross-icon"
|
|
29
|
+
>
|
|
30
|
+
<svg
|
|
31
|
+
aria-hidden="true"
|
|
32
|
+
fill="currentColor"
|
|
33
|
+
focusable="false"
|
|
34
|
+
height="24"
|
|
35
|
+
role="none"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
width="24"
|
|
38
|
+
>
|
|
39
|
+
<path
|
|
40
|
+
d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
|
|
41
|
+
/>
|
|
42
|
+
</svg>
|
|
43
|
+
</span>
|
|
44
|
+
</button>
|
|
45
|
+
</div>
|
|
46
|
+
<div
|
|
47
|
+
class="np-drawer-content"
|
|
48
|
+
>
|
|
49
|
+
content
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
package/src/index.ts
CHANGED
|
@@ -96,17 +96,6 @@ export type { UploadProps } from './upload';
|
|
|
96
96
|
export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
|
|
97
97
|
export type { WithIdProps } from './withId';
|
|
98
98
|
export type { IconButtonProps } from './iconButton';
|
|
99
|
-
export type {
|
|
100
|
-
TableProps,
|
|
101
|
-
TableRowType,
|
|
102
|
-
TableRowClickableType,
|
|
103
|
-
TableHeaderType,
|
|
104
|
-
TableCellLeading,
|
|
105
|
-
TableCellText,
|
|
106
|
-
TableCellCurrency,
|
|
107
|
-
TableCellStatus,
|
|
108
|
-
TableCellType,
|
|
109
|
-
} from './table';
|
|
110
99
|
|
|
111
100
|
/**
|
|
112
101
|
* Components
|
|
@@ -207,7 +196,6 @@ export { default as Tooltip } from './tooltip';
|
|
|
207
196
|
export { default as Typeahead } from './typeahead';
|
|
208
197
|
export { default as Upload } from './upload';
|
|
209
198
|
export { default as UploadInput } from './uploadInput';
|
|
210
|
-
export { default as Table } from './table';
|
|
211
199
|
|
|
212
200
|
/**
|
|
213
201
|
* Hooks
|
package/src/main.css
CHANGED
|
@@ -531,8 +531,7 @@ div.critical-comms .critical-comms-body {
|
|
|
531
531
|
margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
|
|
532
532
|
}
|
|
533
533
|
.np-avatar-layout-horizontal {
|
|
534
|
-
width: calc(var(--np-avatar-size) *
|
|
535
|
-
width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
|
|
534
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
536
535
|
height: var(--np-avatar-layout-size);
|
|
537
536
|
}
|
|
538
537
|
.np-avatar-layout-horizontal-mask {
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
}
|
|
@@ -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',
|
|
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
|
|
|
4
4
|
import { Status } from '../common';
|
|
5
5
|
import UploadInput, { UploadInputProps } from './UploadInput';
|
|
6
6
|
import { UploadedFile, UploadResponse } from './types';
|
|
7
|
-
import { userEvent } from '@storybook/test';
|
|
7
|
+
import { userEvent, within } from '@storybook/test';
|
|
8
8
|
|
|
9
9
|
const meta: Meta<typeof UploadInput> = {
|
|
10
10
|
title: 'Forms/UploadInput/Tests',
|
|
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
|
|
|
65
65
|
});
|
|
66
66
|
|
|
67
67
|
const props = {
|
|
68
|
-
onUploadFile: async () => createDelayedPromise(),
|
|
69
|
-
onDeleteFile: async () => createDelayedPromise(),
|
|
68
|
+
onUploadFile: async (formData: FormData) => createDelayedPromise(),
|
|
69
|
+
onDeleteFile: async (id: string | number) => createDelayedPromise(),
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
export const UploadInputWithDescriptionFromProps: Story = {
|
|
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
|
|
|
268
268
|
files: [files[0], files[1], files[2]],
|
|
269
269
|
multiple: true,
|
|
270
270
|
},
|
|
271
|
-
play: async () => {
|
|
271
|
+
play: async ({ canvasElement }) => {
|
|
272
272
|
await userEvent.tab();
|
|
273
273
|
await triggerModalAndConfirm();
|
|
274
274
|
await triggerModalAndConfirm({ isLink: false });
|
|
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
|
|
|
282
282
|
files: [files[0], files[1], files[2]],
|
|
283
283
|
multiple: true,
|
|
284
284
|
},
|
|
285
|
-
play: async () => {
|
|
285
|
+
play: async ({ canvasElement }) => {
|
|
286
286
|
await userEvent.tab();
|
|
287
287
|
await userEvent.tab();
|
|
288
288
|
await userEvent.tab();
|
|
@@ -38,16 +38,4 @@ describe('getAllowedFileTypes', () => {
|
|
|
38
38
|
expect(allowedFileTypes).toStrictEqual(['*']);
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
|
-
|
|
42
|
-
describe('using only mime types', () => {
|
|
43
|
-
const mimeTypes = ['application/json', 'image/jpeg'];
|
|
44
|
-
|
|
45
|
-
beforeAll(() => {
|
|
46
|
-
allowedFileTypes = getAllowedFileTypes(mimeTypes);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
it('returns the original mime types', () => {
|
|
50
|
-
expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
41
|
});
|
|
@@ -1,38 +1,12 @@
|
|
|
1
1
|
import { FileType } from '../../common';
|
|
2
2
|
|
|
3
|
-
const parseFileType = (fileType: string): string => {
|
|
4
|
-
if (fileType?.includes('.')) {
|
|
5
|
-
return fileType.replace('.', '').toUpperCase();
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const mimeType = fileType?.split('/');
|
|
9
|
-
if (mimeType?.length > 1) {
|
|
10
|
-
let parsedType = mimeType[1];
|
|
11
|
-
|
|
12
|
-
if (parsedType.toLocaleLowerCase() === 'jpeg') {
|
|
13
|
-
parsedType = 'jpg, '.concat(parsedType).toUpperCase();
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
return parsedType.toUpperCase();
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return fileType;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
3
|
const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
|
|
23
|
-
fileTypes.map((
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
.map((splittedFileType: string) => parseFileType(splittedFileType))
|
|
31
|
-
.join(', ');
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// If `fileType` contains only `format` or `mime` type, parse the type
|
|
35
|
-
return parseFileType(fileType);
|
|
36
|
-
});
|
|
4
|
+
fileTypes.map((fileTypeDefinition: string) =>
|
|
5
|
+
fileTypeDefinition
|
|
6
|
+
.split(',')
|
|
7
|
+
.filter((extension) => !extension.includes('/')) // Filter out mime types
|
|
8
|
+
.map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
|
|
9
|
+
.join(', '),
|
|
10
|
+
);
|
|
37
11
|
|
|
38
12
|
export default getAllowedFileTypes;
|
|
@@ -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,\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/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,\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/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': 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/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': 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;;;;"}
|