ant-design/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

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

exports[`renders ./components/space/demo/align.md extend context correctly 1`] = `
<div
  class="space-align-container"
>
  <div
    class="space-align-block"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-center"
    >
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        center
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        <button
          class="ant-btn ant-btn-primary"
          type="button"
        >
          <span>
            Primary
          </span>
        </button>
      </div>
      <div
        class="ant-space-item"
      >
        <span
          class="mock-block"
        >
          Block
        </span>
      </div>
    </div>
  </div>
  <div
    class="space-align-block"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-start"
    >
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        start
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        <button
          class="ant-btn ant-btn-primary"
          type="button"
        >
          <span>
            Primary
          </span>
        </button>
      </div>
      <div
        class="ant-space-item"
      >
        <span
          class="mock-block"
        >
          Block
        </span>
      </div>
    </div>
  </div>
  <div
    class="space-align-block"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-end"
    >
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        end
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        <button
          class="ant-btn ant-btn-primary"
          type="button"
        >
          <span>
            Primary
          </span>
        </button>
      </div>
      <div
        class="ant-space-item"
      >
        <span
          class="mock-block"
        >
          Block
        </span>
      </div>
    </div>
  </div>
  <div
    class="space-align-block"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-baseline"
    >
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        baseline
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px"
      >
        <button
          class="ant-btn ant-btn-primary"
          type="button"
        >
          <span>
            Primary
          </span>
        </button>
      </div>
      <div
        class="ant-space-item"
      >
        <span
          class="mock-block"
        >
          Block
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/space/demo/base.md extend context correctly 1`] = `
<div
  class="ant-space ant-space-horizontal ant-space-align-center"
>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    Space
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    <button
      class="ant-btn ant-btn-primary"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    <span
      class="ant-upload-wrapper"
    >
      <div
        class="ant-upload ant-upload-select"
      >
        <span
          class="ant-upload"
          role="button"
          tabindex="0"
        >
          <input
            accept=""
            style="display:none"
            type="file"
          />
          <button
            class="ant-btn ant-btn-default"
            type="button"
          >
            <span
              aria-label="upload"
              class="anticon anticon-upload"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="upload"
                fill="currentColor"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
                />
              </svg>
            </span>
            <span>
               Click to Upload
            </span>
          </button>
        </span>
      </div>
      <div
        class="ant-upload-list ant-upload-list-text"
      />
    </span>
  </div>
  <div
    class="ant-space-item"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Confirm
      </span>
    </button>
    <div>
      <div
        class="ant-popover ant-popconfirm"
        style="opacity:0"
      >
        <div
          class="ant-popover-content"
        >
          <div
            class="ant-popover-arrow"
          >
            <span
              class="ant-popover-arrow-content"
            />
          </div>
          <div
            class="ant-popover-inner"
            role="tooltip"
          >
            <div
              class="ant-popconfirm-inner-content"
            >
              <div
                class="ant-popconfirm-message"
              >
                <span
                  aria-label="exclamation-circle"
                  class="anticon anticon-exclamation-circle"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    data-icon="exclamation-circle"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
                    />
                  </svg>
                </span>
                <div
                  class="ant-popconfirm-message-title"
                >
                  Are you sure delete this task?
                </div>
              </div>
              <div
                class="ant-popconfirm-buttons"
              >
                <button
                  class="ant-btn ant-btn-default ant-btn-sm"
                  type="button"
                >
                  <span>
                    No
                  </span>
                </button>
                <button
                  class="ant-btn ant-btn-primary ant-btn-sm"
                  type="button"
                >
                  <span>
                    Yes
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/space/demo/customize.md extend context correctly 1`] = `
Array [
  <div
    class="ant-slider ant-slider-horizontal"
  >
    <div
      class="ant-slider-rail"
    />
    <div
      class="ant-slider-track"
      style="left:0%;width:8%"
    />
    <div
      class="ant-slider-step"
    />
    <div
      aria-disabled="false"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="8"
      class="ant-slider-handle"
      role="slider"
      style="left:8%;transform:translateX(-50%)"
      tabindex="0"
    />
    <div>
      <div
        class="ant-tooltip ant-slider-tooltip"
        style="opacity:0"
      >
        <div
          class="ant-tooltip-content"
        >
          <div
            class="ant-tooltip-arrow"
          >
            <span
              class="ant-tooltip-arrow-content"
            />
          </div>
          <div
            class="ant-tooltip-inner"
            role="tooltip"
          >
            8
          </div>
        </div>
      </div>
    </div>
  </div>,
  <br />,
  <br />,
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
  >
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-primary"
        type="button"
      >
        <span>
          Primary
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-default"
        type="button"
      >
        <span>
          Default
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-dashed"
        type="button"
      >
        <span>
          Dashed
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
    >
      <button
        class="ant-btn ant-btn-link"
        type="button"
      >
        <span>
          Link
        </span>
      </button>
    </div>
  </div>,
]
`;

exports[`renders ./components/space/demo/debug.md extend context correctly 1`] = `
<div
  class="ant-space ant-space-horizontal ant-space-align-center"
>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    Button
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    Button
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Delete
      </span>
    </button>
    <div>
      <div
        class="ant-popover ant-popconfirm"
        style="opacity:0"
      >
        <div
          class="ant-popover-content"
        >
          <div
            class="ant-popover-arrow"
          >
            <span
              class="ant-popover-arrow-content"
            />
          </div>
          <div
            class="ant-popover-inner"
            role="tooltip"
          >
            <div
              class="ant-popconfirm-inner-content"
            >
              <div
                class="ant-popconfirm-message"
              >
                <span
                  aria-label="exclamation-circle"
                  class="anticon anticon-exclamation-circle"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    data-icon="exclamation-circle"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
                    />
                  </svg>
                </span>
                <div
                  class="ant-popconfirm-message-title"
                >
                  Are you sure delete this task?
                </div>
              </div>
              <div
                class="ant-popconfirm-buttons"
              >
                <button
                  class="ant-btn ant-btn-default ant-btn-sm"
                  type="button"
                >
                  <span>
                    No
                  </span>
                </button>
                <button
                  class="ant-btn ant-btn-primary ant-btn-sm"
                  type="button"
                >
                  <span>
                    Yes
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    <span
      class="ant-popover-disabled-compatible-wrapper"
      style="display:inline-block;cursor:not-allowed"
    >
      <button
        class="ant-btn ant-btn-default"
        disabled=""
        style="pointer-events:none"
        type="button"
      >
        <span>
          Delete
        </span>
      </button>
    </span>
    <div>
      <div
        class="ant-popover ant-popconfirm"
        style="opacity:0"
      >
        <div
          class="ant-popover-content"
        >
          <div
            class="ant-popover-arrow"
          >
            <span
              class="ant-popover-arrow-content"
            />
          </div>
          <div
            class="ant-popover-inner"
            role="tooltip"
          >
            <div
              class="ant-popconfirm-inner-content"
            >
              <div
                class="ant-popconfirm-message"
              >
                <span
                  aria-label="exclamation-circle"
                  class="anticon anticon-exclamation-circle"
                  role="img"
                >
                  <svg
                    aria-hidden="true"
                    data-icon="exclamation-circle"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
                    />
                  </svg>
                </span>
                <div
                  class="ant-popconfirm-message-title"
                >
                  Are you sure delete this task?
                </div>
              </div>
              <div
                class="ant-popconfirm-buttons"
              >
                <button
                  class="ant-btn ant-btn-default ant-btn-sm"
                  type="button"
                >
                  <span>
                    No
                  </span>
                </button>
                <button
                  class="ant-btn ant-btn-primary ant-btn-sm"
                  type="button"
                >
                  <span>
                    Yes
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px"
  >
    1
  </div>
  <div
    class="ant-space-item"
  >
    Button
  </div>
</div>
`;

exports[`renders ./components/space/demo/gap-in-line.md extend context correctly 1`] = `
Array [
  <button
    aria-checked="false"
    class="ant-switch"
    role="switch"
    type="button"
  >
    <div
      class="ant-switch-handle"
    />
    <span
      class="ant-switch-inner"
    />
  </button>,
  <div
    style="box-shadow:0 0 5px green"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-center"
      style="flex-wrap:wrap;margin-bottom:-8px;width:310px;background:blue"
    >
      <div
        class="ant-space-item"
        style="margin-right:8px;padding-bottom:8px"
      >
        <div
          style="width:150px;height:100px;background:red"
        />
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px;padding-bottom:8px"
      >
        <div
          style="width:150px;height:100px;background:red"
        />
      </div>
      <div
        class="ant-space-item"
        style="margin-right:8px;padding-bottom:8px"
      >
        <div
          style="width:150px;height:100px;background:red"
        />
      </div>
      <div
        class="ant-space-item"
        style="padding-bottom:8px"
      >
        <div
          style="width:150px;height:100px;background:red"
        />
      </div>
    </div>
  </div>,
]
`;

exports[`renders ./components/space/demo/size.md extend context correctly 1`] = `
Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
  >
    <label
      class="ant-radio-wrapper ant-radio-wrapper-checked"
    >
      <span
        class="ant-radio ant-radio-checked"
      >
        <input
          checked=""
          class="ant-radio-input"
          type="radio"
          value="small"
        />
        <span
          class="ant-radio-inner"
        />
      </span>
      <span>
        Small
      </span>
    </label>
    <label
      class="ant-radio-wrapper"
    >
      <span
        class="ant-radio"
      >
        <input
          class="ant-radio-input"
          type="radio"
          value="middle"
        />
        <span
          class="ant-radio-inner"
        />
      </span>
      <span>
        Middle
      </span>
    </label>
    <label
      class="ant-radio-wrapper"
    >
      <span
        class="ant-radio"
      >
        <input
          class="ant-radio-input"
          type="radio"
          value="large"
        />
        <span
          class="ant-radio-inner"
        />
      </span>
      <span>
        Large
      </span>
    </label>
  </div>,
  <br />,
  <br />,
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
  >
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-primary"
        type="button"
      >
        <span>
          Primary
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-default"
        type="button"
      >
        <span>
          Default
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-dashed"
        type="button"
      >
        <span>
          Dashed
        </span>
      </button>
    </div>
    <div
      class="ant-space-item"
    >
      <button
        class="ant-btn ant-btn-link"
        type="button"
      >
        <span>
          Link
        </span>
      </button>
    </div>
  </div>,
]
`;

exports[`renders ./components/space/demo/split.md extend context correctly 1`] = `
<div
  class="ant-space ant-space-horizontal ant-space-align-center"
>
  <div
    class="ant-space-item"
    style="margin-right:4px"
  >
    <a
      class="ant-typography"
    >
      Link
    </a>
  </div>
  <span
    class="ant-space-item-split"
    style="margin-right:4px"
  >
    <div
      class="ant-divider ant-divider-vertical"
      role="separator"
    />
  </span>
  <div
    class="ant-space-item"
    style="margin-right:4px"
  >
    <a
      class="ant-typography"
    >
      Link
    </a>
  </div>
  <span
    class="ant-space-item-split"
    style="margin-right:4px"
  >
    <div
      class="ant-divider ant-divider-vertical"
      role="separator"
    />
  </span>
  <div
    class="ant-space-item"
  >
    <a
      class="ant-typography"
    >
      Link
    </a>
  </div>
</div>
`;

exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
<div
  class="ant-space ant-space-vertical"
  style="display:flex"
>
  <div
    class="ant-space-item"
    style="margin-bottom:16px"
  >
    <div
      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
      >
        <div
          class="ant-card-head-wrapper"
        >
          <div
            class="ant-card-head-title"
          >
            Card
          </div>
        </div>
      </div>
      <div
        class="ant-card-body"
      >
        <p>
          Card content
        </p>
        <p>
          Card content
        </p>
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
    style="margin-bottom:16px"
  >
    <div
      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
      >
        <div
          class="ant-card-head-wrapper"
        >
          <div
            class="ant-card-head-title"
          >
            Card
          </div>
        </div>
      </div>
      <div
        class="ant-card-body"
      >
        <p>
          Card content
        </p>
        <p>
          Card content
        </p>
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
  >
    <div
      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
      >
        <div
          class="ant-card-head-wrapper"
        >
          <div
            class="ant-card-head-title"
          >
            Card
          </div>
        </div>
      </div>
      <div
        class="ant-card-body"
      >
        <p>
          Card content
        </p>
        <p>
          Card content
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] = `
<div
  class="ant-space ant-space-horizontal ant-space-align-center"
  style="flex-wrap:wrap;margin-bottom:-16px"
>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="margin-right:8px;padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
  <div
    class="ant-space-item"
    style="padding-bottom:16px"
  >
    <button
      class="ant-btn ant-btn-default"
      type="button"
    >
      <span>
        Button
      </span>
    </button>
  </div>
</div>
`;