Merge pull request #99 from WebDevStudios/feature/forms-doc-block-cleanup

Feature/forms doc block cleanup

Author: Greg Rickaby

components/atoms/Inputs/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import {Field} from 'formik'
 /**
  * Render Checkbox component.
  *
- * @param {object}        props           Input props.
+ * @param {object}        props           The component attributes as props.
  * @param {string}        props.className Input className.
  * @param {string|number} props.id        Input id.
  * @param {string}        props.label     Input label.

components/atoms/Inputs/CheckboxGroup/CheckboxGroup.js

@@ -5,7 +5,7 @@ import Checkbox from '@/components/atoms/Inputs/Checkbox'
 /**
  * Render CheckboxGroup component.
  *
- * @param {object}        props             CheckboxGroup props.
+ * @param {object}        props             The component attributes as props.
  * @param {Array}         props.checkboxes  Array of checkbox data objects.
  * @param {string}        props.className   CheckboxGroup wrapper className.
  * @param {string|number} props.id          CheckboxGroup id.

components/atoms/Inputs/Text/Text.js

@@ -1,25 +1,36 @@
 import PropTypes from 'prop-types'
 import {Field, ErrorMessage} from 'formik'
 
+/**
+ * Render the Text component.
+ *
+ * @author WebDevStudios
+ * @param {object}  props             The component attributes as props.
+ * @param {string}  props.className   Text wrapper className.
+ * @param {string}  props.description Text description.
+ * @param {string}  props.id          Text input id.
+ * @param {string}  props.label       Text input label.
+ * @param {boolean} props.isRequired  If input is required.
+ * @param {string}  props.type        Text input type.
+ * @return {Element}                  The Text component.
+ */
 export default function Text({
   className,
   description,
   id,
   isRequired,
   label,
-  type,
-  validation
+  type
 }) {
   return (
-    <div className={className} key={id}>
+    <div className={className}>
       {label && <label htmlFor={id}>{label}</label>}
       <Field
         aria-required={isRequired}
         id={id}
         name={id}
         required={isRequired}
         type={type}
-        validate={validation}
       />
       {description && <p>{description}</p>}
       <ErrorMessage name={id} />
@@ -33,8 +44,7 @@ Text.propTypes = {
   id: PropTypes.string.isRequired,
   isRequired: PropTypes.bool,
   label: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  validation: PropTypes.func
+  type: PropTypes.string.isRequired
 }
 
 Text.defaultProps = {

components/molecules/Form/Form.js

@@ -4,14 +4,22 @@ import styles from './Form.module.css'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 
-// TODO Update form title with dynamic heading tag.
-
+/**
+ * Render Form component.
+ *
+ * @param {object}        props                  The component attributes as props.
+ * @param {Element}       props.children         Form children elements.
+ * @param {string}        props.className        Form wrapper class.
+ * @param {object}        props.formDefaults     Formik default data.
+ * @param {string|number} props.id               Form id.
+ * @param {object}        props.validationSchema Yup validation schema object.
+ * @return {Element}                             The Form component.
+ */
 export default function Form({
-  className,
   children,
-  id,
+  className,
   formDefaults,
-  title,
+  id,
   validationSchema
 }) {
   return (
@@ -26,7 +34,6 @@ export default function Form({
       }}
     >
       <FormikForm id={id} className={cn(styles.form, className)}>
-        {title && <h1 className={styles.title}>{title}</h1>}
         {children}
         <button type="submit">Submit</button>
       </FormikForm>
@@ -35,11 +42,10 @@ export default function Form({
 }
 
 Form.propTypes = {
-  className: PropTypes.string,
   children: PropTypes.object,
-  id: PropTypes.string,
+  className: PropTypes.string,
   formDefaults: PropTypes.object,
-  title: PropTypes.string,
+  id: PropTypes.string,
   validationSchema: PropTypes.object
 }
 

components/molecules/GravityForm/Fields/Checkbox.js

@@ -6,7 +6,7 @@ import * as Input from '@/components/atoms/Inputs'
 /**
  * Render GravityForms Checkbox field component.
  *
- * @param {object}        props             GravityForm Checkbox field props.
+ * @param {object}        props             GravityForm Checkbox field as props.
  * @param {string}        props.className   GravityForm field wrapper class.
  * @param {string}        props.description GravityForm field description.
  * @param {Array}         props.inputs      Array of checkbox field input data.

components/molecules/GravityForm/Fields/Select.js

@@ -4,9 +4,9 @@ import * as Input from '@/components/atoms/Inputs'
 import cn from 'classnames'
 
 /**
- * Render GravityForms Checkbox field component.
+ * Render GravityForms Select field component.
  *
- * @param {object}        props               GravityForm Checkbox field props.
+ * @param {object}        props               GravityForm Select field as props.
  * @param {string}        props.className     GravityForm field wrapper class.
  * @param {string}        props.description   GravityForm field description.
  * @param {string|number} props.id            GravityForm field id.
@@ -15,7 +15,7 @@ import cn from 'classnames'
  * @param {string}        props.size          GravityForm field size.
  * @param {Array}         props.selectChoices GravityForm field selection options.
  * @param {boolean}       props.visibility    GravityForm field visibility.
- * @return {Element}                          The Checkbox component.
+ * @return {Element}                          The Select component.
  */
 export default function Select({
   className,

components/molecules/GravityForm/GravityForm.js

@@ -59,9 +59,9 @@ export default function GravityForm({
       className={cn(styles.gravityForm, cssClass)}
       formDefaults={fieldDefaults}
       id={formId && `gform-${formId}`}
-      title={title}
       validationSchema={validationSchema}
     >
+      {title && <h2>{title}</h2>}
       {fieldData && (
         <Fields fields={fieldData} setFormValidation={setFormValidation} />
       )}

functions/gravityForms/getGfFieldId.js

@@ -1,7 +1,8 @@
 /**
  * Create a field ID based on GravityForms provided ID.
  *
- * @param {number}  fieldId GravityForm field ID.
+ * @author WebDevStudios
+ * @param {number} fieldId GravityForm field ID.
  * @return {string} A unique string identifer for the field.
  */
 export default function getGfFieldId(fieldId) {

functions/gravityForms/getHiddenClassName.js

@@ -1,7 +1,8 @@
 /**
  * Determine hidden className.
  *
- * @param {string}  visibility setting of GravityForm field.
+ * @author WebDevStudios
+ * @param {string} visibility setting of GravityForm field.
  * @return {string} Classname selector based on visibility.
  */
 export default function getGfHiddenClassName(visibility) {

functions/gravityForms/yupSchema/ArraySchemaFactory.js

@@ -5,7 +5,7 @@ import * as Yup from 'yup'
  *
  * @author WebDevStudios
  * @see https://github.com/jquense/yup#array
- * @return {Object} Yup validationSchema Object.
+ * @return {object} Yup validationSchema Object.
  */
 export default class ArraySchemaFactory {
   /**
@@ -14,7 +14,7 @@ export default class ArraySchemaFactory {
    * Note: wp-graphql-gravity-forms plugin may need to be replaced.
    *
    * @see https://github.com/harness-software/wp-graphql-gravity-forms
-   * @param {Object} fieldData from GravityForm GraphQL data Object.
+   * @param {object} fieldData from GravityForm GraphQL data Object.
    */
   constructor(fieldData) {
     this.fieldData = fieldData
@@ -26,7 +26,7 @@ export default class ArraySchemaFactory {
    * Combine multiple schemas into one.
    *
    * @see https://github.com/jquense/yup#mixedconcatschema-schema-schema
-   * @return {Object} Combined Yup validationSchema Object.
+   * @return {object} Combined Yup validationSchema Object.
    */
   get schema() {
     return Yup.array().concat(this.getMinLengthSchema())
@@ -36,7 +36,7 @@ export default class ArraySchemaFactory {
    * Set a minimum length limit for the array.
    *
    * @see https://github.com/jquense/yup#arrayminlimit-number--ref-message-string--function-schema
-   * @return {Object} Yup validationSchema Object.
+   * @return {object} Yup validationSchema Object.
    */
   getMinLengthSchema() {
     if (!this.fieldData?.isRequired) {