ant-design/components/grid/__tests__/__snapshots__/demo.test.js.snap

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

exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-24"
    >
      col
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-12"
    >
      col-12
    </div>
    <div
      class="ant-col ant-col-base-12"
    >
      col-12
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-base-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-base-8"
    >
      col-8
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-base-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-base-6"
    >
      col-6
    </div>
    <div
      class="ant-col ant-col-base-6"
    >
      col-6
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
<div>
  <p>
    sub-element align left
  </p>
  <div
    class="ant-row ant-row-start"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
  </div>
  <p>
    sub-element align center
  </p>
  <div
    class="ant-row ant-row-center"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
  </div>
  <p>
    sub-element align right
  </p>
  <div
    class="ant-row ant-row-end"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
  </div>
  <p>
    sub-element monospaced arrangement
  </p>
  <div
    class="ant-row ant-row-space-between"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
  </div>
  <p>
    sub-element align full
  </p>
  <div
    class="ant-row ant-row-space-around"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      col-4
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
<div>
  <p>
    Align Top
  </p>
  <div
    class="ant-row ant-row-center ant-row-top"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>
  <p>
    Align Center
  </p>
  <div
    class="ant-row ant-row-space-around ant-row-middle"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>
  <p>
    Align Bottom
  </p>
  <div
    class="ant-row ant-row-space-between ant-row-bottom"
  >
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-100"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-50"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-120"
      >
        col-4
      </p>
    </div>
    <div
      class="ant-col ant-col-base-4"
    >
      <p
        class="height-80"
      >
        col-4
      </p>
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
<div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-6 ant-col-base-order-4"
    >
      1 col-order-4
    </div>
    <div
      class="ant-col ant-col-base-6 ant-col-base-order-3"
    >
      2 col-order-3
    </div>
    <div
      class="ant-col ant-col-base-6 ant-col-base-order-2"
    >
      3 col-order-2
    </div>
    <div
      class="ant-col ant-col-base-6 ant-col-base-order-1"
    >
      4 col-order-1
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
<div>
  <p>
    Percentage columns
  </p>
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex:2 2 auto"
    >
      2 / 5
    </div>
    <div
      class="ant-col"
      style="flex:3 3 auto"
    >
      3 / 5
    </div>
  </div>
  <p>
    Fill rest
  </p>
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex:0 0 100px"
    >
      100px
    </div>
    <div
      class="ant-col"
      style="flex:auto"
    >
      Fill Rest
    </div>
  </div>
  <p>
    Raw flex style
  </p>
  <div
    class="ant-row"
  >
    <div
      class="ant-col"
      style="flex:1 1 200px"
    >
      1 1 200px
    </div>
    <div
      class="ant-col"
      style="flex:0 1 300px"
    >
      0 1 300px
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
<div
  class="gutter-example"
>
  <div
    class="ant-row"
    style="margin-left:-8px;margin-right:-8px"
  >
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-left:8px;padding-right:8px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-left:8px;padding-right:8px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-left:8px;padding-right:8px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-left:8px;padding-right:8px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
  </div>
  <div
    class="ant-row"
    style="margin-top:-10px;margin-bottom:10px"
  >
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-top:10px;padding-bottom:10px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-top:10px;padding-bottom:10px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-top:10px;padding-bottom:10px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col gutter-row ant-col-base-6"
      style="padding-top:10px;padding-bottom:10px"
    >
      <div
        class="gutter-box"
      >
        col-6
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
<div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-8"
    >
      col-8
    </div>
    <div
      class="ant-col ant-col-base-8 ant-col-base-offset-8"
    >
      col-8
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-6 ant-col-base-offset-6"
    >
      col-6 col-offset-6
    </div>
    <div
      class="ant-col ant-col-base-6 ant-col-base-offset-6"
    >
      col-6 col-offset-6
    </div>
  </div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-12 ant-col-base-offset-6"
    >
      col-12 col-offset-6
    </div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
<div>
  <div
    style="margin-bottom:16px"
  >
    <span
      style="margin-right:6px"
    >
      Horizontal Gutter (px): 
    </span>
    <div
      style="width:50%"
    >
      <div
        class="ant-slider ant-slider-with-marks"
      >
        <div
          class="ant-slider-rail"
        />
        <div
          class="ant-slider-track"
          style="left:0%;right:auto;width:20%"
        />
        <div
          class="ant-slider-step"
        >
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:0%"
          />
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:20%"
          />
          <span
            class="ant-slider-dot"
            style="left:40%"
          />
          <span
            class="ant-slider-dot"
            style="left:60%"
          />
          <span
            class="ant-slider-dot"
            style="left:80%"
          />
          <span
            class="ant-slider-dot"
            style="left:100%"
          />
        </div>
        <div
          aria-disabled="false"
          aria-valuemax="5"
          aria-valuemin="0"
          aria-valuenow="1"
          class="ant-slider-handle"
          role="slider"
          style="left:20%;right:auto;transform:translateX(-50%)"
          tabindex="0"
        />
        <div
          class="ant-slider-mark"
        >
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
          >
            8
          </span>
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
          >
            16
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
          >
            24
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
          >
            32
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
          >
            40
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
          >
            48
          </span>
        </div>
      </div>
    </div>
    <span
      style="margin-right:6px"
    >
      Vertical Gutter (px): 
    </span>
    <div
      style="width:50%"
    >
      <div
        class="ant-slider ant-slider-with-marks"
      >
        <div
          class="ant-slider-rail"
        />
        <div
          class="ant-slider-track"
          style="left:0%;right:auto;width:20%"
        />
        <div
          class="ant-slider-step"
        >
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:0%"
          />
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:20%"
          />
          <span
            class="ant-slider-dot"
            style="left:40%"
          />
          <span
            class="ant-slider-dot"
            style="left:60%"
          />
          <span
            class="ant-slider-dot"
            style="left:80%"
          />
          <span
            class="ant-slider-dot"
            style="left:100%"
          />
        </div>
        <div
          aria-disabled="false"
          aria-valuemax="5"
          aria-valuemin="0"
          aria-valuenow="1"
          class="ant-slider-handle"
          role="slider"
          style="left:20%;right:auto;transform:translateX(-50%)"
          tabindex="0"
        />
        <div
          class="ant-slider-mark"
        >
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
          >
            8
          </span>
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
          >
            16
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
          >
            24
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
          >
            32
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
          >
            40
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
          >
            48
          </span>
        </div>
      </div>
    </div>
    <span
      style="margin-right:6px"
    >
      Column Count:
    </span>
    <div
      style="width:50%"
    >
      <div
        class="ant-slider ant-slider-with-marks"
      >
        <div
          class="ant-slider-rail"
        />
        <div
          class="ant-slider-track"
          style="left:0%;right:auto;width:40%"
        />
        <div
          class="ant-slider-step"
        >
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:0%"
          />
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:20%"
          />
          <span
            class="ant-slider-dot ant-slider-dot-active"
            style="left:40%"
          />
          <span
            class="ant-slider-dot"
            style="left:60%"
          />
          <span
            class="ant-slider-dot"
            style="left:80%"
          />
          <span
            class="ant-slider-dot"
            style="left:100%"
          />
        </div>
        <div
          aria-disabled="false"
          aria-valuemax="5"
          aria-valuemin="0"
          aria-valuenow="2"
          class="ant-slider-handle"
          role="slider"
          style="left:40%;right:auto;transform:translateX(-50%)"
          tabindex="0"
        />
        <div
          class="ant-slider-mark"
        >
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
          >
            2
          </span>
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
          >
            3
          </span>
          <span
            class="ant-slider-mark-text ant-slider-mark-text-active"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
          >
            4
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
          >
            6
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
          >
            8
          </span>
          <span
            class="ant-slider-mark-text"
            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
          >
            12
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ant-row"
    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
  >
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
  </div>
  <div
    class="ant-row"
    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
  >
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
    <div
      class="ant-col ant-col-base-6"
      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
    >
      <div>
        Column
      </div>
    </div>
  </div>
  <pre>
    &lt;Row gutter={[16, 16]}&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
&lt;/Row&gt;
  </pre>
  <pre>
    &lt;Row gutter={[16, 16]}&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
&lt;/Row&gt;
  </pre>
</div>
`;

exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col"
  >
    Col
  </div>
  <div
    class="ant-col"
  >
    Col
  </div>
  <div
    class="ant-col"
  >
    Col
  </div>
</div>
`;

exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
<div
  class="ant-row"
>
  <div
    class="ant-col"
  >
    Col
  </div>
  <div
    class="ant-col"
  >
    Col
  </div>
  <div
    class="ant-col"
  >
    Col
  </div>
</div>
`;

exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
<div>
  <div
    class="ant-row"
  >
    <div
      class="ant-col ant-col-base-18 ant-col-base-push-6"
    >
      col-18 col-push-6
    </div>
    <div
      class="ant-col ant-col-base-6 ant-col-base-pull-18"
    >
      col-6 col-pull-18
    </div>
  </div>
</div>
`;