Merge pull request #855 from rvsia/carbonWarning

Hyperkid123 · web-flow · commit 5ac56205e91b · 2020-10-22T14:40:56.000+02:00
feat(carbon): add warning support
diff --git a/packages/carbon-component-mapper/package.json b/packages/carbon-component-mapper/package.json
@@ -30,7 +30,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "@carbon/icons-react": "^10.18.0",
+    "@carbon/icons-react": "^10.19.0",
     "@semantic-release/git": "^7.0.5",
     "@semantic-release/npm": "^5.1.1",
     "@types/carbon-components-react": "^7.10.9",
@@ -39,8 +39,8 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-lodash": "^3.3.4",
-    "carbon-components": "^10.20.0",
-    "carbon-components-react": "^7.20.0",
+    "carbon-components": "^10.22.0",
+    "carbon-components-react": "^7.22.0",
     "carbon-icons": "^7.0.7",
     "clsx": "^1.1.1",
     "css-loader": "^1.0.1",
diff --git a/packages/carbon-component-mapper/src/common/helper-text-block.js b/packages/carbon-component-mapper/src/common/helper-text-block.js
@@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
 
 import './helper-text-block.scss';
 
-const HelperTextBlock = ({ helperText, errorText }) => {
+const HelperTextBlock = ({ helperText, errorText, warnText }) => {
   if (errorText) {
     return <div className="bx--form-requirement ddorg__carbon-error-helper-text">{errorText}</div>;
   }
 
+  if (warnText) {
+    return <div className="bx--form-requirement ddorg__carbon-warning-helper-text">{warnText}</div>;
+  }
+
   if (helperText) {
     return <div className="bx--form__helper-text">{helperText}</div>;
   }
@@ -17,7 +21,8 @@ const HelperTextBlock = ({ helperText, errorText }) => {
 
 HelperTextBlock.propTypes = {
   helperText: PropTypes.node,
-  errorText: PropTypes.node
+  errorText: PropTypes.node,
+  warnText: PropTypes.node
 };
 
 export default HelperTextBlock;
diff --git a/packages/carbon-component-mapper/src/files/checkbox.js b/packages/carbon-component-mapper/src/files/checkbox.js
@@ -33,10 +33,12 @@ const SingleCheckbox = (props) => {
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
+
   return (
     <div {...WrapperProps}>
       <CarbonCheckbox {...input} id={input.name} {...rest} />
-      <HelperTextBlock helperText={helperText} errorText={invalid} />
+      <HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
     </div>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/date-picker.js b/packages/carbon-component-mapper/src/files/date-picker.js
@@ -11,13 +11,14 @@ const DatePicker = (props) => {
   const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
     <div {...WrapperProps}>
       <CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
         <DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
       </CarbonDatePicker>
-      <HelperTextBlock helperText={!invalid && helperText} />
+      <HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
     </div>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/radio.js b/packages/carbon-component-mapper/src/files/radio.js
@@ -13,6 +13,7 @@ const Radio = (props) => {
   );
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
     <FormGroup legendText={labelText} {...FormGroupProps}>
@@ -21,7 +22,7 @@ const Radio = (props) => {
           <RadioButton key={option.value} disabled={disabled} labelText={option.label} value={option.value} {...option} />
         ))}
       </RadioButtonGroup>
-      <HelperTextBlock helperText={helperText} errorText={invalid} />
+      <HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
     </FormGroup>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/select.js b/packages/carbon-component-mapper/src/files/select.js
@@ -166,7 +166,7 @@ ClearedSelect.propTypes = {
 };
 
 const Select = (props) => {
-  const { isMulti, isSearchable, loadOptions, input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
+  const { isMulti, isSearchable, loadOptions, input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
 
   const [loadOptionsChangeCounter, setCounter] = useState(0);
 
@@ -180,6 +180,7 @@ const Select = (props) => {
   const Component = isMulti && isSearchable ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : ClearedSelect;
 
   const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
+  const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;
 
   return (
     <DataDrivenSelect
@@ -191,6 +192,7 @@ const Select = (props) => {
       invalidText={invalidText}
       loadOptionsChangeCounter={loadOptionsChangeCounter}
       originalOnChange={multiOnChange(input, rest.simpleValue)}
+      helperText={text}
     />
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/slider.js b/packages/carbon-component-mapper/src/files/slider.js
@@ -11,6 +11,7 @@ const Slider = (props) => {
   const { input, meta, isRequired, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
     <div {...WrapperProps}>
@@ -25,7 +26,7 @@ const Slider = (props) => {
         required={isRequired}
         {...rest}
       />
-      <HelperTextBlock helperText={helperText} errorText={invalid} />
+      <HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
     </div>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/switch.js b/packages/carbon-component-mapper/src/files/switch.js
@@ -11,11 +11,12 @@ const Switch = (props) => {
   const { input, meta, onText, offText, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   return (
     <div {...WrapperProps}>
       <Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />
-      <HelperTextBlock helperText={helperText} errorText={invalid} />
+      <HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
     </div>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/text-field.js b/packages/carbon-component-mapper/src/files/text-field.js
@@ -10,8 +10,20 @@ const TextField = (props) => {
   const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warn = (meta.touched || validateOnMount) && meta.warning;
 
-  return <TextInput {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
+  return (
+    <TextInput
+      {...input}
+      key={input.name}
+      id={input.name}
+      invalid={Boolean(invalid)}
+      invalidText={invalid || ''}
+      warn={Boolean(warn)}
+      warnText={warn || ''}
+      {...rest}
+    />
+  );
 };
 
 TextField.propTypes = {
diff --git a/packages/carbon-component-mapper/src/files/textarea.js b/packages/carbon-component-mapper/src/files/textarea.js
@@ -7,11 +7,12 @@ import { TextArea } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 const Textarea = (props) => {
-  const { input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;
 
-  return <TextArea {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
+  return <TextArea {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} helperText={text} {...rest} />;
 };
 
 Textarea.propTypes = {
@@ -20,7 +21,8 @@ Textarea.propTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
-  description: PropTypes.node
+  description: PropTypes.node,
+  helperText: PropTypes.node
 };
 
 export default Textarea;
diff --git a/packages/carbon-component-mapper/src/files/time-picker.js b/packages/carbon-component-mapper/src/files/time-picker.js
@@ -15,6 +15,7 @@ const TimePicker = (props) => {
   const isMounted = useRef(false);
 
   const invalid = (meta.touched || validateOnMount) && meta.error;
+  const warnText = (meta.touched || validateOnMount) && meta.warning;
 
   let finalValue = input.value;
   if (input.value instanceof Date) {
@@ -93,7 +94,7 @@ const TimePicker = (props) => {
           </TimePickerSelect>
         )}
       </CarbonTimePicker>
-      <HelperTextBlock helperText={!invalid && helperText} />
+      <HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
     </div>
   );
 };
diff --git a/packages/carbon-component-mapper/src/tests/components.test.js b/packages/carbon-component-mapper/src/tests/components.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
 
@@ -98,6 +99,34 @@ describe('component tests', () => {
           }
         });
 
+        it('renders with warning', async () => {
+          const errorField = {
+            ...field,
+            validate: [{ type: validatorTypes.REQUIRED, warning: true }],
+            useWarnings: true,
+            validateOnMount: true
+          };
+          let wrapper;
+
+          await act(async () => {
+            wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
+          });
+          wrapper.update();
+
+          const helperText = wrapper.find('.bx--form__helper-text');
+
+          if (helperText.length) {
+            expect(helperText.text()).toEqual(errorText);
+          } else {
+            expect(
+              wrapper
+                .find('.bx--form-requirement')
+                .last()
+                .text()
+            ).toEqual(errorText);
+          }
+        });
+
         it('renders with helperText', () => {
           const helpertextField = {
             ...field,
diff --git a/yarn.lock b/yarn.lock
@@ -1898,10 +1898,10 @@
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.9.0.tgz#5aee08e9d253d3bf6f996bc61f739660c62cbb21"
   integrity sha512-JtmCXV7iIc+N5RqQQy+MGT8T+5KcF7+BUKADvHnJKZ8o+ncF5gI4hmrP450dQD76mikI4fqQ0dQflaosesdSPw==
 
-"@carbon/icons-react@^10.18.0":
-  version "10.18.0"
-  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-10.18.0.tgz#881312b923a435f3093dacd61d77b4b5bd73b970"
-  integrity sha512-UZFYVBd3rU8tCspMdbj8ZMSjzCcAA7eR9WHLjET5eSP0qg2XrGOBlbJKY2ZrIJPxwrZ4TcAnexjWTQf2JdF1rA==
+"@carbon/icons-react@^10.19.0":
+  version "10.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-10.19.0.tgz#f5941db0673a669cdf4cf6602d30f006aa6192eb"
+  integrity sha512-pbAegbVe5geqmz36W//y99W4DV+WRyBvL/3733AgZ4vPuXKLrK9exOUp7C1O/NPWrxIhOppMc3QZRWuicMU31g==
   dependencies:
     "@carbon/icon-helpers" "^10.9.0"
 
@@ -6345,12 +6345,12 @@ capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
 
-carbon-components-react@^7.20.0:
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/carbon-components-react/-/carbon-components-react-7.20.0.tgz#62a9abd47b9a97f58ec206917b8a4f706dbb6877"
-  integrity sha512-vybdHrtF5r17DZCMXGJlkRY3E/yUcsFNDD9WrNu474jXyAxr+2bvf7ywv7iqaPJTzdS4/61YYEekHRXDj21CTQ==
+carbon-components-react@^7.22.0:
+  version "7.22.0"
+  resolved "https://registry.yarnpkg.com/carbon-components-react/-/carbon-components-react-7.22.0.tgz#1daa7da777984a724c642dd899ba3ea1368f538c"
+  integrity sha512-36f90jO2tHIyOzOY+ytWLwmFEahXZa1bdzybQvx3QPi2HOi6UVjTADBPipvARhOFgAlpCqLL1CIqLCEKipR3uw==
   dependencies:
-    "@carbon/icons-react" "^10.18.0"
+    "@carbon/icons-react" "^10.19.0"
     classnames "2.2.6"
     downshift "5.2.1"
     flatpickr "4.6.1"
@@ -6365,10 +6365,10 @@ carbon-components-react@^7.20.0:
     warning "^3.0.0"
     window-or-global "^1.0.1"
 
-carbon-components@^10.20.0:
-  version "10.20.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.20.0.tgz#3a927ad4f566c5dc263d32c257269c74a3ab23cc"
-  integrity sha512-MysxXg4/DpDt9GJPV3zmxi9X6HyGxr7DyROvVjf4SCyYrBqTeLOoajd3sbPhKxPjDdRIyqEb2roLq5DbbtazLg==
+carbon-components@^10.22.0:
+  version "10.22.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
+  integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
   dependencies:
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"
