@transferwise/components 0.0.0-experimental-be73f56 → 0.0.0-experimental-f304e2c

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 (106) hide show
  1. package/build/dateLookup/dateTrigger/DateTrigger.js +8 -4
  2. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  3. package/build/dateLookup/dateTrigger/DateTrigger.mjs +8 -4
  4. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  5. package/build/field/Field.js +13 -3
  6. package/build/field/Field.js.map +1 -1
  7. package/build/field/Field.mjs +13 -3
  8. package/build/field/Field.mjs.map +1 -1
  9. package/build/i18n/en.json +3 -2
  10. package/build/i18n/en.json.js +3 -2
  11. package/build/i18n/en.json.js.map +1 -1
  12. package/build/i18n/en.json.mjs +3 -2
  13. package/build/i18n/en.json.mjs.map +1 -1
  14. package/build/inlineAlert/InlineAlert.js +4 -6
  15. package/build/inlineAlert/InlineAlert.js.map +1 -1
  16. package/build/inlineAlert/InlineAlert.mjs +4 -6
  17. package/build/inlineAlert/InlineAlert.mjs.map +1 -1
  18. package/build/label/Label.js +29 -1
  19. package/build/label/Label.js.map +1 -1
  20. package/build/label/Label.messages.js +15 -0
  21. package/build/label/Label.messages.js.map +1 -0
  22. package/build/label/Label.messages.mjs +13 -0
  23. package/build/label/Label.messages.mjs.map +1 -0
  24. package/build/label/Label.mjs +30 -2
  25. package/build/label/Label.mjs.map +1 -1
  26. package/build/main.css +4 -14
  27. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +0 -8
  28. package/build/styles/field/Field.css +4 -0
  29. package/build/styles/main.css +4 -14
  30. package/build/styles/upload/Upload.css +0 -6
  31. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  32. package/build/types/field/Field.d.ts +4 -2
  33. package/build/types/field/Field.d.ts.map +1 -1
  34. package/build/types/index.d.ts +1 -1
  35. package/build/types/index.d.ts.map +1 -1
  36. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  37. package/build/types/label/Label.d.ts +10 -1
  38. package/build/types/label/Label.d.ts.map +1 -1
  39. package/build/types/label/Label.messages.d.ts +12 -0
  40. package/build/types/label/Label.messages.d.ts.map +1 -0
  41. package/build/types/label/index.d.ts +3 -0
  42. package/build/types/label/index.d.ts.map +1 -0
  43. package/build/types/upload/Upload.d.ts +0 -1
  44. package/build/types/upload/Upload.d.ts.map +1 -1
  45. package/build/types/upload/Upload.messages.d.ts +0 -4
  46. package/build/types/upload/Upload.messages.d.ts.map +1 -1
  47. package/build/types/upload/steps/completeStep/completeStep.d.ts +3 -1
  48. package/build/types/upload/steps/completeStep/completeStep.d.ts.map +1 -1
  49. package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts +0 -1
  50. package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
  51. package/build/upload/Upload.js +12 -26
  52. package/build/upload/Upload.js.map +1 -1
  53. package/build/upload/Upload.messages.js +0 -3
  54. package/build/upload/Upload.messages.js.map +1 -1
  55. package/build/upload/Upload.messages.mjs +0 -3
  56. package/build/upload/Upload.messages.mjs.map +1 -1
  57. package/build/upload/Upload.mjs +12 -26
  58. package/build/upload/Upload.mjs.map +1 -1
  59. package/build/upload/steps/completeStep/completeStep.js +30 -15
  60. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  61. package/build/upload/steps/completeStep/completeStep.mjs +31 -16
  62. package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
  63. package/build/upload/steps/uploadImageStep/uploadImageStep.js +32 -56
  64. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  65. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +32 -56
  66. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  67. package/package.json +3 -3
  68. package/src/dateInput/DateInput.tests.story.tsx +7 -31
  69. package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
  70. package/src/dateLookup/dateTrigger/DateTrigger.css +0 -8
  71. package/src/dateLookup/dateTrigger/DateTrigger.less +0 -8
  72. package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -1
  73. package/src/dateLookup/dateTrigger/DateTrigger.tsx +9 -4
  74. package/src/field/Field.css +4 -0
  75. package/src/field/Field.less +5 -0
  76. package/src/field/Field.spec.tsx +3 -3
  77. package/src/field/Field.story.tsx +106 -7
  78. package/src/field/Field.tsx +12 -6
  79. package/src/i18n/en.json +3 -2
  80. package/src/index.ts +1 -1
  81. package/src/inlineAlert/InlineAlert.story.tsx +8 -72
  82. package/src/inlineAlert/InlineAlert.tsx +5 -3
  83. package/src/inputs/InputGroup.spec.tsx +1 -1
  84. package/src/inputs/SearchInput.spec.tsx +1 -1
  85. package/src/inputs/SelectInput.spec.tsx +1 -1
  86. package/src/label/Label.messages.tsx +12 -0
  87. package/src/label/Label.story.tsx +19 -25
  88. package/src/label/Label.tsx +38 -2
  89. package/src/label/index.ts +2 -0
  90. package/src/main.css +4 -14
  91. package/src/main.less +1 -0
  92. package/src/moneyInput/MoneyInput.story.tsx +0 -2
  93. package/src/radioGroup/RadioGroup.rtl.spec.tsx +1 -1
  94. package/src/select/Select.rtl.spec.tsx +1 -1
  95. package/src/switch/Switch.spec.tsx +1 -1
  96. package/src/upload/Upload.css +0 -6
  97. package/src/upload/Upload.less +0 -5
  98. package/src/upload/Upload.messages.ts +0 -4
  99. package/src/upload/Upload.spec.js +7 -8
  100. package/src/upload/Upload.story.tsx +0 -18
  101. package/src/upload/Upload.tsx +20 -39
  102. package/src/upload/steps/completeStep/completeStep.spec.js +9 -0
  103. package/src/upload/steps/completeStep/completeStep.tsx +29 -14
  104. package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +0 -12
  105. package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +24 -43
  106. package/src/field/Field.tests.story.tsx +0 -33
package/src/upload/steps/completeStep/completeStep.tsx CHANGED
@@ -3,13 +3,17 @@ import { Document as DocumentIcon } from '@transferwise/icons';
3
3
  import { Typography } from '../../..';
4
4
  import Body from '../../../body';
5
5
  import Button from '../../../button';
6
+ import { Sentiment, Size } from '../../../common';
7
+ import StatusIcon from '../../../statusIcon';
6
8
  import Title from '../../../title';
7
9
 
8
10
  export interface CompleteStepProps {
9
11
  csButtonText: string;
10
12
  csSuccessText: string;
13
+ csFailureText: string;
11
14
  fileName: string;
12
15
  isComplete: boolean;
16
+ isError: boolean;
13
17
  isImage: boolean;
14
18
  uploadedImage?: string;
15
19
  onClear: React.MouseEventHandler<HTMLButtonElement>;
@@ -17,9 +21,11 @@ export interface CompleteStepProps {
17
21
 
18
22
  export default function CompleteStep({
19
23
  csButtonText,
24
+ csFailureText,
20
25
  csSuccessText,
21
26
  fileName,
22
27
  isComplete,
28
+ isError,
23
29
  isImage,
24
30
  onClear,
25
31
  uploadedImage,
@@ -31,25 +37,34 @@ export default function CompleteStep({
31
37
  className="droppable-card-content d-flex flex-column align-items-center"
32
38
  aria-live="polite"
33
39
  >
34
- {isImage && uploadedImage ? (
35
- <img src={uploadedImage} alt="OK" className="thumbnail " />
40
+ {isError ? (
41
+ <>
42
+ <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
43
+ {csFailureText && <p className="m-t-2 m-b-0">{csFailureText}</p>}
44
+ </>
36
45
  ) : (
37
- <DocumentIcon />
38
- )}
46
+ <>
47
+ {isImage && uploadedImage ? (
48
+ <img src={uploadedImage} alt="OK" className="thumbnail " />
49
+ ) : (
50
+ <DocumentIcon />
51
+ )}
39
52
 
40
- {fileName && (
41
- <Body as="p" className="m-b-0">
42
- {fileName}
43
- </Body>
44
- )}
45
- {csSuccessText && (
46
- <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
47
- {csSuccessText}
48
- </Title>
53
+ {fileName && (
54
+ <Body as="p" className="m-b-0">
55
+ {fileName}
56
+ </Body>
57
+ )}
58
+ {csSuccessText && (
59
+ <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
60
+ {csSuccessText}
61
+ </Title>
62
+ )}
63
+ </>
49
64
  )}
50
65
  </div>
51
66
  {csButtonText && (
52
- <Button className="m-t-1" onClick={onClear}>
67
+ <Button className={isError ? 'm-t-2' : 'm-t-1'} onClick={onClear}>
53
68
  {csButtonText}
54
69
  </Button>
55
70
  )}
package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Upload as UploadIcon } from '@transferwise/icons';
2
2
  import { shallow } from 'enzyme';
3
- import StatusIcon from '../../../statusIcon/StatusIcon';
4
3
 
5
4
  import UploadImageStep from '.';
6
5
 
@@ -14,7 +13,6 @@ describe('uploadImageStep', () => {
14
13
  usLabel: '',
15
14
  usHelpImage: '',
16
15
  usPlaceholder: '',
17
- errorMessage: '',
18
16
  };
19
17
  let component;
20
18
  beforeEach(() => {
@@ -65,14 +63,4 @@ describe('uploadImageStep', () => {
65
63
 
66
64
  expect(component.find('.test-image')).toHaveLength(1);
67
65
  });
68
-
69
- describe('when errorMessage is not empty', () => {
70
- it('renders errorMessage and icon when error is true', () => {
71
- component = shallow(
72
- <UploadImageStep {...UPLOADIMAGE_STEP_PROPS} errorMessage="error message" />,
73
- );
74
- expect(component.find('.upload-error-message').text()).toBe('<InlineAlert />');
75
- expect(component.find(StatusIcon)).toHaveLength(1);
76
- });
77
- });
78
66
  });
package/src/upload/steps/uploadImageStep/uploadImageStep.tsx CHANGED
@@ -1,8 +1,5 @@
1
1
  import { Upload as UploadIcon } from '@transferwise/icons';
2
2
  import { createRef, PureComponent } from 'react';
3
- import StatusIcon from '../../../statusIcon';
4
- import { Sentiment, Size } from '../../../common';
5
- import InlineAlert from '../../../inlineAlert';
6
3
 
7
4
  export interface UploadImageStepProps {
8
5
  fileDropped: (file: File) => void;
@@ -13,7 +10,6 @@ export interface UploadImageStepProps {
13
10
  usHelpImage: React.ReactNode;
14
11
  usLabel: string;
15
12
  usPlaceholder: string;
16
- errorMessage?: string | string[];
17
13
  }
18
14
 
19
15
  export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -29,15 +25,6 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
29
25
 
30
26
  getImage = () => {
31
27
  const { usHelpImage, usLabel } = this.props;
32
- const { errorMessage } = this.props;
33
-
34
- if (errorMessage) {
35
- return (
36
- <div className="d-flex flex-column align-items-center">
37
- <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
38
- </div>
39
- );
40
- }
41
28
 
42
29
  if (!usHelpImage) {
43
30
  return (
@@ -55,38 +42,32 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
55
42
  };
56
43
 
57
44
  render() {
58
- const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
59
- this.props;
45
+ const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder } = this.props;
60
46
 
61
47
  return (
62
- <div className="droppable-default-card" aria-hidden={isComplete}>
63
- <div className="droppable-card-content">
64
- <div className="m-b-3">{this.getImage()}</div>
65
- {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
66
- {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
67
- <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>
68
- {usButtonText ? (
69
- <span>{usButtonText}</span>
70
- ) : (
71
- <UploadIcon size={24} className="m-r-0" />
72
- )}
73
- <input
74
- ref={this.uploadInputRef}
75
- type="file"
76
- accept={usAccept === '*' ? undefined : usAccept}
77
- className="tw-droppable-input hidden"
78
- disabled={usDisabled}
79
- name="file-upload"
80
- onChange={() => this.onManualUpload()}
81
- />
82
- </label>
83
- {errorMessage && (
84
- <div className="upload-error-message">
85
- <div className="m-t-3 has-error">
86
- <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>
87
- </div>
88
- </div>
89
- )}
48
+ <div>
49
+ <div className="droppable-default-card" aria-hidden={isComplete}>
50
+ <div className="droppable-card-content">
51
+ <div className="m-b-3">{this.getImage()}</div>
52
+ {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
53
+ {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
54
+ <label className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}>
55
+ {usButtonText ? (
56
+ <span>{usButtonText}</span>
57
+ ) : (
58
+ <UploadIcon size={24} className="m-r-0" />
59
+ )}
60
+ <input
61
+ ref={this.uploadInputRef}
62
+ type="file"
63
+ accept={usAccept === '*' ? undefined : usAccept}
64
+ className="tw-droppable-input hidden"
65
+ disabled={usDisabled}
66
+ name="file-upload"
67
+ onChange={() => this.onManualUpload()}
68
+ />
69
+ </label>
70
+ </div>
90
71
  </div>
91
72
  </div>
92
73
  );
package/src/field/Field.tests.story.tsx DELETED
@@ -1,33 +0,0 @@
1
- import { useState } from 'react';
2
-
3
- import { Input } from '../inputs/Input';
4
- import { Field } from './Field';
5
- import { Sentiment } from '../common';
6
-
7
- export default {
8
- component: Field,
9
- title: 'Field/Tests',
10
- };
11
-
12
- export const WithHelpAndErrorOnBlur = () => {
13
- const [value, setValue] = useState('This is some text');
14
- const [error, setError] = useState<string | undefined>(undefined);
15
- return (
16
- <Field
17
- label="Phone number"
18
- sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
19
- message={error || 'Please include country code'}
20
- >
21
- <Input
22
- value={value}
23
- onChange={({ target }) => {
24
- setValue(target.value);
25
- setError(undefined);
26
- }}
27
- onBlur={() => {
28
- setError('Something went wrong');
29
- }}
30
- />
31
- </Field>
32
- );
33
- };