@transferwise/components 45.25.0 → 45.25.1

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 (16) hide show
  1. package/build/index.esm.js +6 -0
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +6 -0
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/header/Header.css +1 -1
  7. package/build/styles/main.css +1 -1
  8. package/build/types/dateInput/DateInput.d.ts +2 -0
  9. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  10. package/package.json +2 -2
  11. package/src/body/Body.story.tsx +14 -2
  12. package/src/dateInput/DateInput.js +6 -0
  13. package/src/dateInput/DateInput.story.tsx +43 -1
  14. package/src/header/Header.css +1 -1
  15. package/src/header/Header.less +0 -5
  16. package/src/main.css +1 -1
package/build/types/dateInput/DateInput.d.ts CHANGED
@@ -15,6 +15,8 @@ export interface DateInputPlaceholders {
15
15
  }
16
16
 
17
17
  export interface DateInputProps {
18
+ "aria-label"?: string;
19
+ "aria-labelledby"?: string;
18
20
  disabled?: boolean;
19
21
  size?: DateInputSize;
20
22
  value?: DateInputValue;
package/build/types/dateInput/DateInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;gCAsQC"}
1
+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;gCA0QC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "45.25.0",
3
+ "version": "45.25.1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,7 +78,7 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.0.6",
81
- "@transferwise/neptune-css": "14.7.0",
81
+ "@transferwise/neptune-css": "14.7.1",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
package/src/body/Body.story.tsx CHANGED
@@ -30,6 +30,9 @@ export const Basic = () => {
30
30
  Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
31
31
  internationalen <b>Bericht der Welt auf</b>.
32
32
  </Body>
33
+ <Body as="p" type={Typography.BODY_LARGE_BOLD}>
34
+ ↑ ↓ {'<-'} {'->'}
35
+ </Body>
33
36
  </div>
34
37
  <div>
35
38
  <Title type={Typography.TITLE_SUBSECTION}>Body Default</Title>
@@ -49,6 +52,9 @@ export const Basic = () => {
49
52
  Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
50
53
  internationalen <b>Bericht der Welt auf</b>.
51
54
  </Body>
55
+ <Body as="p" type={Typography.BODY_DEFAULT}>
56
+ ↑ ↓ {'<-'} {'->'}
57
+ </Body>
52
58
  </div>
53
59
  <div>
54
60
  <Title type={Typography.TITLE_SUBSECTION}>Body Default Bold</Title>
@@ -68,6 +74,9 @@ export const Basic = () => {
68
74
  Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
69
75
  internationalen <b>Bericht der Welt auf</b>.
70
76
  </Body>
77
+ <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
78
+ ↑ ↓ {'<-'} {'->'}
79
+ </Body>
71
80
  </div>
72
81
  <div>
73
82
  <Title type={Typography.TITLE_SUBSECTION}>Body Large</Title>
@@ -87,6 +96,9 @@ export const Basic = () => {
87
96
  Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
88
97
  internationalen <b>Bericht der Welt auf</b>.
89
98
  </Body>
99
+ <Body as="p" type={Typography.BODY_LARGE}>
100
+ ↑ ↓ {'<-'} {'->'}
101
+ </Body>
90
102
  </div>
91
103
  <Title type={Typography.TITLE_SUBSECTION}>
92
104
  Copy Example without <code>{'<Body />'}</code> component
@@ -94,12 +106,12 @@ export const Basic = () => {
94
106
  <p>
95
107
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
96
108
  accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
97
- modi possimus soluta. Et iusto odio autem debitis!
109
+ modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
98
110
  </p>
99
111
  <Title type={Typography.TITLE_SUBSECTION}>Copy Example without any HTML tag</Title>
100
112
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
101
113
  accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
102
- modi possimus soluta. Et iusto odio autem debitis!
114
+ modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
103
115
  </>
104
116
  );
105
117
  };
package/src/dateInput/DateInput.js CHANGED
@@ -14,6 +14,8 @@ const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
14
14
  const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
15
15
 
16
16
  const DateInput = ({
17
+ 'aria-labelledby': ariaLabelledBy,
18
+ 'aria-label': ariaLabel,
17
19
  disabled,
18
20
  size,
19
21
  value,
@@ -224,6 +226,8 @@ const DateInput = ({
224
226
  <div
225
227
  className="tw-date"
226
228
  id={id}
229
+ aria-labelledby={ariaLabelledBy}
230
+ aria-label={ariaLabel}
227
231
  onFocus={(event) =>
228
232
  shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
229
233
  }
@@ -300,6 +304,8 @@ function shouldPropagateOnBlur({ target, relatedTarget }) {
300
304
  }
301
305
 
302
306
  DateInput.propTypes = {
307
+ 'aria-label': PropTypes.string,
308
+ 'aria-labelledby': PropTypes.string,
303
309
  disabled: PropTypes.bool,
304
310
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
305
311
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
package/src/dateInput/DateInput.story.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Meta, StoryObj } from '@storybook/react';
2
2
 
3
- import { DateInput, InlineAlert } from '..';
3
+ import { DateInput, Info, InlineAlert, Title, Typography } from '..';
4
4
  import { lorem10, storyConfig } from '../test-utils';
5
5
 
6
6
  export default {
@@ -25,6 +25,48 @@ type Story = StoryObj<typeof DateInput>;
25
25
 
26
26
  export const Basic: Story = {};
27
27
 
28
+ export const WithLabel: Story = {
29
+ render: (args) => {
30
+ const id1 = 'date-input-group-label-1';
31
+ const label = 'Date of Birth';
32
+ return (
33
+ <>
34
+ <Title type={Typography.TITLE_SUBSECTION}>
35
+ label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
36
+ <code>aria-labelledby</code> prop
37
+ </Title>
38
+ <div className="control-label" id={id1}>
39
+ Date of Delivery
40
+ </div>
41
+ <DateInput {...args} aria-labelledby={id1} />
42
+
43
+ <br />
44
+
45
+ <Title type={Typography.TITLE_SUBSECTION}>
46
+ label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
47
+ via <code>aria-label</code> attribute
48
+ </Title>
49
+ <div className="control-label">
50
+ {label}{' '}
51
+ <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
52
+ </div>
53
+ <DateInput {...args} aria-label={label} />
54
+
55
+ <br />
56
+
57
+ <Title type={Typography.TITLE_SUBSECTION}>
58
+ <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
59
+ label (rare use case)
60
+ </Title>
61
+ <fieldset>
62
+ <legend className="control-label">Expiry Date</legend>
63
+ <DateInput {...args} />
64
+ </fieldset>
65
+ </>
66
+ );
67
+ },
68
+ };
69
+
28
70
  export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
29
71
 
30
72
  export const InputError: Story = {
package/src/header/Header.css CHANGED
@@ -1 +1 @@
1
- .np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}.np-header legend{border-bottom:none;padding:0}
1
+ .np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
package/src/header/Header.less CHANGED
@@ -19,9 +19,4 @@
19
19
  margin-bottom: calc(var(--size-4) * -1);
20
20
  }
21
21
  }
22
-
23
- legend {
24
- padding: 0;
25
- border-bottom: none;
26
- }
27
22
  }