@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/ui/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Button block unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--block"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button circle unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--circle memori-button--padded memori-button--icon-only"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders Button danger unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--danger"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button disabled unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+    disabled=""
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button loading unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon memori-button--loading"
+    disabled=""
+  >
+    <span
+      class="memori-button--icon loading-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </span>
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button outlined unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button padded unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button primary unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button square unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--square memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button with icon only unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--icon-only"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders Button with icon unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded memori-button--with-icon"
+  >
+    <span
+      class="memori-button--icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori-loading-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        />
+      </svg>
+    </span>
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders Button with title unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+    title="Button title"
+  >
+    Click me
+  </button>
+</div>
+`;
+
+exports[`renders empty Button unchanged 1`] = `
+<div>
+  <button
+    class="memori-button memori-button--rounded memori-button--padded"
+  />
+</div>
+`;

package/src/components/ui/__snapshots__/Card.test.tsx.snap

@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Card hoverable unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--hoverable"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          lorem-ipsum
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card loading unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--loading"
+  >
+    <div
+      class="memori-spin memori-spin--spinning"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          Card title
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card with children unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        >
+          <p>
+            Ciao
+          </p>
+        </div>
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card with cover unchanged 1`] = `
+<div>
+  <div
+    class="memori-card memori-card--with-cover"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--cover"
+      >
+        <img
+          alt=""
+          src="#"
+        />
+      </div>
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card with custom CSS class unchanged 1`] = `
+<div>
+  <div
+    class="memori-card lorem-ipsum"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card with description unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <p
+          class="memori-card--description"
+        >
+          Card description
+        </p>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders Card with title unchanged 1`] = `
+<div>
+  <div
+    class="memori-card"
+  >
+    <div
+      class="memori-spin"
+    >
+      <div
+        class="memori-card--content"
+      >
+        <h3
+          class="memori-card--title"
+        >
+          Card title
+        </h3>
+        <div
+          class="memori-card--children"
+        />
+      </div>
+      <div
+        class="memori-spin--spinner"
+      >
+        <svg
+          aria-hidden="true"
+          class="memori-loading-icon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/ui/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Checkbox checked and disabled unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--disabled"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox checked unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        checked=""
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox disabled unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox memori-checkbox--disabled"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        class="memori-checkbox--input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;
+
+exports[`renders Checkbox unchanged 1`] = `
+<div>
+  <label
+    class="memori-checkbox"
+  >
+    <span
+      class="memori-checkbox--input-wrapper"
+    >
+      <input
+        class="memori-checkbox--input"
+        type="checkbox"
+      />
+      <span
+        class="memori-checkbox--inner"
+      />
+    </span>
+    <span
+      class="memori-checkbox--text"
+    >
+      Check me
+    </span>
+  </label>
+</div>
+`;

package/src/components/ui/__snapshots__/Drawer.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Drawer loading unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer non closable unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer open unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer side left unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer unchanged 1`] = `<div />`;
+
+exports[`renders Drawer with custom widths unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer with description unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer with footer unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders Drawer with title unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;