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

exports[`OuiStep is rendered 1`] = `
<div
  aria-label="aria-label"
  class="ouiStep testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        1
      </span>
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props headingElement 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        1
      </span>
    </span>
    <h3
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </h3>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status complete is rendered 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--complete ouiStep__circle"
    >
      <span
        aria-label="Step 1 is complete"
        class="ouiStepNumber__icon"
        data-ouiicon-type="check"
      />
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status danger is rendered 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--danger ouiStep__circle"
    >
      <span
        aria-label="Step 1 has errors"
        class="ouiStepNumber__icon"
        data-ouiicon-type="cross"
      />
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status disabled is rendered 1`] = `
<div
  class="ouiStep ouiStep-isDisabled"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--disabled ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1 is disabled
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        1
      </span>
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status incomplete is rendered 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--incomplete ouiStepNumber-isHollow ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1 is incomplete
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        1
      </span>
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status loading is rendered 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--loading ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1 is loading
      </span>
      <span
        class="ouiLoadingSpinner ouiLoadingSpinner--xLarge ouiStepNumber__loader"
      />
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props status warning is rendered 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStepNumber--warning ouiStep__circle"
    >
      <span
        aria-label="Step 1 has warnings"
        class="ouiStepNumber__icon"
        data-ouiicon-type="alert"
      />
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props step 1`] = `
<div
  class="ouiStep"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStep__circle"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 5
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        5
      </span>
    </span>
    <p
      class="ouiTitle ouiTitle--small ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;

exports[`OuiStep props titleSize 1`] = `
<div
  class="ouiStep ouiStep--small"
>
  <div
    class="ouiStep__titleWrapper"
  >
    <span
      class="ouiStepNumber ouiStep__circle ouiStepNumber--small"
    >
      <span
        class="ouiScreenReaderOnly"
      >
        Step 1
      </span>
      <span
        aria-hidden="true"
        class="ouiStepNumber__number"
      >
        1
      </span>
    </span>
    <p
      class="ouiTitle ouiTitle--xsmall ouiStep__title"
    >
      First step
    </p>
  </div>
  <div
    class="ouiStep__content"
  >
    <p>
      Do this
    </p>
  </div>
</div>
`;