feat(components): Add description to base FormField component

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;