feat(components): Add description to base FormField component (#714)

* added description type

* added component to display form field description

* added description usage to the form field

* refactored formfield tests

* added test to find description

* updated htype declaration

* added aria-describedby, spacing between description and field, and switched to base size

* updated snaps

* updated how input validation and form are styled and grouped together

* updated snaps

* updated styling and composition if inline, description and aria-describedby no longer apply when inline

* 'descriptionUUID' -> 'descriptionIdentifier'

* 'spacing=small' only added to Tag if inline

* removed 'renders a field with error' snapshot test as it doesnt provide any value

* 'with a placeholder' > 'renders' updated to include 'renders as a label' and removed snapshot portion

* 'when readonly' > 'renders' updated to get attribute instead of snapshot

* 'when disabled' > 'renders' updated to check for attribute instead of snapshot

* 'when loading' > 'should render the spinner' updated to check if in document instead of being an instance of element

* 'when autocomplete' changed to check for attribute instead of getting attribute list

* removed unneeded expect with 'toHaveBeenCalled'

* updated how content spacing occurs, instead of using content, using margin top as to avoid issues with InputGroup

docs/proposals/InputEmail/InputEmail.md

@@ -85,7 +85,8 @@ import { InputEmail } "@jobber/components/InputEmail";
               message: "Please tell me your name",
             },
             pattern: {
-              value: /\A((?:(?:(?:[a-zA-Z0-9\-+_][.\-+_'&]?)*)[a-zA-Z0-9\-+_]))@((?:(?:(?:[a-zA-Z0-9][.\-_]?){0,62})[a-zA-Z0-9])+)\.([a-zA-Z0-9]{2,})\z/,
+              value:
+                /\A((?:(?:(?:[a-zA-Z0-9\-+_][.\-+_'&]?)*)[a-zA-Z0-9\-+_]))@((?:(?:(?:[a-zA-Z0-9][.\-_]?){0,62})[a-zA-Z0-9])+)\.([a-zA-Z0-9]{2,})\z/,
               message: "That does not look like an email address",
             },
           }}

packages/components/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -17,14 +17,14 @@ exports[`it should display headers when headers are passed in 1`] = `
     >
       <label
         className="label"
-        htmlFor="123e4567-e89b-12d3-a456-426655440018"
+        htmlFor="123e4567-e89b-12d3-a456-426655440035"
       >
         placeholder_name
       </label>
       <input
         autoComplete="autocomplete-off"
         className="input"
-        id="123e4567-e89b-12d3-a456-426655440018"
+        id="123e4567-e89b-12d3-a456-426655440035"
         onBlur={[Function]}
         onChange={[Function]}
         onFocus={[Function]}

packages/components/src/FormField/FormField.css

@@ -277,3 +277,7 @@
 .miniLabel:not(.small) .affixLabel {
   padding-top: calc(var(--field--padding-top) - 2px);
 }
+
+.description {
+  margin-top: var(--space-smaller);
+}

packages/components/src/FormField/FormField.css.d.ts

@@ -19,6 +19,7 @@ declare const styles: {
   readonly "suffix": string;
   readonly "hasAction": string;
   readonly "affixLabel": string;
+  readonly "description": string;
 };
 export = styles;