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

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

@@ -1,908 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
-<div
-  className="css-7ajbp2"
-  id="basic-form-field"
->
-  <fieldset
-    className="css-13wylk3"
-    id="basic"
-  >
-    <legend>
-      Select the full date you want to visit NYPL
-    </legend>
-    <div
-      className="css-1vpopwd"
-      id="basic-form-row"
-    >
-      <div
-        className="css-7ajbp2"
-        id="basic-form-row-grandchild0"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="basic-start-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="basic-start"
-                id="basic-start-label"
-              >
-                From
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="basic-start"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-01-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="css-7ajbp2"
-        id="basic-form-row-grandchild1"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="basic-end-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="basic-end"
-                id="basic-end-label"
-              >
-                To
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="basic-end"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-02-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </fieldset>
-</div>
-`;
-
-exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
-<div
-  className="css-7ajbp2"
-  id="no-label-form-field"
->
-  <fieldset
-    className="css-13wylk3"
-    id="no-label"
-  >
-    <legend>
-      Select the date you want to visit NYPL
-    </legend>
-    <div
-      className="css-1vpopwd"
-      id="no-label-form-row"
-    >
-      <div
-        className="css-7ajbp2"
-        id="no-label-form-row-grandchild0"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="no-label-start-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="no-label-start"
-                id="no-label-start-label"
-              >
-                From
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="no-label-start"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-01-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="css-7ajbp2"
-        id="no-label-form-row-grandchild1"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="no-label-end-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="no-label-end"
-                id="no-label-end-label"
-              >
-                To
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="no-label-end"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-02-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </fieldset>
-</div>
-`;
-
-exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
-<div
-  className="css-7ajbp2"
-  id="custom-format-form-field"
->
-  <fieldset
-    className="css-13wylk3"
-    id="custom-format"
-  >
-    <legend>
-      Select the date you want to visit NYPL
-    </legend>
-    <div
-      className="css-1vpopwd"
-      id="custom-format-form-row"
-    >
-      <div
-        className="css-7ajbp2"
-        id="custom-format-form-row-grandchild0"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="custom-format-start-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="custom-format-start"
-                id="custom-format-start-label"
-              >
-                From
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="custom-format-start"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988/02/01"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="css-7ajbp2"
-        id="custom-format-form-row-grandchild1"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="custom-format-end-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="custom-format-end"
-                id="custom-format-end-label"
-              >
-                To
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={false}
-                id="custom-format-end"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988/02/02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </fieldset>
-</div>
-`;
-
-exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
-<div
-  className="css-7ajbp2"
-  id="invalid-form-field"
->
-  <fieldset
-    className="css-13wylk3"
-    id="invalid"
-  >
-    <legend>
-      Select the date you want to visit NYPL
-    </legend>
-    <div
-      className="css-1vpopwd"
-      id="invalid-form-row"
-    >
-      <div
-        className="css-7ajbp2"
-        id="invalid-form-row-grandchild0"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="invalid-start-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="invalid-start"
-                id="invalid-start-label"
-              >
-                From
-              </label>
-              <input
-                aria-describedby="invalid-start-helperText"
-                aria-invalid={true}
-                className="chakra-input css-0"
-                disabled={false}
-                id="invalid-start"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-01-02"
-              />
-              <div
-                aria-atomic={true}
-                aria-live="polite"
-                className="css-1xdhyk6"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Please select a valid date.",
-                  }
-                }
-                data-isinvalid={true}
-                id="invalid-start-helperText"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="css-7ajbp2"
-        id="invalid-form-row-grandchild1"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="invalid-end-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="invalid-end"
-                id="invalid-end-label"
-              >
-                To
-              </label>
-              <input
-                aria-describedby="invalid-end-helperText"
-                aria-invalid={true}
-                className="chakra-input css-0"
-                disabled={false}
-                id="invalid-end"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-02-02"
-              />
-              <div
-                aria-atomic={true}
-                aria-live="polite"
-                className="css-1xdhyk6"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Please select a valid date.",
-                  }
-                }
-                data-isinvalid={true}
-                id="invalid-end-helperText"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
-        }
-      }
-      data-isinvalid={false}
-      id="invalid-helper-text"
-    />
-  </fieldset>
-</div>
-`;
-
-exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
-<div
-  className="css-7ajbp2"
-  id="disabled-form-field"
->
-  <fieldset
-    className="css-13wylk3"
-    id="disabled"
-  >
-    <legend>
-      Select the date you want to visit NYPL
-    </legend>
-    <div
-      className="css-1vpopwd"
-      id="disabled-form-row"
-    >
-      <div
-        className="css-7ajbp2"
-        id="disabled-form-row-grandchild0"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="disabled-start-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="disabled-start"
-                id="disabled-start-label"
-              >
-                From
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={true}
-                id="disabled-start"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-01-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="css-7ajbp2"
-        id="disabled-form-row-grandchild1"
-      >
-        <div
-          className="react-datepicker-wrapper"
-        >
-          <div
-            className="react-datepicker__input-container"
-          >
-            <div
-              className="css-1u8qly9"
-              id="disabled-end-wrapper"
-            >
-              <label
-                className="css-1xdhyk6"
-                htmlFor="disabled-end"
-                id="disabled-end-label"
-              >
-                To
-              </label>
-              <input
-                className="chakra-input css-0"
-                disabled={true}
-                id="disabled-end"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                required={false}
-                step={null}
-                type="text"
-                value="1988-02-02"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
-        }
-      }
-      data-isinvalid={false}
-      id="disabled-helper-text"
-    />
-  </fieldset>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
-<div
-  className="css-7ajbp2"
-  id="basic-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="basic-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="basic-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="basic-start"
-            id="basic-start-label"
-          >
-            Select the full date you want to visit NYPL
-          </label>
-          <input
-            className="chakra-input css-0"
-            disabled={false}
-            id="basic-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
-<div
-  className="css-7ajbp2"
-  id="no-label-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="no-label-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="no-label-start-wrapper"
-        >
-          <input
-            aria-label="Select the date you want to visit NYPL"
-            className="chakra-input css-0"
-            disabled={false}
-            id="no-label-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
-<div
-  className="css-7ajbp2"
-  id="custom-format-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="custom-format-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="custom-format-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="custom-format-start"
-            id="custom-format-start-label"
-          >
-            Select the date you want to visit NYPL
-          </label>
-          <input
-            className="chakra-input css-0"
-            disabled={false}
-            id="custom-format-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988/02/01"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
-<div
-  className="css-7ajbp2"
-  id="invalid-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="invalid-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="invalid-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="invalid-start"
-            id="invalid-start-label"
-          >
-            Select the date you want to visit NYPL
-          </label>
-          <input
-            aria-describedby="invalid-start-helperText"
-            aria-invalid={true}
-            className="chakra-input css-0"
-            disabled={false}
-            id="invalid-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-          <div
-            aria-atomic={true}
-            aria-live="polite"
-            className="css-1xdhyk6"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Please select a valid date.",
-              }
-            }
-            data-isinvalid={true}
-            id="invalid-start-helperText"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
-<div
-  className="css-7ajbp2"
-  id="disabled-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="disabled-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="disabled-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="disabled-start"
-            id="disabled-start-label"
-          >
-            Select the date you want to visit NYPL
-          </label>
-          <input
-            aria-describedby="disabled-start-helperText"
-            className="chakra-input css-0"
-            disabled={true}
-            id="disabled-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-          <div
-            aria-atomic={true}
-            aria-live="off"
-            className="css-1xdhyk6"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Note that the Library may be closed on Sundays.",
-              }
-            }
-            data-isinvalid={false}
-            id="disabled-start-helperText"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
-<div
-  className="css-1h2oq49"
-  id="chakra-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="chakra-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="chakra-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="chakra-start"
-            id="chakra-start-label"
-          >
-            Select the date you want to visit NYPL
-          </label>
-          <input
-            aria-describedby="chakra-start-helperText"
-            className="chakra-input css-0"
-            disabled={false}
-            id="chakra-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-          <div
-            aria-atomic={true}
-            aria-live="off"
-            className="css-1xdhyk6"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Note that the Library may be closed on Sundays.",
-              }
-            }
-            data-isinvalid={false}
-            id="chakra-start-helperText"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
-<div
-  className="css-7ajbp2"
-  data-testid="datepicker"
-  id="props-form-field"
->
-  <div
-    className="css-7ajbp2"
-    id="props-start-form"
-  >
-    <div
-      className="react-datepicker-wrapper"
-    >
-      <div
-        className="react-datepicker__input-container"
-      >
-        <div
-          className="css-1u8qly9"
-          id="props-start-wrapper"
-        >
-          <label
-            className="css-1xdhyk6"
-            htmlFor="props-start"
-            id="props-start-label"
-          >
-            Select the date you want to visit NYPL
-          </label>
-          <input
-            aria-describedby="props-start-helperText"
-            className="chakra-input css-0"
-            disabled={false}
-            id="props-start"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            required={false}
-            step={null}
-            type="text"
-            value="1988-01-02"
-          />
-          <div
-            aria-atomic={true}
-            aria-live="off"
-            className="css-1xdhyk6"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Note that the Library may be closed on Sundays.",
-              }
-            }
-            data-isinvalid={false}
-            id="props-start-helperText"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;