Merge pull request #846 from skateman/carbon-isrequired

feat(carbon): implemented optional isRequired for all fields

Author: rvsia

packages/carbon-component-mapper/src/common/is-required.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates';
+
+import './is-required.scss';
+
+const IsRequired = ({ children }) => (
+  <React.Fragment>
+    <span className="ddorg__carbon-component-mapper_is-required" aria-hidden="true">
+      *
+    </span>
+    {children}
+  </React.Fragment>
+);
+
+IsRequired.propTypes = {
+  children: childrenPropTypes
+};
+
+export default IsRequired;

packages/carbon-component-mapper/src/common/is-required.scss

@@ -0,0 +1,4 @@
+.ddorg__carbon-component-mapper_is-required {
+  color: #E0182D;
+  margin-right: 4px;
+}

packages/carbon-component-mapper/src/common/prepare-props.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import WithDescription from './with-description';
+import IsRequired from './is-required';
 
-const prepareProps = ({ isDisabled, isReadOnly, label, description, ...props }) => ({
+export const buildLabel = (label, isRequired) => (label && (isRequired ? <IsRequired>{label}</IsRequired> : label)) || undefined;
+
+const prepareProps = ({ isDisabled, isReadOnly, isRequired = false, label, description, ...props }) => ({
   disabled: isDisabled,
-  labelText: label,
+  labelText: buildLabel(label, isRequired),
   readOnly: isReadOnly,
   ...props,
-  ...(description ? { labelText: <WithDescription description={description} labelText={label || props.labelText} /> } : {})
+  ...(description ? { labelText: <WithDescription description={description} labelText={buildLabel(label || props.labelText, isRequired)} /> } : {})
 });
 
 export default prepareProps;

packages/carbon-component-mapper/src/files/checkbox.js

@@ -6,11 +6,13 @@ import MultipleChoiceListCommon from '@data-driven-forms/common/src/multiple-cho
 import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react';
 
 import WithDescription from '../common/with-description';
-import prepareProps from '../common/prepare-props';
+import prepareProps, { buildLabel } from '../common/prepare-props';
 import HelperTextBlock from '../common/helper-text-block';
 
-const Wrapper = ({ label, description, children, helperText, error, showError }) => (
-  <FormGroup legendText={description ? <WithDescription labelText={label} description={description} /> : label}>
+const Wrapper = ({ label, description, children, helperText, error, showError, isRequired }) => (
+  <FormGroup
+    legendText={description ? <WithDescription labelText={buildLabel(label, isRequired)} description={description} /> : buildLabel(label, isRequired)}
+  >
     {children}
     <HelperTextBlock helperText={helperText} errorText={showError && error} />
   </FormGroup>
@@ -22,7 +24,8 @@ Wrapper.propTypes = {
   description: PropTypes.node,
   helperText: PropTypes.node,
   error: PropTypes.node,
-  showError: PropTypes.bool
+  showError: PropTypes.bool,
+  isRequired: PropTypes.bool
 };
 
 const SingleCheckbox = (props) => {
@@ -44,6 +47,7 @@ SingleCheckboxInCommon.propTypes = {
   label: PropTypes.node,
   input: PropTypes.object,
   isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
   name: PropTypes.string,
   id: PropTypes.string,
   WrapperProps: PropTypes.object

packages/carbon-component-mapper/src/files/date-picker.js

@@ -24,6 +24,7 @@ const DatePicker = (props) => {
 
 DatePicker.propTypes = {
   isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
   datePickerType: PropTypes.string,
   DatePickerProps: PropTypes.object,
   WrapperProps: PropTypes.object

packages/carbon-component-mapper/src/files/dual-list-select.js

@@ -13,6 +13,7 @@ import {
   StructuredListCell
 } from 'carbon-components-react/lib/components/StructuredList/StructuredList';
 
+import { buildLabel } from '../common/prepare-props';
 import './dual-list-select.scss';
 
 const EmptyList = ({ message }) => (
@@ -118,6 +119,7 @@ const DualListSelectInner = ({
   moveAllLeftTitle,
   moveAllRightTitle,
   label,
+  isRequired,
   filterOptionsTitle,
   filterValuesTitle,
   sortOptionsTitle,
@@ -145,7 +147,7 @@ const DualListSelectInner = ({
   RightListProps,
   RightBodyProps
 }) => (
-  <FormGroup legendText={label || ''} {...FormGroupProps}>
+  <FormGroup legendText={buildLabel(label || '', isRequired)} {...FormGroupProps}>
     <Grid {...GridProps}>
       <Row condensed {...RowProps}>
         <Column sm={4} md={8} lg={5} {...OptionsColumnProps}>
@@ -248,6 +250,7 @@ DualListSelectInner.propTypes = {
   moveAllLeftTitle: PropTypes.node,
   moveAllRightTitle: PropTypes.node,
   label: PropTypes.node,
+  isRequired: PropTypes.bool,
   filterOptionsTitle: PropTypes.string,
   filterValuesTitle: PropTypes.string,
   sortOptionsTitle: PropTypes.string,

packages/carbon-component-mapper/src/files/field-array.js

@@ -140,6 +140,7 @@ FieldArray.propTypes = {
   ArrayItemProps: PropTypes.object,
   RemoveButtonProps: PropTypes.object,
   defaultItem: PropTypes.any,
+  isRequired: PropTypes.bool,
   fields: PropTypes.array
 };
 

packages/carbon-component-mapper/src/files/radio.js

@@ -30,6 +30,7 @@ Radio.propTypes = {
   FormGroupProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   label: PropTypes.node,
+  isRequired: PropTypes.bool,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.node,

packages/carbon-component-mapper/src/files/select.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes, { bool } from 'prop-types';
+import PropTypes from 'prop-types';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import DataDrivenSelect from '@data-driven-forms/common/src/select';
@@ -63,6 +63,7 @@ ClearedMultiSelectFilterable.propTypes = {
   originalOnChange: PropTypes.func,
   carbonLabel: PropTypes.node,
   placeholder: PropTypes.node,
+  isRequired: PropTypes.bool,
   isDisabled: PropTypes.bool
 };
 
@@ -113,6 +114,7 @@ ClearedMultiSelect.propTypes = {
   originalOnChange: PropTypes.func,
   carbonLabel: PropTypes.node,
   placeholder: PropTypes.node,
+  isRequired: PropTypes.bool,
   isDisabled: PropTypes.bool
 };
 
@@ -158,8 +160,9 @@ ClearedSelect.propTypes = {
   carbonLabel: PropTypes.node,
   placeholder: PropTypes.node,
   isDisabled: PropTypes.bool,
-  isSearchable: bool,
-  isClearable: bool
+  isRequired: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isClearable: PropTypes.bool
 };
 
 const Select = (props) => {
@@ -194,6 +197,7 @@ const Select = (props) => {
 
 Select.propTypes = {
   isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

packages/carbon-component-mapper/src/files/switch.js

@@ -23,6 +23,7 @@ const Switch = (props) => {
 Switch.propTypes = {
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
   description: PropTypes.node,