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

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

exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        You can hover on the dot.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
      <div
        class="ant-steps-item-description"
      >
        You can hover on the dot.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        You can hover on the dot.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        You can hover on the dot.
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/error.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
>
  <div
    class="ant-steps-item ant-steps-item-error ant-steps-next-error"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon anticon anticon-cross"
      />
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        2
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Process
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        3
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
>
  <div
    class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <i
          class="anticon anticon-user"
        >
          <svg
            aria-hidden="true"
            class=""
            data-icon="user"
            fill="currentColor"
            height="1em"
            viewBox="0 0 1024 1024"
            width="1em"
          >
            <path
              d="M819.4 793c-16.8-39.7-40.9-75.4-71.5-106-30.6-30.6-66.3-54.7-106-71.5-13.5-5.7-27.4-10.5-41.4-14.4 39.6-13.4 75.9-35.8 106.3-66.2 52-52 80.7-121.2 80.7-194.7s-28.6-142.7-80.7-194.7c-52-52-121.2-80.7-194.7-80.7s-142.7 28.6-194.7 80.7c-52 52-80.7 121.2-80.7 194.7s28.6 142.7 80.7 194.7c30.4 30.4 66.7 52.8 106.3 66.2-14 3.9-27.9 8.6-41.4 14.4-39.7 16.8-75.4 40.9-106 71.5-30.6 30.6-54.7 66.3-71.5 106-17.4 41.2-26.2 84.8-26.2 129.9 0 19.9 16.1 36 36 36s36-16.1 36-36c0-69.9 27.2-135.6 76.6-185 49.4-49.4 115.1-76.6 185-76.6s135.6 27.2 185 76.6 76.6 115.1 76.6 185c0 19.9 16.1 36 36 36s36-16.1 36-36c-.2-45.1-9-88.7-26.4-129.9zM308.6 340.2c0-112.2 91.3-203.4 203.4-203.4S715.4 228 715.4 340.2 624.2 543.6 512 543.6s-203.4-91.3-203.4-203.4z"
            />
          </svg>
        </i>
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Login
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <i
          class="anticon anticon-solution"
        >
          <svg
            aria-hidden="true"
            class=""
            data-icon="solution"
            fill="currentColor"
            height="1em"
            viewBox="0 0 1024 1024"
            width="1em"
          >
            <path
              d="M958.8 916.8c-12.6-66.6-58.5-119.9-118.4-144.1 35.6-23.7 59.1-64.1 59.1-110 0-72.8-59.2-132-132-132s-132 59.2-132 132c0 45.8 23.5 86.3 59.1 110-59.9 24.2-105.8 77.6-118.4 144.1-3.7 19.5 9.1 38.4 28.7 42.1 19.5 3.7 38.4-9.1 42.1-28.7 11-57.8 61.7-99.7 120.6-99.7 58.9 0 109.7 41.9 120.6 99.7 3.3 17.3 18.4 29.3 35.3 29.3 2.2 0 4.5-.2 6.7-.6 19.5-3.8 32.3-22.6 28.6-42.1zM767.5 602.7c33.1 0 60 26.9 60 60s-26.9 60-60 60-60-26.9-60-60 26.9-60 60-60z"
            />
            <path
              d="M888.5 64h-753c-39.7 0-72 32.3-72 72v752c0 39.7 32.3 72 72 72h277c19.9 0 36-16.1 36-36s-16.1-36-36-36h-277V136h753v340c0 19.9 16.1 36 36 36s36-16.1 36-36V136c0-39.7-32.3-72-72-72z"
            />
            <path
              d="M228.5 328h312c19.9 0 36-16.1 36-36s-16.1-36-36-36h-312c-19.9 0-36 16.1-36 36s16.1 36 36 36zm184 120h-184c-19.9 0-36 16.1-36 36s16.1 36 36 36h184c19.9 0 36-16.1 36-36s-16.1-36-36-36zm0 192h-184c-19.9 0-36 16.1-36 36s16.1 36 36 36h184c19.9 0 36-16.1 36-36s-16.1-36-36-36z"
            />
          </svg>
        </i>
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Verification
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-process ant-steps-item-custom"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <i
          class="anticon anticon-loading"
        >
          <svg
            aria-hidden="true"
            class="anticon-spin"
            data-icon="loading"
            fill="currentColor"
            height="1em"
            viewBox="0 0 1024 1024"
            width="1em"
          >
            <path
              d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3-22.2-52.4-53.9-99.4-94.3-139.9-40.4-40.4-87.5-72.2-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
            />
          </svg>
        </i>
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Pay
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait ant-steps-item-custom"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <i
          class="anticon anticon-smile-o"
        >
          <svg
            aria-hidden="true"
            class=""
            data-icon="smile-o"
            fill="currentColor"
            height="1em"
            viewBox="0 0 1024 1024"
            width="1em"
          >
            <path
              d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 94.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.4 72 512s11.6-117 34.5-171.2c22.2-52.4 53.9-99.4 94.3-139.9 40.4-40.4 87.5-72.2 139.9-94.3C395 83.6 452.6 72 512 72s117 11.6 171.2 34.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 99.5-94.4 139.9z"
            />
            <path
              d="M640.3 565.2c-19.9 0-36 16.1-36 36 0 50.9-41.4 92.3-92.3 92.3s-92.3-41.4-92.3-92.3c0-19.9-16.1-36-36-36s-36 16.1-36 36c0 90.6 73.7 164.3 164.3 164.3s164.3-73.7 164.3-164.3c0-19.9-16.1-36-36-36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0z"
            />
          </svg>
        </i>
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Done
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        <span
          class="ant-steps-icon-dot"
        />
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        1
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        2
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        3
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
<div
  class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        1
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        2
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        3
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
<div>
  <div
    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
  >
    <div
      class="ant-steps-item ant-steps-item-wait"
    >
      <div
        class="ant-steps-item-tail"
      />
      <div
        class="ant-steps-item-icon"
      >
        <span
          class="ant-steps-icon"
        >
          1
        </span>
      </div>
      <div
        class="ant-steps-item-content"
      >
        <div
          class="ant-steps-item-title"
        >
          First
        </div>
      </div>
    </div>
    <div
      class="ant-steps-item ant-steps-item-wait"
    >
      <div
        class="ant-steps-item-tail"
      />
      <div
        class="ant-steps-item-icon"
      >
        <span
          class="ant-steps-icon"
        >
          2
        </span>
      </div>
      <div
        class="ant-steps-item-content"
      >
        <div
          class="ant-steps-item-title"
        >
          Second
        </div>
      </div>
    </div>
    <div
      class="ant-steps-item ant-steps-item-wait"
    >
      <div
        class="ant-steps-item-tail"
      />
      <div
        class="ant-steps-item-icon"
      >
        <span
          class="ant-steps-icon"
        >
          3
        </span>
      </div>
      <div
        class="ant-steps-item-content"
      >
        <div
          class="ant-steps-item-title"
        >
          Last
        </div>
      </div>
    </div>
  </div>
  <div
    class="steps-content"
  >
    First-content
  </div>
  <div
    class="steps-action"
  >
    <button
      class="ant-btn ant-btn-primary"
      type="button"
    >
      <span>
        Next
      </span>
    </button>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
<div
  class="ant-steps ant-steps-vertical"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        1
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        2
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        3
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/steps/demo/vertical-small.md correctly 1`] = `
<div
  class="ant-steps ant-steps-vertical ant-steps-small"
>
  <div
    class="ant-steps-item ant-steps-item-process"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        1
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Finished
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        2
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        In Progress
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
  <div
    class="ant-steps-item ant-steps-item-wait"
  >
    <div
      class="ant-steps-item-tail"
    />
    <div
      class="ant-steps-item-icon"
    >
      <span
        class="ant-steps-icon"
      >
        3
      </span>
    </div>
    <div
      class="ant-steps-item-content"
    >
      <div
        class="ant-steps-item-title"
      >
        Waiting
      </div>
      <div
        class="ant-steps-item-description"
      >
        This is a description.
      </div>
    </div>
  </div>
</div>
`;