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

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

@@ -1,1049 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchBar renders the UI snapshot correctly 1`] = `
-<div
-  className="css-1xdhyk6"
-  id="basic-wrapper"
->
-  <form
-    aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
-    className="css-1xdhyk6"
-    id="searchbar-form-basic"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-basic-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-basic"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-basic"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-basic"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Search for items in Animal Crossing New Horizons",
-      }
-    }
-    data-isinvalid={false}
-    id="basic-helperText"
-  />
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 2`] = `
-<div
-  className="css-1xdhyk6"
-  id="withSelect-wrapper"
->
-  <form
-    aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
-    className="css-1xdhyk6"
-    id="searchbar-form-withSelect"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-select-withSelect-wrapper"
-    >
-      <div
-        className="css-0"
-      >
-        <div
-          className="chakra-select__wrapper css-42b2qy"
-        >
-          <select
-            aria-label="Select a category"
-            className="chakra-select css-1ik61og"
-            disabled={false}
-            id="searchbar-select-withSelect"
-            name="selectName"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={false}
-            value="Songs"
-          >
-            <option
-              value="Art"
-            >
-              Art
-            </option>
-            <option
-              value="Bushes"
-            >
-              Bushes
-            </option>
-            <option
-              value="Clothing"
-            >
-              Clothing
-            </option>
-            <option
-              value="Flowers"
-            >
-              Flowers
-            </option>
-            <option
-              value="Fossils"
-            >
-              Fossils
-            </option>
-            <option
-              value="Fruits"
-            >
-              Fruits
-            </option>
-            <option
-              value="Furniture"
-            >
-              Furniture
-            </option>
-            <option
-              value="Songs"
-            >
-              Songs
-            </option>
-            <option
-              value="Tools"
-            >
-              Tools
-            </option>
-            <option
-              value="Villagers"
-            >
-              Villagers
-            </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="searchbar-select-withSelect-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>
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-withSelect-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-withSelect"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-withSelect"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-withSelect"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Search for items in Animal Crossing New Horizons",
-      }
-    }
-    data-isinvalid={false}
-    id="withSelect-helperText"
-  />
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 3`] = `
-<div
-  className="css-1xdhyk6"
-  id="withoutHelperText-wrapper"
->
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-withoutHelperText"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-withoutHelperText-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-withoutHelperText"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-withoutHelperText"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-withoutHelperText"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 4`] = `
-<div
-  className="css-1xdhyk6"
-  id="invalidState-wrapper"
->
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-invalidState"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-invalidState-wrapper"
-    >
-      <input
-        aria-invalid={true}
-        aria-label="Item Search - There is an error related to this field."
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-invalidState"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-invalidState"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-invalidState"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 5`] = `
-<div
-  className="css-1xdhyk6"
-  id="disabledState-wrapper"
->
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-disabledState"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-disabledState-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={true}
-        id="searchbar-textinput-disabledState"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      disabled={true}
-      id="searchbar-button-disabledState"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-disabledState"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 6`] = `
-<div
-  className="css-1xdhyk6"
-  id="requiredState-wrapper"
->
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-requiredState"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-requiredState-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        aria-required={true}
-        className="chakra-input css-0"
-        disabled={true}
-        id="searchbar-textinput-requiredState"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search (Required)"
-        required={true}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      disabled={true}
-      id="searchbar-button-requiredState"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-requiredState"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 7`] = `
-<div
-  className="css-1xdhyk6"
-  id="noBrandButtonType-wrapper"
->
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-noBrandButtonType"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-noBrandButtonType-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        aria-required={true}
-        className="chakra-input css-0"
-        disabled={true}
-        id="searchbar-textinput-noBrandButtonType"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search (Required)"
-        required={true}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      disabled={true}
-      id="searchbar-button-noBrandButtonType"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-noBrandButtonType"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 8`] = `
-<div
-  className="css-1xdhyk6"
-  id="withHeading-wrapper"
->
-  <h2
-    className="chakra-heading css-1xdhyk6"
-    id="withHeading-heading"
-  >
-    A Heading
-  </h2>
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-withHeading"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-withHeading"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-withHeading"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 9`] = `
-<div
-  className="css-1xdhyk6"
-  id="withDescription-wrapper"
->
-  <p
-    className="chakra-text css-1xdhyk6"
-  >
-    A description
-  </p>
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-withDescription"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-withDescription"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-withDescription"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 10`] = `
-<div
-  className="css-1xdhyk6"
-  id="withHeadingAndDescription-wrapper"
->
-  <h2
-    className="chakra-heading css-1xdhyk6"
-    id="withHeadingAndDescription-heading"
-  >
-    A Heading
-  </h2>
-  <p
-    className="chakra-text css-1xdhyk6"
-  >
-    A description
-  </p>
-  <form
-    aria-label="SearchBar label"
-    className="css-1xdhyk6"
-    id="searchbar-form-withHeadingAndDescription"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-withHeadingAndDescription"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-withHeadingAndDescription"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 11`] = `
-<div
-  className="css-1xdhyk6"
-  id="chakra-wrapper"
->
-  <form
-    aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
-    className="css-kle7zy"
-    id="searchbar-form-chakra"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-chakra-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-chakra"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-chakra"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-chakra"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Search for items in Animal Crossing New Horizons",
-      }
-    }
-    data-isinvalid={false}
-    id="chakra-helperText"
-  />
-</div>
-`;
-
-exports[`SearchBar renders the UI snapshot correctly 12`] = `
-<div
-  className="css-1xdhyk6"
-  data-testid="props"
-  id="props-wrapper"
->
-  <form
-    aria-label="SearchBar label - Search for items in Animal Crossing New Horizons"
-    className="css-1xdhyk6"
-    id="searchbar-form-props"
-    onSubmit={[MockFunction]}
-    role="search"
-  >
-    <div
-      className="css-1u8qly9"
-      id="searchbar-textinput-props-wrapper"
-    >
-      <input
-        aria-label="Item Search"
-        className="chakra-input css-0"
-        disabled={false}
-        id="searchbar-textinput-props"
-        name="textInputName"
-        onBlur={[Function]}
-        onChange={[MockFunction]}
-        onFocus={[Function]}
-        placeholder="Item Search "
-        required={false}
-        step={null}
-        type="text"
-      />
-      
-    </div>
-    <button
-      className="chakra-button css-1me3d5y"
-      data-testid="button"
-      id="searchbar-button-props"
-      type="submit"
-    >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon css-1grhd2q"
-        focusable={false}
-        id="searchbar-icon-props"
-        role="img"
-        title="search 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>
-      Search
-    </button>
-  </form>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "Search for items in Animal Crossing New Horizons",
-      }
-    }
-    data-isinvalid={false}
-    id="props-helperText"
-  />
-</div>
-`;