@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,895 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        aria-describedby="select-helperText"
+        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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+  <div
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1sax8hu"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Tom doesn't count as a sibling :(.",
+      }
+    }
+    data-isinvalid={true}
+    id="select-helperText"
+  />
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1sax8hu"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Remember, Logan will judge you no matter who you pick.",
+      }
+    }
+    data-isinvalid={false}
+    id="select-helperText"
+  />
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+        <span>
+           (Required)
+        </span>
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+        <span>
+           (Required)
+        </span>
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1u8qly9"
+  id="select-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <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-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-1y4kn3e"
+  id="chakra-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="chakra"
+        id="chakra-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="chakra"
+        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-1grhd2q"
+          focusable={false}
+          id="chakra-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-1u8qly9"
+  data-testid="props"
+  id="props-wrapper"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="props"
+        id="props-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="props"
+        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-1grhd2q"
+          focusable={false}
+          id="props-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          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>
+</div>
+`;