@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.
Files changed (65) hide show
  1. package/build/button/Button.js +4 -3
  2. package/build/button/Button.js.map +1 -1
  3. package/build/button/Button.mjs +4 -3
  4. package/build/button/Button.mjs.map +1 -1
  5. package/build/iconButton/IconButton.js +2 -2
  6. package/build/iconButton/IconButton.mjs +2 -2
  7. package/build/link/Link.js +2 -2
  8. package/build/link/Link.mjs +2 -2
  9. package/build/main.css +13 -3
  10. package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.js → src/PrimitiveAnchor.js} +1 -1
  11. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -0
  12. package/build/primitives/PrimitiveAnchor/{PrimitiveAnchor.mjs → src/PrimitiveAnchor.mjs} +1 -1
  13. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -0
  14. package/build/primitives/PrimitiveButton/{PrimitiveButton.js → src/PrimitiveButton.js} +3 -2
  15. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -0
  16. package/build/primitives/PrimitiveButton/{PrimitiveButton.mjs → src/PrimitiveButton.mjs} +3 -2
  17. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -0
  18. package/build/styles/button/Button.css +13 -3
  19. package/build/styles/button/Button.vars.css +10 -3
  20. package/build/styles/main.css +13 -3
  21. package/build/types/button/Button.d.ts.map +1 -1
  22. package/build/types/primitives/PrimitiveAnchor/index.d.ts +2 -2
  23. package/build/types/primitives/PrimitiveAnchor/index.d.ts.map +1 -1
  24. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -0
  25. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts +3 -0
  26. package/build/types/primitives/PrimitiveAnchor/src/index.d.ts.map +1 -0
  27. package/build/types/primitives/PrimitiveButton/index.d.ts +2 -2
  28. package/build/types/primitives/PrimitiveButton/index.d.ts.map +1 -1
  29. package/build/types/primitives/PrimitiveButton/{PrimitiveButton.d.ts → src/PrimitiveButton.d.ts} +1 -1
  30. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -0
  31. package/build/types/primitives/PrimitiveButton/{PrimitiveButton.types.d.ts → src/PrimitiveButton.types.d.ts} +1 -1
  32. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.types.d.ts.map +1 -0
  33. package/build/types/primitives/PrimitiveButton/src/index.d.ts +3 -0
  34. package/build/types/primitives/PrimitiveButton/src/index.d.ts.map +1 -0
  35. package/package.json +3 -3
  36. package/src/button/Button.css +13 -3
  37. package/src/button/Button.less +7 -1
  38. package/src/button/Button.spec.tsx +103 -0
  39. package/src/button/Button.tsx +2 -1
  40. package/src/button/Button.vars.css +10 -3
  41. package/src/button/Button.vars.less +16 -6
  42. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +0 -1
  43. package/src/main.css +13 -3
  44. package/src/primitives/PrimitiveAnchor/index.ts +2 -6
  45. package/src/primitives/PrimitiveAnchor/{PrimitiveAnchor.tsx → src/PrimitiveAnchor.tsx} +1 -1
  46. package/src/primitives/PrimitiveAnchor/src/index.ts +6 -0
  47. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +1 -1
  48. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -1
  49. package/src/primitives/PrimitiveButton/index.ts +2 -6
  50. package/src/primitives/PrimitiveButton/{PrimitiveButton.tsx → src/PrimitiveButton.tsx} +5 -6
  51. package/src/primitives/PrimitiveButton/{PrimitiveButton.types.ts → src/PrimitiveButton.types.ts} +1 -1
  52. package/src/primitives/PrimitiveButton/src/index.ts +6 -0
  53. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +1 -1
  54. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +15 -9
  55. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +0 -1
  56. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +0 -1
  57. package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +0 -1
  58. package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +0 -1
  59. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map +0 -1
  60. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts +0 -25
  61. package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map +0 -1
  62. package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map +0 -1
  63. package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map +0 -1
  64. package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts +0 -33
  65. /package/build/types/primitives/PrimitiveAnchor/{PrimitiveAnchor.d.ts → src/PrimitiveAnchor.d.ts} +0 -0
@@ -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 mofidiers
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
 
@@ -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-contrast: #FFFFFF;
36
+ --Button-primary-negative-color: var(--color-white);
37
37
  --Button-secondary-color: var(--color-interactive-control);
38
- --Button-secondary-negative-color: var(--color-contrast);
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
- .np-theme-personal--bright-green {
45
- .wds-Button {
46
- --color-contrast: #FFFFFF;
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-contrast);
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-contrast: #FFFFFF;
754
+ --Button-primary-negative-color: var(--color-white);
755
755
  --Button-secondary-color: var(--color-interactive-control);
756
- --Button-secondary-negative-color: var(--color-contrast);
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,
@@ -1,6 +1,2 @@
1
- export { default } from './PrimitiveAnchor';
2
- export type {
3
- PrimitiveAnchorProps,
4
- PrimitiveAnchorAttributes,
5
- PrimitiveAnchorElementRef,
6
- } from './PrimitiveAnchor.types';
1
+ export { default } from './src';
2
+ export * from './src';
@@ -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,
@@ -0,0 +1,6 @@
1
+ export { default } from './PrimitiveAnchor';
2
+ export type {
3
+ PrimitiveAnchorProps,
4
+ PrimitiveAnchorAttributes,
5
+ PrimitiveAnchorElementRef,
6
+ } from './PrimitiveAnchor.types';
@@ -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',
@@ -1,5 +1,5 @@
1
1
  import { render, screen } from '@testing-library/react';
2
- import PrimitiveAnchor from '..';
2
+ import PrimitiveAnchor from '../src';
3
3
 
4
4
  describe('PrimitiveAnchor', () => {
5
5
  const defaultProps = {
@@ -1,6 +1,2 @@
1
- export { default } from './PrimitiveButton';
2
- export type {
3
- PrimitiveButtonProps,
4
- PrimitiveButtonAttributes,
5
- PrimitiveButtonElementRef,
6
- } from './PrimitiveButton.types';
1
+ export { default } from './src';
2
+ export * from './src';
@@ -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 '../../i18n/commonMessages/Button.messages';
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': disabled || loading,
99
- 'aria-label': loading
100
- ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)
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,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { BasePrimitiveProps, StyleProp } from '..';
2
+ import { BasePrimitiveProps, StyleProp } from '../..';
3
3
 
4
4
  /**
5
5
  * Type aliases for a button component.
@@ -0,0 +1,6 @@
1
+ export { default } from './PrimitiveButton';
2
+ export type {
3
+ PrimitiveButtonProps,
4
+ PrimitiveButtonAttributes,
5
+ PrimitiveButtonElementRef,
6
+ } from './PrimitiveButton.types';
@@ -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 = messages,
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
- const spanishMessages = {
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
- }