Merge pull request #109 from WebDevStudios/feature/45-input-error-component

Feature/45 input error component

Author: Greg Rickaby

components/atoms/Icon/Icon.js

@@ -19,13 +19,25 @@ function sizeToPx(size) {
   return sizeToRem[size] * parseFloat(tailwindConfig.theme.fontSize['root-em'])
 }
 
+/**
+ * Render the Icon component.
+ *
+ * @param {object}  props            The component attributes as props.
+ * @param {boolean} props.ariaHidden If aria-hidden is true.
+ * @param {string}  props.className  Icon className.
+ * @param {string}  props.icon       Icon svg.
+ * @param {string}  props.size       Icon size.
+ * @param {string}  props.style      Icon style variation.
+ * @param {string}  props.title      Icon title.
+ * @return {Element}                 The Icon component.
+ */
 export default function Icon({
+  ariaHidden,
+  className,
   icon,
   size,
   style,
-  title,
-  className,
-  ariaHidden
+  title
 }) {
   return (
     <svg
@@ -46,8 +58,8 @@ Icon.propTypes = {
   ariaHidden: PropTypes.bool,
   className: PropTypes.string,
   icon: PropTypes.string.isRequired,
-  style: PropTypes.oneOf(['fill', 'line']),
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  style: PropTypes.oneOf(['fill', 'line']),
   title: PropTypes.string.isRequired
 }
 

components/atoms/Inputs/Checkbox/Checkbox.js

@@ -9,14 +9,15 @@ import {Field} from 'formik'
  * @param {string|number} props.id        Input id.
  * @param {string}        props.label     Input label.
  * @param {string}        props.name      Input name.
+ * @param {string}        props.value     Input value.
  * @return {Element}                      The Checkbox component.
  */
-export default function Checkbox({className, id, label, name}) {
+export default function Checkbox({className, id, label, name, value}) {
   return (
     <div className={className}>
       {label && (
         <label htmlFor={id}>
-          <Field name={name} type="checkbox" value={`value${id}`} />
+          <Field name={name} type="checkbox" value={value || name} />
           {label}
         </label>
       )}
@@ -28,5 +29,6 @@ Checkbox.propTypes = {
   className: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string
 }

components/atoms/Inputs/CheckboxGroup/CheckboxGroup.js

@@ -11,14 +11,16 @@ import Checkbox from '@/components/atoms/Inputs/Checkbox'
  * @param {string|number} props.id          CheckboxGroup id.
  * @param {string}        props.label       CheckboxGroup input label.
  * @param {string}        props.description CheckboxGroup input name.
+ * @param {boolean}       props.isRequired  If input is required.
  * @return {Element}                        The CheckboxGroup component.
  */
 export default function CheckboxGroup({
   checkboxes,
   className,
   description,
   id: groupId,
-  label
+  label,
+  isRequired
 }) {
   return (
     <div
@@ -27,18 +29,23 @@ export default function CheckboxGroup({
       id={groupId}
       role="group"
     >
-      {label && <label htmlFor={groupId}>{label}</label>}
+      {label && (
+        <label htmlFor={groupId} required={isRequired}>
+          {label}
+        </label>
+      )}
       {description && <p>{description}</p>}
       {!!checkboxes.length > 0 &&
         checkboxes.map((checkbox) => {
-          const {id, label} = checkbox
+          const {id, label, value} = checkbox
 
           return (
             <Checkbox
               id={id}
               key={`${groupId}-${id}`}
               label={label}
               name={groupId}
+              value={value}
             />
           )
         })}

components/atoms/Inputs/InputError/InputError.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import {ErrorMessage} from 'formik'
+import styles from './InputError.module.css'
+
+/**
+ * Render the InputError component.
+ *
+ * @param {object}        props      The component attributes as props.
+ * @param {string|number} props.name Input id.
+ * @return {Element}                 The InputError component.
+ */
+export default function InputError({name}) {
+  return (
+    <span className={styles.inputError}>
+      <ErrorMessage name={name} />
+    </span>
+  )
+}
+
+InputError.propTypes = {
+  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}

components/atoms/Inputs/InputError/InputError.module.css

@@ -0,0 +1,3 @@
+.inputError {
+  color: #df1642;
+}

components/atoms/Inputs/InputError/index.js

@@ -0,0 +1 @@
+export {default} from './InputError'

components/atoms/Inputs/Select/Select.js

@@ -7,7 +7,7 @@ import styles from './Select.module.css'
  * Render the Select component.
  *
  * @author WebDevStudios
- * @param {object}  props             props.
+ * @param {object}  props             The component attributes as props.
  * @param {string}  props.className   Select wrapper className.
  * @param {string}  props.description Select description.
  * @param {string}  props.label       Select input label.
@@ -26,7 +26,7 @@ export default function Select({
 }) {
   return (
     <div className={cn(styles.select, className)}>
-      {label && <label>{label}</label>}
+      {label && <label required={isRequired}>{label}</label>}
       <Field as="select" id={id} name={id} required={isRequired}>
         {!!options?.length > 0 &&
           options.map((option, key) => {

components/atoms/Inputs/Text/Text.js

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types'
-import {Field, ErrorMessage} from 'formik'
+import {Field} from 'formik'
+import InputError from '@/components/atoms/Inputs/InputError'
+import styles from './Text.module.css'
+import cn from 'classnames'
 
 /**
  * Render the Text component.
@@ -23,8 +26,12 @@ export default function Text({
   type
 }) {
   return (
-    <div className={className}>
-      {label && <label htmlFor={id}>{label}</label>}
+    <div className={cn(styles.text, className)}>
+      {label && (
+        <label htmlFor={id} required={isRequired}>
+          {label}
+        </label>
+      )}
       <Field
         aria-required={isRequired}
         id={id}
@@ -33,7 +40,7 @@ export default function Text({
         type={type}
       />
       {description && <p>{description}</p>}
-      <ErrorMessage name={id} />
+      <InputError name={id} />
     </div>
   )
 }

components/atoms/Inputs/Text/Text.module.css

@@ -0,0 +1,5 @@
+.text {
+  & input {
+    @apply rounded;
+  }
+}

components/molecules/Form/Form.js

@@ -42,7 +42,7 @@ export default function Form({
 }
 
 Form.propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.node,
   className: PropTypes.string,
   formDefaults: PropTypes.object,
   id: PropTypes.string,