@pareto-engineering/design-system 2.0.0-alpha.64 → 2.0.0-alpha.66

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3729,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  24 days ago
+  about 2 months ago
 </p>
 `;
 
@@ -12297,6 +12297,15 @@ exports[`Storyshots f/common/Label Base 1`] = `
 </label>
 `;
 
+exports[`Storyshots f/common/Label Optional 1`] = `
+<label
+  className="base form-label x-main2"
+>
+  Sample Label
+  (Optional)
+</label>
+`;
+
 exports[`Storyshots f/fields/Checkbox Base 1`] = `
 <form
   action="#"
@@ -12374,6 +12383,13 @@ exports[`Storyshots f/fields/Checkbox Optional 1`] = `
   <div
     className="base checkbox"
   >
+    <label
+      className="base form-label x-main2"
+      htmlFor="urgent"
+    >
+      Urgent
+      (Optional)
+    </label>
     <input
       checked={false}
       className="input"
@@ -13644,6 +13660,199 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background2 y-main2"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base form-label x-main2"
+    >
+      Select color
+      (Optional)
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="color-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="color-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="color-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="yellow"
+        />
+        <label
+          htmlFor="color-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="oarnge"
+        />
+        <label
+          htmlFor="color-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="violet"
+        />
+        <label
+          htmlFor="color-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="brown"
+        />
+        <label
+          htmlFor="color-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="black"
+        />
+        <label
+          htmlFor="color-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
 <form
   action="#"
@@ -13843,25 +14052,25 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
     <label
       className="base form-label x-main2"
       htmlFor="teams"
-      id="downshift-4-label"
+      id="downshift-5-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-4-menu"
+      aria-owns="downshift-5-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-4-menu"
-        aria-labelledby="downshift-4-label"
+        aria-controls="downshift-5-menu"
+        aria-labelledby="downshift-5-label"
         autoComplete="off"
         className="input"
         disabled={false}
-        id="downshift-4-input"
+        id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
@@ -13873,9 +14082,9 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-4-label"
+        aria-labelledby="downshift-5-label"
         className="base menu"
-        id="downshift-4-menu"
+        id="downshift-5-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -13924,7 +14133,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     <label
       className="base form-label x-main2"
       htmlFor="teams"
-      id="downshift-5-label"
+      id="downshift-6-label"
     >
       Search for a team
     </label>
@@ -13981,18 +14190,18 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-5-menu"
+      aria-owns="downshift-6-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-5-menu"
-        aria-labelledby="downshift-5-label"
+        aria-controls="downshift-6-menu"
+        aria-labelledby="downshift-6-label"
         autoComplete="off"
         className="input"
         disabled={false}
-        id="downshift-5-input"
+        id="downshift-6-input"
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
@@ -14004,9 +14213,9 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-5-label"
+        aria-labelledby="downshift-6-label"
         className="base menu"
-        id="downshift-5-menu"
+        id="downshift-6-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -14043,7 +14252,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -14058,6 +14267,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       id="downshift-2-label"
     >
       Search for a team
+      (Optional)
     </label>
     <div
       aria-expanded={false}
@@ -14123,7 +14333,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -14157,7 +14367,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
-        value="Apple"
+        value=""
       />
     </div>
     <div
@@ -14203,33 +14413,124 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
 </form>
 `;
 
-exports[`Storyshots f/fields/QuerySelect Base 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base combobox y-background2"
   >
     <label
       className="base form-label x-main2"
-      htmlFor="status"
+      htmlFor="team"
+      id="downshift-4-label"
     >
-      Select Task Status
+      Search for a team
     </label>
     <div
-      className="select-wrapper"
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-4-menu"
+      className="input-wrapper"
+      role="combobox"
     >
-      <select
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-4-menu"
+        aria-labelledby="downshift-4-label"
+        autoComplete="off"
         className="input"
         disabled={false}
-        id="status"
-        name="status"
+        id="downshift-4-input"
         onBlur={[Function]}
         onChange={[Function]}
-        value=""
-      />
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+      <button
+        className="base button x-main2 modifierCompact modifierSimple"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="f-icons"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-4-label"
+        className="base menu"
+        id="downshift-4-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace formik value
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QuerySelect Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
     </div>
   </div>
   <div
@@ -14289,6 +14590,50 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/QuerySelect Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+      (Optional)
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
 <form
   action="#"
@@ -14839,6 +15184,156 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base ratings-input"
+  >
+    <label
+      className="base form-label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+      (Optional)
+    </label>
+    <div
+      className="stars"
+    >
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-1"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={1}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-2"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={2}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-3"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={3}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-4"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={4}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-5"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={5}
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/SelectInput Base 1`] = `
 <form
   action="#"
@@ -14975,6 +15470,75 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/SelectInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="workType"
+    >
+      Work Type
+      (Optional)
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
+        >
+          Managing
+        </option>
+        <option
+          disabled={false}
+          value="Training"
+        >
+          Training
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/SelectInput Required 1`] = `
 <form
   action="#"
@@ -15217,6 +15781,51 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className=" u2 pb-u"
+  >
+    <div
+      className="base text-input y-background2"
+    >
+      <label
+        className="base form-label v50 mb-v x-main2"
+        htmlFor="firstName"
+      >
+        What's your first name ?
+        (Optional)
+      </label>
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextInput Time 1`] = `
 <form
   action="#"
@@ -15615,6 +16224,51 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextareaInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base form-label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+      (Optional)
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
 <form
   action="#"