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

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

@@ -0,0 +1,734 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion Renders the UI snapshot correctly 1`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ilurlz"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ilurlz"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 3`] = `
+<div
+  className="chakra-accordion css-1t0bvx9"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ilurlz"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 4`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  data-testid="testid"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ilurlz"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 5`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-gne4sq"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 6`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-11hvvs4"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-ox82o1"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;