element-web/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

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

exports[`<LayoutSwitcher /> should render 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
    data-testid="layoutPanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
      >
        Message layout
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
    >
      <form
        class="_root_dgy0u_24 mx_LayoutSwitcher_LayoutSelector"
      >
        <div
          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="Modern"
            class="_label_dgy0u_67"
            for="radix-0"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1vw5h_18"
              >
                <input
                  checked=""
                  class="_input_1vw5h_26"
                  id="radix-0"
                  name="layout"
                  title=""
                  type="radio"
                  value="group"
                />
                <div
                  class="_ui_1vw5h_27"
                />
              </div>
              <span>
                Modern
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="group"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <div />
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      role="button"
                      tabindex="-1"
                    >
                      <div />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
        <div
          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="Message bubbles"
            class="_label_dgy0u_67"
            for="radix-1"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1vw5h_18"
              >
                <input
                  class="_input_1vw5h_26"
                  id="radix-1"
                  name="layout"
                  title=""
                  type="radio"
                  value="bubble"
                />
                <div
                  class="_ui_1vw5h_27"
                />
              </div>
              <span>
                Message bubbles
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="bubble"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 30px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <div />
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      role="button"
                      tabindex="-1"
                    >
                      <div />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
        <div
          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
        >
          <label
            aria-label="IRC (experimental)"
            class="_label_dgy0u_67"
            for="radix-2"
          >
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
            >
              <div
                class="_container_1vw5h_18"
              >
                <input
                  class="_input_1vw5h_26"
                  id="radix-2"
                  name="layout"
                  title=""
                  type="radio"
                  value="irc"
                />
                <div
                  class="_ui_1vw5h_27"
                />
              </div>
              <span>
                IRC (experimental)
              </span>
            </div>
            <hr
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
            />
            <div
              class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"
              role="presentation"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="mx_EventTile"
                data-event-id="$9999999999999999999999999999999999999999999"
                data-has-reply="false"
                data-layout="irc"
                data-scroll-tokens="$9999999999999999999999999999999999999999999"
                data-self="true"
                tabindex="-1"
              >
                <div
                  class="mx_DisambiguatedProfile"
                >
                  <span
                    class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
                    dir="auto"
                  >
                    Alice
                  </span>
                </div>
                <div
                  class="mx_EventTile_avatar"
                >
                  <span
                    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                    data-color="2"
                    data-testid="avatar-img"
                    data-type="round"
                    role="presentation"
                    style="--cpd-avatar-size: 14px;"
                    title="@userId:matrix.org"
                  >
                    A
                  </span>
                </div>
                <div
                  class="mx_EventTile_line"
                >
                  <div
                    class="mx_MTextBody mx_EventTile_content"
                  >
                    <div
                      class="mx_EventTile_body translate"
                      dir="auto"
                    >
                      Hey you. You're the best!
                    </div>
                  </div>
                  <div
                    aria-label="Message Actions"
                    aria-live="off"
                    class="mx_MessageActionBar"
                    role="toolbar"
                  >
                    <div
                      aria-label="Edit"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton"
                      role="button"
                      tabindex="0"
                    >
                      <div />
                    </div>
                    <div
                      aria-expanded="false"
                      aria-haspopup="true"
                      aria-label="Options"
                      class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
                      role="button"
                      tabindex="-1"
                    >
                      <div />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </label>
        </div>
      </form>
      <form
        class="_root_dgy0u_24"
      >
        <div
          class="_inline-field_dgy0u_40"
        >
          <div
            class="_inline-field-control_dgy0u_52"
          >
            <div
              class="_container_qnvru_18"
            >
              <input
                aria-describedby="radix-3"
                class="_input_qnvru_32"
                id="radix-4"
                name="compactLayout"
                title=""
                type="checkbox"
              />
              <div
                class="_ui_qnvru_42"
              />
            </div>
          </div>
          <div
            class="_inline-field-body_dgy0u_46"
          >
            <label
              class="_label_dgy0u_67"
              for="radix-4"
            >
              Show compact text and messages
            </label>
            <span
              class="_message_dgy0u_98 _help-message_dgy0u_104"
              id="radix-3"
            >
              Modern layout must be selected to use this feature.
            </span>
          </div>
        </div>
      </form>
    </div>
    <div
      class="_separator_144s5_17"
      data-kind="primary"
      data-orientation="horizontal"
      role="separator"
    />
  </div>
</DocumentFragment>
`;