Storyshots.test.js.snap

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

exports[`Storyshots Button Button Base 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn-base"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Button Blank 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-blank"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Button Overrides 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn my-custom-css-klass"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Button Type Reset 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn"
    type="reset"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Button Type Submit 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn"
    type="submit"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default Bordered 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-bordered"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default Bordered Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-bordered btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default Circle 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-circle btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default Raised 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-raised"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Default Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Disabled 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn disabled"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Groups Button Group 1`] = `
<section
  class="storybook-snapshot-container"
>
  <div
    aria-label=""
    class="btn-group"
    role="group"
  >
    <button
      class="btn"
      type="button"
    >
      One
    </button>
     
    <button
      class="btn"
      type="button"
    >
      Two
    </button>
     
    <button
      class="btn"
      type="button"
    >
      Three
    </button>
  </div>
   
  <div
    aria-label=""
    class="btn-group"
    role="group"
  >
    <button
      class="btn btn-primary"
      type="button"
    >
      One
    </button>
     
    <button
      class="btn btn-primary"
      type="button"
    >
      Two
    </button>
     
    <button
      class="btn btn-primary"
      type="button"
    >
      Three
    </button>
  </div>
   
  <div
    aria-label=""
    class="btn-group"
    role="group"
  >
    <button
      class="btn btn-secondary"
      type="button"
    >
      One
    </button>
     
    <button
      class="btn btn-secondary"
      type="button"
    >
      Two
    </button>
     
    <button
      class="btn btn-secondary"
      type="button"
    >
      Three
    </button>
  </div>
   
  <div
    style="margin-bottom: 40px;"
  />
   
  <div
    aria-label=""
    class="btn-group"
    role="group"
  >
    <button
      class="btn btn-primary btn-bordered"
      type="button"
    >
      One
    </button>
     
    <button
      class="btn btn-primary btn-bordered"
      type="button"
    >
      Two
    </button>
     
    <button
      class="btn btn-primary btn-bordered"
      type="button"
    >
      Three
    </button>
  </div>
   
  <div
    aria-label=""
    class="btn-group"
    role="group"
  >
    <button
      class="btn btn-secondary btn-bordered"
      type="button"
    >
      One
    </button>
     
    <button
      class="btn btn-secondary btn-bordered"
      type="button"
    >
      Two
    </button>
     
    <button
      class="btn btn-secondary btn-bordered"
      type="button"
    >
      Three
    </button>
  </div>
</section>
`;

exports[`Storyshots Button Icons Button Icons 1`] = `
<section
  class="storybook-snapshot-container"
>
  <div
    style="display: inline-flex;"
  >
    <button
      class="btn btn-primary btn-rounded"
      type="button"
    >
      Download 
      <svg
        aria-hidden="true"
        class="btn-icon-right"
        height="16"
        version="1.1"
        viewBox="0 0 16 16"
        width="16"
      >
        <path
          d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
      5.06 14.08 4 12 4z"
          fill="currentColor"
          fill-rule="evenodd"
        />
      </svg>
    </button>
     
    <button
      class="btn btn-primary btn-rounded"
      type="button"
    >
      <svg
        aria-hidden="true"
        class="btn-icon-left"
        data-custom-icon="true"
        fill="currentColor"
        focusable="false"
        height="1em"
        stroke-width="0"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
      3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
        />
      </svg>
       Call
    </button>
  </div>
</section>
`;

exports[`Storyshots Button Large 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-large"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Block 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-block"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Bordered 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-bordered"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Bordered Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-bordered btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Circle 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-bordered btn-circle"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Rounded Raised 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-primary btn-rounded btn-raised"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Primary Test 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-circle"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary Bordered 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary btn-bordered"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary Bordered Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary btn-bordered btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary Circle 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary btn-circle"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary Rounded 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary btn-rounded"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Secondary Rounded Raised 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-secondary btn-rounded btn-raised"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Button Small 1`] = `
<section
  class="storybook-snapshot-container"
>
  <button
    class="btn btn-small"
    type="button"
  >
    <span>
      Go
    </span>
  </button>
</section>
`;

exports[`Storyshots Cards Card 1`] = `
<section
  class="storybook-snapshot-container"
>
  <div
    class="card"
  >
    <div
      class="custom-wrap"
      style="flex: 1;"
    >
      <h1>
        Default Card
      </h1>
    </div>
     
    <div
      class="custom-wrap"
      style="flex: 2;"
    >
      <p>
        This card comes with some
      
        <span
          class="quoted"
        >
          skinning css
        </span>
        
      included. Also, it's a flex container with direction of
      
        <i>
          row
        </i>
        
      , so each child with a
      
        <i>
          flex
        </i>
        
      rule with get placed as a sort of column in the row (until the viewport is
      shrunk below a certain breakpoint and then it will stack).
      </p>
    </div>
  </div>
   
  <div
    class="card card-stacked"
  >
    <div
      class="custom-wrap"
    >
      <h1
        style="flex: 1; display: flex; justify-content: center;"
      >
        Stacked Card
      </h1>
       
      <div
        style="flex 1;"
      >
        <p>
          This card comes with some
        
          <span
            class="quoted"
          >
            skinning css
          </span>
          
        included. Also, it's a flex container with direction of
        
          <i>
            column
          </i>
          
        , so each child with a
        
          <i>
            flex
          </i>
          
        rule with get placed as a sort of row in the stack.
        </p>
      </div>
    </div>
  </div>
   
  <div
    class="card-base"
  >
    <div
      class="custom-card custom-wrap"
    >
      <h1>
        Card With No Skinning
      </h1>
       
      <p>
        This card omits any
      
        <span
          class="quoted"
        >
          skinning css
        </span>
        
      but includes the base or core CSS. So, we can style it without the need to
      resort to css custom theming at all -- we simply define our own customized
      styles. It does come with some base styles but hopefully not too
      opinionated for your use case.
      </p>
    </div>
  </div>
</section>
`;

exports[`Storyshots Header Example Header Test 1`] = `
<section
  class="storybook-snapshot-container"
>
  <div
    class="header header-sticky"
  >
    <div
      class="header-content"
    >
      <div
        slot="logoleft"
      >
        logo left
      </div>
       
       
      <nav>
        <ul
          class="header-nav nav-overrides"
        >
          <li
            class="header-nav-item"
          >
            <a
              href="#home"
            >
              Home
            </a>
          </li>
           
          <li
            class="header-nav-item"
          >
            <a
              href="#products"
            >
              Products
            </a>
          </li>
           
          <li
            class="header-nav-item"
          >
            <a
              href="#services"
            >
              Services
            </a>
          </li>
           
          <li
            class="header-nav-item"
          >
            <a
              href="#about"
            >
              About
            </a>
          </li>
        </ul>
      </nav>
       
       
      <div
        slot="logoright"
      >
        logo right
      </div>
    </div>
  </div>
</section>
`;

exports[`Storyshots Progress Progress CSS 1`] = `
<section
  class="storybook-snapshot-container"
>
  <progress
    class="progress foo-bar-baz"
    max="100"
    value="30"
  />
</section>
`;

exports[`Storyshots Progress Progress Test 1`] = `
<section
  class="storybook-snapshot-container"
>
  <progress
    class="progress"
    max="100"
    value="30"
  />
</section>
`;