@transferwise/components 0.0.0-experimental-8d46704 → 0.0.0-experimental-c8ab32e

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 (60) hide show
  1. package/build/field/Field.js +13 -4
  2. package/build/field/Field.js.map +1 -1
  3. package/build/field/Field.mjs +13 -4
  4. package/build/field/Field.mjs.map +1 -1
  5. package/build/i18n/en.json +3 -1
  6. package/build/i18n/en.json.js +3 -1
  7. package/build/i18n/en.json.js.map +1 -1
  8. package/build/i18n/en.json.mjs +3 -1
  9. package/build/i18n/en.json.mjs.map +1 -1
  10. package/build/inputs/SelectInput.js +33 -51
  11. package/build/inputs/SelectInput.js.map +1 -1
  12. package/build/inputs/SelectInput.mjs +34 -52
  13. package/build/inputs/SelectInput.mjs.map +1 -1
  14. package/build/label/Label.js +29 -1
  15. package/build/label/Label.js.map +1 -1
  16. package/build/label/Label.messages.js +15 -0
  17. package/build/label/Label.messages.js.map +1 -0
  18. package/build/label/Label.messages.mjs +13 -0
  19. package/build/label/Label.messages.mjs.map +1 -0
  20. package/build/label/Label.mjs +30 -2
  21. package/build/label/Label.mjs.map +1 -1
  22. package/build/main.css +0 -3
  23. package/build/styles/inputs/SelectInput.css +0 -3
  24. package/build/styles/main.css +0 -3
  25. package/build/types/field/Field.d.ts +4 -2
  26. package/build/types/field/Field.d.ts.map +1 -1
  27. package/build/types/index.d.ts +1 -1
  28. package/build/types/index.d.ts.map +1 -1
  29. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  30. package/build/types/label/Label.d.ts +10 -1
  31. package/build/types/label/Label.d.ts.map +1 -1
  32. package/build/types/label/Label.messages.d.ts +12 -0
  33. package/build/types/label/Label.messages.d.ts.map +1 -0
  34. package/build/types/label/index.d.ts +3 -0
  35. package/build/types/label/index.d.ts.map +1 -0
  36. package/package.json +4 -5
  37. package/src/dateInput/DateInput.story.tsx +6 -1
  38. package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
  39. package/src/field/Field.spec.tsx +4 -3
  40. package/src/field/Field.story.tsx +38 -4
  41. package/src/field/Field.tests.story.tsx +4 -2
  42. package/src/field/Field.tsx +17 -8
  43. package/src/i18n/en.json +3 -1
  44. package/src/index.ts +1 -1
  45. package/src/inlineAlert/InlineAlert.story.tsx +11 -14
  46. package/src/inputs/InputGroup.spec.tsx +1 -1
  47. package/src/inputs/SearchInput.spec.tsx +1 -1
  48. package/src/inputs/SelectInput.css +0 -3
  49. package/src/inputs/SelectInput.less +0 -4
  50. package/src/inputs/SelectInput.spec.tsx +1 -1
  51. package/src/inputs/SelectInput.story.tsx +0 -20
  52. package/src/inputs/SelectInput.tsx +40 -82
  53. package/src/label/Label.messages.tsx +12 -0
  54. package/src/label/Label.story.tsx +37 -21
  55. package/src/label/Label.tsx +42 -2
  56. package/src/label/index.ts +2 -0
  57. package/src/main.css +0 -3
  58. package/src/radioGroup/RadioGroup.rtl.spec.tsx +1 -1
  59. package/src/select/Select.rtl.spec.tsx +1 -1
  60. package/src/switch/Switch.spec.tsx +1 -1
package/src/label/Label.messages.tsx ADDED
@@ -0,0 +1,12 @@
1
+ import { defineMessages } from 'react-intl';
2
+
3
+ export default defineMessages({
4
+ optionalLabel: {
5
+ id: 'neptune.Label.optional',
6
+ defaultMessage: '(Optional)',
7
+ },
8
+ optionalAriaLabel: {
9
+ id: 'neptune.aria.Label.optional',
10
+ defaultMessage: 'This field is optional',
11
+ },
12
+ });
package/src/label/Label.story.tsx CHANGED
@@ -1,37 +1,53 @@
1
1
  import { useState } from 'react';
2
2
 
3
- import Info from '../info/Info';
4
3
  import { Input } from '../inputs/Input';
5
4
  import { Label } from './Label';
5
+ import InlineAlert from '../inlineAlert/InlineAlert';
6
+ import { lorem10 } from '../test-utils';
6
7
 
7
8
  export default {
8
9
  component: Label,
9
10
  title: 'Label',
11
+ tags: ['autodocs'],
10
12
  };
11
13
 
12
14
  export const Basic = () => {
13
15
  const [value, setValue] = useState<string | undefined>('This is some text');
14
16
  return (
15
- <Label>
16
- Phone number
17
- <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
18
- </Label>
19
- );
20
- };
17
+ <>
18
+ <Label className="m-b-2">
19
+ Phone number
20
+ <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
21
+ </Label>
21
22
 
22
- export const WithInfo = () => {
23
- const [value, setValue] = useState<string | undefined>('This is some text');
24
- return (
25
- <Label>
26
- <span className="d-flex">
27
- Phone number{' '}
28
- <Info
29
- content="This is some help in popover"
30
- aria-label="The aria label"
31
- className="m-l-1"
32
- />
33
- </span>
34
- <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
35
- </Label>
23
+ <Label className="m-b-2">
24
+ <Label.Optional>Phone number</Label.Optional>
25
+ <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
26
+ </Label>
27
+
28
+ <Label className="m-b-2">
29
+ <Label.Optional>Phone number</Label.Optional>
30
+ <Label.Description>This an field Description</Label.Description>
31
+ <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
32
+ </Label>
33
+
34
+ <Label htmlFor="phone-number-1">
35
+ <Label.Optional>Phone number</Label.Optional>
36
+ <Label.Description>This an field Description</Label.Description>
37
+ </Label>
38
+ <Input
39
+ id="phone-number-1"
40
+ className="m-b-2"
41
+ value={value}
42
+ onChange={({ target }) => setValue(target.value)}
43
+ />
44
+
45
+ {/* Instance of legacy and deprecated way of doing labels for visual testing */}
46
+ <label className="control-label" htmlFor="phone-number-1">
47
+ Phone number
48
+ </label>
49
+ <Input id="phone-number-1" value={value} onChange={({ target }) => setValue(target.value)} />
50
+ <InlineAlert>{lorem10}</InlineAlert>
51
+ </>
36
52
  );
37
53
  };
package/src/label/Label.tsx CHANGED
@@ -1,4 +1,9 @@
1
1
  import classNames from 'classnames';
2
+ import Body from '../body';
3
+ import { useIntl } from 'react-intl';
4
+ import messages from './Label.messages';
5
+ import { CommonProps } from '../common';
6
+ import { PropsWithChildren } from 'react';
2
7
 
3
8
  export type LabelProps = {
4
9
  id?: string;
@@ -7,14 +12,49 @@ export type LabelProps = {
7
12
  children?: React.ReactNode;
8
13
  };
9
14
 
10
- export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
15
+ const Label = ({ id, htmlFor, className, children }: LabelProps) => {
11
16
  return (
12
17
  <label
13
18
  id={id}
14
19
  htmlFor={htmlFor}
15
- className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
20
+ className={classNames(
21
+ 'control-label d-flex flex-column m-b-0',
22
+ 'np-text-body-default-bold',
23
+ 'text-primary',
24
+ className,
25
+ )}
16
26
  >
17
27
  {children}
18
28
  </label>
19
29
  );
20
30
  };
31
+
32
+ export type LabelOptionalProps = PropsWithChildren<CommonProps>;
33
+
34
+ const Optional = ({ children, className }: LabelOptionalProps) => {
35
+ const { formatMessage } = useIntl();
36
+ return (
37
+ <div>
38
+ {children}
39
+ <Body
40
+ as="span"
41
+ aria-label={formatMessage(messages.optionalAriaLabel)}
42
+ className={classNames('text-secondary', 'm-l-1', className)}
43
+ >
44
+ {formatMessage(messages.optionalLabel)}
45
+ </Body>
46
+ </div>
47
+ );
48
+ };
49
+
50
+ export type LabelDescriptionProps = PropsWithChildren<CommonProps>;
51
+
52
+ const Description = ({ children, className }: LabelDescriptionProps) =>
53
+ children ? (
54
+ <Body className={classNames('text-secondary', 'm-b-1', className)}>{children}</Body>
55
+ ) : null;
56
+
57
+ Label.Optional = Optional;
58
+ Label.Description = Description;
59
+
60
+ export { Label };
package/src/label/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Label } from './Label';
2
+ export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
package/src/main.css CHANGED
@@ -2655,9 +2655,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2655
2655
  height: auto;
2656
2656
  }
2657
2657
  }
2658
- .np-select-input-listbox-container--virtualized {
2659
- height: 100vh;
2660
- }
2661
2658
  .np-select-input-listbox-container--has-group {
2662
2659
  scroll-padding-top: 32px;
2663
2660
  scroll-padding-top: var(--size-32);
package/src/radioGroup/RadioGroup.rtl.spec.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { render, screen } from '@testing-library/react';
1
+ import { render, screen } from '../test-utils';
2
2
 
3
3
  import RadioGroup from '.';
4
4
  import { Field } from '../field/Field';
package/src/select/Select.rtl.spec.tsx CHANGED
@@ -12,6 +12,6 @@ describe('Select', () => {
12
12
  <Select options={options} selected={options[0]} onChange={() => {}} />
13
13
  </Field>,
14
14
  );
15
- expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
15
+ expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
16
16
  });
17
17
  });
package/src/switch/Switch.spec.tsx CHANGED
@@ -85,7 +85,7 @@ describe('Switch', () => {
85
85
 
86
86
  it('supports `Field` for labeling', () => {
87
87
  render(
88
- <Field label="Dark mode">
88
+ <Field label="Dark mode" required>
89
89
  <Switch checked onClick={props.onClick} />
90
90
  </Field>,
91
91
  );