element-web/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`AvatarWithDetails renders a banner with an action 1`] = `
<div>
  <div
    class="banner"
  >
    <div
      class="icon"
    >
      <svg
        fill="currentColor"
        font-size="24"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
        />
        <path
          clip-rule="evenodd"
          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
          fill-rule="evenodd"
        />
      </svg>
    </div>
    <div
      class="content"
    >
      <p>
        Alice's (
        <b>
          @alice:example.com
        </b>
        ) identity was reset. 
        <a
          href="https://example.org"
        >
          Learn more
        </a>
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="primary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Withdraw verification
      </button>
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;

exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
<div>
  <div
    class="banner"
  >
    <div
      class="icon"
    >
      <img
        alt="Example"
        src="https://picsum.photos/32/32"
      />
    </div>
    <div
      class="content"
    >
      <p>
        Hello! This is a status banner.
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;

exports[`AvatarWithDetails renders a critical banner 1`] = `
<div>
  <div
    class="banner"
    data-type="critical"
  >
    <div
      class="icon"
    >
      <svg
        fill="currentColor"
        font-size="24"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
        />
      </svg>
    </div>
    <div
      class="content"
    >
      <p>
        Hello! This is a status banner.
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;

exports[`AvatarWithDetails renders a default banner 1`] = `
<div>
  <div
    class="banner"
  >
    <div
      class="icon"
    >
      <svg
        fill="currentColor"
        font-size="24"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
        />
        <path
          clip-rule="evenodd"
          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
          fill-rule="evenodd"
        />
      </svg>
    </div>
    <div
      class="content"
    >
      <p>
        Hello! This is a status banner.
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;

exports[`AvatarWithDetails renders a info banner 1`] = `
<div>
  <div
    class="banner"
    data-type="info"
  >
    <div
      class="icon"
    >
      <svg
        fill="currentColor"
        font-size="24"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
        />
        <path
          clip-rule="evenodd"
          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
          fill-rule="evenodd"
        />
      </svg>
    </div>
    <div
      class="content"
    >
      <p>
        Hello! This is a status banner.
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;

exports[`AvatarWithDetails renders a success banner 1`] = `
<div>
  <div
    class="banner"
    data-type="success"
  >
    <div
      class="icon"
    >
      <svg
        fill="currentColor"
        font-size="24"
        height="1em"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
        />
      </svg>
    </div>
    <div
      class="content"
    >
      <p>
        Hello! This is a status banner.
      </p>
    </div>
    <div
      class="actions"
    >
      <button
        class="_button_187yx_8"
        data-kind="secondary"
        data-size="sm"
        role="button"
        tabindex="0"
      >
        Dismiss
      </button>
    </div>
  </div>
</div>
`;