@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

@@ -1,895 +0,0 @@
-// 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>
-`;