element-web-Github/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<PinnedMessagesCard /> should show the empty state when there are no pins 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <h4
          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
        >
          Pinned message
        </h4>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_Flex mx_EmptyState"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
      >
        <svg
          fill="currentColor"
          height="32px"
          viewBox="0 0 24 24"
          width="32px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857H6.119ZM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744V4Z"
            fill-rule="evenodd"
          />
        </svg>
        <p
          class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
        >
          Pin important messages so that they can be easily discovered
        </p>
        <p
          class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
        >
          Select a message and choose “Pin” to it include here.
        </p>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <h4
          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
        >
          2 Pinned messages
        </h4>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_PinnedMessagesCard_wrapper mx_PinnedMessagesCard_wrapper_unpin_all"
        role="list"
      >
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
                id="radix-2"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <div />
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                First pinned message
              </div>
            </div>
          </div>
        </div>
        <div
          class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
                id="radix-3"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <div />
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                The second one
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="mx_PinnedMessagesCard_unpin"
      >
        <button
          class="_button_zt6rp_17"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          Unpin all messages
        </button>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <h4
          class="mx_Heading_h4 mx_BaseCard_header_title_heading"
        >
          2 Pinned messages
        </h4>
      </div>
      <button
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_133tf_26"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_PinnedMessagesCard_wrapper"
        role="list"
      >
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
                id="radix-18"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <div />
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                First pinned message
              </div>
            </div>
          </div>
        </div>
        <div
          class="_separator_144s5_17 mx_PinnedMessagesCard_Separator"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_mcap2_17 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_mcap2_61"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_bh2qc_17"
                data-state="closed"
                id="radix-19"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_133tf_26"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <div />
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                The second one
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;