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`] = `
<FontScalingPanel>
  <div
    className="mx_SettingsTab_section mx_FontScalingPanel"
  >
    <span
      className="mx_SettingsTab_subheading"
    >
      Font size
    </span>
    <EventTilePreview
      avatarUrl={null}
      className="mx_FontScalingPanel_preview"
      displayName={null}
      layout="group"
      message="Hey you. You're the best!"
      userId={null}
    >
      <div
        className="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
      >
        <Spinner
          h={32}
          w={32}
        >
          <div
            className="mx_Spinner"
          >
            <div
              aria-label="Loading..."
              className="mx_Spinner_icon"
              data-testid="spinner"
              role="progressbar"
              style={
                {
                  "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={
          [
            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={
                    {
                      "left": "calc(-1.195em + 50%)",
                    }
                  }
                >
                  <div
                    className="mx_Slider_selectionText"
                  >
                    15
                  </div>
                </div>
                <hr
                  style={
                    {
                      "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>
`;