@nypl/design-system-react-components 0.25.9 → 0.25.10

package/src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -0,0 +1,545 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={true}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+      data-disabled=""
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-invalid={true}
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="polite"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Tom doesn't count as a sibling :(.",
+        }
+      }
+      data-isinvalid={true}
+      id="select-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-describedby="select-helperText"
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="off"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Remember, Logan will judge you no matter who you pick.",
+        }
+      }
+      data-isinvalid={false}
+      id="select-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-required={true}
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={true}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onChange={[MockFunction]}
+      onFocus={[Function]}
+      required={false}
+      value=""
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Slider/__snapshots__/Slider.test.tsx.snap

@@ -61,6 +61,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-defaultRangeSlider"
         style={
           Object {
@@ -242,6 +243,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-errored"
         style={
           Object {
@@ -424,6 +426,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-required"
         style={
           Object {
@@ -607,6 +610,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       <div
         className="chakra-slider__track css-0"
         data-disabled=""
+        data-testid="chakra-range-slider-track"
         id="slider-track-disabled"
         style={
           Object {
@@ -775,6 +779,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noLabels"
         style={
           Object {
@@ -915,6 +920,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noVisibleValues"
         style={
           Object {
@@ -1035,6 +1041,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-onlySlider"
         style={
           Object {