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

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

exports[`FontScalingPanel renders the font scaling UI 1`] = `
<Wrapper>
  <FontScalingPanel>
    <div
      className="mx_SettingsTab_section mx_FontScalingPanel"
    >
      <span
        className="mx_SettingsTab_subheading"
      >
        Font size
      </span>
      <EventTilePreview
        avatarUrl={null}
        className="mx_FontScalingPanel_fontSlider_preview"
        displayName={null}
        layout="group"
        message="Hey you. You're the best!"
        userId={null}
      >
        <div
          className="mx_FontScalingPanel_fontSlider_preview mx_GroupLayout mx_EventTilePreview_loader"
        >
          <Spinner
            h={32}
            w={32}
          >
            <div
              className="mx_Spinner"
            >
              <div
                aria-label="Loading..."
                className="mx_Spinner_icon"
                style={
                  Object {
                    "height": 32,
                    "width": 32,
                  }
                }
              />
            </div>
          </Spinner>
        </div>
      </EventTilePreview>
      <div
        className="mx_FontScalingPanel_fontSlider"
      >
        <div
          className="mx_FontScalingPanel_fontSlider_smallText"
        >
          Aa
        </div>
        <Slider
          disabled={false}
          displayFunc={[Function]}
          onSelectionChange={[Function]}
          value={15}
          values={
            Array [
              13,
              14,
              15,
              16,
              18,
            ]
          }
        >
          <div
            className="mx_Slider"
          >
            <div>
              <div
                className="mx_Slider_bar"
              >
                <hr
                  onClick={[Function]}
                />
                <div
                  className="mx_Slider_selection"
                >
                  <div
                    className="mx_Slider_selectionDot"
                    style={
                      Object {
                        "left": "calc(-1.195em + 50%)",
                      }
                    }
                  >
                    <div
                      className="mx_Slider_selectionText"
                    >
                      15
                    </div>
                  </div>
                  <hr
                    style={
                      Object {
                        "width": "50%",
                      }
                    }
                  />
                </div>
              </div>
              <div
                className="mx_Slider_dotContainer"
              >
                <Dot
                  active={true}
                  disabled={false}
                  key="13"
                  label=""
                  onClick={[Function]}
                >
                  <span
                    className="mx_Slider_dotValue"
                    onClick={[Function]}
                  >
                    <div
                      className="mx_Slider_dot mx_Slider_dotActive"
                    />
                    <div
                      className="mx_Slider_labelContainer"
                    >
                      <div
                        className="mx_Slider_label"
                      />
                    </div>
                  </span>
                </Dot>
                <Dot
                  active={true}
                  disabled={false}
                  key="14"
                  label=""
                  onClick={[Function]}
                >
                  <span
                    className="mx_Slider_dotValue"
                    onClick={[Function]}
                  >
                    <div
                      className="mx_Slider_dot mx_Slider_dotActive"
                    />
                    <div
                      className="mx_Slider_labelContainer"
                    >
                      <div
                        className="mx_Slider_label"
                      />
                    </div>
                  </span>
                </Dot>
                <Dot
                  active={true}
                  disabled={false}
                  key="15"
                  label=""
                  onClick={[Function]}
                >
                  <span
                    className="mx_Slider_dotValue"
                    onClick={[Function]}
                  >
                    <div
                      className="mx_Slider_dot mx_Slider_dotActive"
                    />
                    <div
                      className="mx_Slider_labelContainer"
                    >
                      <div
                        className="mx_Slider_label"
                      />
                    </div>
                  </span>
                </Dot>
                <Dot
                  active={false}
                  disabled={false}
                  key="16"
                  label=""
                  onClick={[Function]}
                >
                  <span
                    className="mx_Slider_dotValue"
                    onClick={[Function]}
                  >
                    <div
                      className="mx_Slider_dot"
                    />
                    <div
                      className="mx_Slider_labelContainer"
                    >
                      <div
                        className="mx_Slider_label"
                      />
                    </div>
                  </span>
                </Dot>
                <Dot
                  active={false}
                  disabled={false}
                  key="18"
                  label=""
                  onClick={[Function]}
                >
                  <span
                    className="mx_Slider_dotValue"
                    onClick={[Function]}
                  >
                    <div
                      className="mx_Slider_dot"
                    />
                    <div
                      className="mx_Slider_labelContainer"
                    >
                      <div
                        className="mx_Slider_label"
                      />
                    </div>
                  </span>
                </Dot>
              </div>
            </div>
          </div>
        </Slider>
        <div
          className="mx_FontScalingPanel_fontSlider_largeText"
        >
          Aa
        </div>
      </div>
      <SettingsFlag
        level="account"
        name="useCustomFontSize"
        onChange={[Function]}
        useCheckbox={true}
      >
        <StyledCheckbox
          checked={false}
          className=""
          disabled={false}
          onChange={[Function]}
        >
          <span
            className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
          >
            <input
              checked={false}
              disabled={false}
              id="checkbox_abdefghi"
              onChange={[Function]}
              type="checkbox"
            />
            <label
              htmlFor="checkbox_abdefghi"
            >
              <div
                className="mx_Checkbox_background"
              >
                <div
                  className="mx_Checkbox_checkmark"
                />
              </div>
              <div>
                Use custom size
              </div>
            </label>
          </span>
        </StyledCheckbox>
      </SettingsFlag>
      <Field
        autoComplete="off"
        className="mx_FontScalingPanel_customFontSizeField"
        disabled={true}
        element="input"
        id="font_size_field"
        label="Font size"
        onChange={[Function]}
        onValidate={[Function]}
        placeholder="15"
        type="number"
        validateOnBlur={true}
        validateOnChange={true}
        validateOnFocus={true}
        value="15"
      >
        <div
          className="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
        >
          <input
            autoComplete="off"
            disabled={true}
            id="font_size_field"
            label="Font size"
            onBlur={[Function]}
            onChange={[Function]}
            onFocus={[Function]}
            placeholder="15"
            type="number"
            value="15"
          />
          <label
            htmlFor="font_size_field"
          >
            Font size
          </label>
        </div>
      </Field>
    </div>
  </FontScalingPanel>
</Wrapper>
`;