storybook.test.js.snap

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

exports[`Storyshots Button Customizations 1`] = `
Array [
  <button
    className="btn my-custom-css-klass"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn blank"
    type="button"
  >
    Go
  </button>,
  <button
    className="btnBase"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Default 1`] = `
Array [
  <button
    className="btn"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn bordered"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn bordered rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn rounded raised"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn bordered circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn block"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn bordered block"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Disabled All 1`] = `
Array [
  <button
    className="btn disabled"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary disabled"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary disabled"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary bordered disabled"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Groups All 1`] = `
Array [
  <div
    className="group "
    role="group"
  >
    <button
      className="btn"
      type="button"
    >
      One
    </button>
    <button
      className="btn"
      type="button"
    >
      Two
    </button>
    <button
      className="btn"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn raised"
      type="button"
    >
      One
    </button>
    <button
      className="btn raised"
      type="button"
    >
      Two
    </button>
    <button
      className="btn raised"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn bordered"
      type="button"
    >
      One
    </button>
    <button
      className="btn bordered"
      type="button"
    >
      Two
    </button>
    <button
      className="btn bordered"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn secondary"
      type="button"
    >
      One
    </button>
    <button
      className="btn secondary"
      type="button"
    >
      Two
    </button>
    <button
      className="btn secondary"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn secondary raised"
      type="button"
    >
      One
    </button>
    <button
      className="btn secondary raised"
      type="button"
    >
      Two
    </button>
    <button
      className="btn secondary raised"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn secondary bordered"
      type="button"
    >
      One
    </button>
    <button
      className="btn secondary bordered"
      type="button"
    >
      Two
    </button>
    <button
      className="btn secondary bordered"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary raised"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary raised"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary raised"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary bordered"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary bordered"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary bordered"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary disabled"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary disabled"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary disabled"
      type="button"
    >
      Three
    </button>
  </div>,
  <div
    className="group "
    role="group"
  >
    <button
      className="btn primary disabled"
      type="button"
    >
      One
    </button>
    <button
      className="btn primary disabled"
      type="button"
    >
      Two
    </button>
    <button
      className="btn primary disabled"
      type="button"
    >
      Three
    </button>
  </div>,
]
`;

exports[`Storyshots Button Icons Button Icons 1`] = `
Array [
  <div>
    <button
      className="btn primary"
      type="button"
    >
      <svg
        aria-hidden="true"
        className="btn-icon"
        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"
          fillRule="evenodd"
        />
      </svg>
      Icon Left
    </button>
  </div>,
  <div
    style={
      Object {
        "marginTop": 16,
      }
    }
  >
    <button
      className="btn primary"
      type="button"
    >
      Icon Right
      <svg
        aria-hidden="true"
        className="btn-icon"
        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"
          fillRule="evenodd"
        />
      </svg>
    </button>
  </div>,
]
`;

exports[`Storyshots Button Primary 1`] = `
Array [
  <button
    className="btn primary"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary bordered"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary bordered rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary rounded raised"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary bordered circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary block"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn primary bordered block"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Secondary 1`] = `
Array [
  <button
    className="btn secondary"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary bordered"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary bordered rounded"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary rounded raised"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary bordered circle"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary block"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn secondary bordered block"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Sizes 1`] = `
Array [
  <button
    className="btn small"
    type="button"
  >
    Go
  </button>,
  <button
    className="btn large"
    type="button"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Button Types 1`] = `
Array [
  <button
    className="btn"
    type="reset"
  >
    Go
  </button>,
  <button
    className="btn"
    type="submit"
  >
    Go
  </button>,
]
`;

exports[`Storyshots Card All 1`] = `
Array [
  <div
    className="card"
  >
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Default
    </div>
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Card
    </div>
  </div>,
  <div
    className="card cardStacked"
  >
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Stacked
    </div>
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Card
    </div>
  </div>,
  <div
    className="cardBase"
  >
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Base Card
    </div>
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      No Skin
    </div>
  </div>,
  <div
    className="card foo-bar"
  >
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Custom CSS Class
    </div>
    <div
      style={
        Object {
          "padding": 24,
        }
      }
    >
      Inspect to see foo-bar
    </div>
  </div>,
]
`;

exports[`Storyshots Grid Usage Examples 1`] = `
Array [
  <section>
    <h1>
      Basic Grid
    </h1>
    <p>
      <i>
        xs
      </i>
       = Extra Small. 
      <i>
        sm
      </i>
       = Small. 
      <i>
        lg
      </i>
       = Large.
    </p>
    <p>
      The following breakpoints can be overriden by redefining in your stylesheet and omitting the 
      <i>
        -default
      </i>
       part:
    </p>
    <pre>
      --agnosticui-default-sm-min: 576px; --agnosticui-default-md-min: 768px; --agnosticui-default-lg-min: 992px; --agnosticui-default-xl-min: 1200px;
    </pre>
    <div
      className="flexgrid-container"
    >
      <div
        className="DemoCol row"
      >
        <div
          className="col-xs-12 col-sm-4 col-lg-6"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={6}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-4 col-lg-6"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={6}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-4 col-lg-3"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={3}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-4 col-lg-3"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={3}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-4 col-lg-3"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={3}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-4 col-lg-3"
        >
          <p
            className="Field"
          >
            xs={12} sm={4} lg={3}
          </p>
        </div>
      </div>
    </div>
  </section>,
  <section>
    <h1>
      Complex
    </h1>
    <p>
      Not that you'd want this level of complexity, but it is available:
    </p>
    <div
      className="flexgrid-container"
    >
      <div
        className="DemoCol row"
      >
        <div
          className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
        >
          <p
            className="Field"
          >
            xs={12} sm={8} md={4} lg={3} xl={2}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
        >
          <p
            className="Field"
          >
            xs={12} sm={8} md={4} lg={3} xl={2}
          </p>
        </div>
        <div
          className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
        >
          <p
            className="Field"
          >
            xs={12} sm={8} md={4} lg={3} xl={2}
          </p>
        </div>
      </div>
    </div>
  </section>,
  <section>
    <h1>
      Offsets
    </h1>
    <div
      className="flexgrid-container"
    >
      <div
        className="DemoCol row"
      >
        <div
          className="col-sm-2"
          style={
            Object {
              "border": "1px solid #f7cac9",
            }
          }
        >
          <p>
            sm=
            2
          </p>
        </div>
        <div
          className="col-sm-2 col-sm-offset-1"
          style={
            Object {
              "border": "1px solid #39cccc",
            }
          }
        >
          <p>
            sm=
            2
             smOffset=
            1
          </p>
        </div>
        <div
          className="col-sm-2 col-sm-offset-1"
          style={
            Object {
              "border": "1px solid #7fdbff",
            }
          }
        >
          <p>
            sm=
            2
             smOffset=
            1
          </p>
        </div>
        <div
          className="col-sm-2 col-sm-offset-1"
          style={
            Object {
              "border": "1px solid #ff6f61",
            }
          }
        >
          <p>
            sm=
            2
             smOffset=
            1
          </p>
        </div>
      </div>
    </div>
    <p>
      See 
      <a
        href="https://evgenyrodionov.github.io/flexboxgrid2/"
      >
        flexboxgrid2
      </a>
       for more examples.
    </p>
  </section>,
]
`;

exports[`Storyshots Header Header And Nav 1`] = `
Array [
  <header
    className="header custom-global-css-class"
  >
    <div
      className="headerContent"
    >
      <div
        style={
          Object {
            "padding": 24,
          }
        }
      >
        LOGO
      </div>
      <nav
        className="headerNav"
      >
        <ul
          style={
            Object {
              "display": "inline-flex",
              "listStyle": "none",
            }
          }
        >
          <li
            style={
              Object {
                "marginRight": 8,
              }
            }
          >
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              Home
            </a>
          </li>
          <li
            style={
              Object {
                "marginRight": 8,
              }
            }
          >
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              Services
            </a>
          </li>
          <li
            style={
              Object {
                "marginRight": 8,
              }
            }
          >
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              About
            </a>
          </li>
          <li
            style={
              Object {
                "marginRight": 8,
              }
            }
          >
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              Contact
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>,
  <header
    className="headerBase"
  >
    <div
      className="headerContent"
    >
      <div
        style={
          Object {
            "padding": 24,
          }
        }
      >
        NO-Skinz
      </div>
      <nav
        className="headerNav"
      >
        <ul>
          <li>
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              Not Skinned
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>,
  <header
    className="header sticky"
  >
    <div
      className="headerContent"
    >
      <div
        style={
          Object {
            "padding": 24,
          }
        }
      >
        Logo
      </div>
      <nav
        className="headerNav"
      >
        <ul>
          <li>
            <a
              href="#"
              style={
                Object {
                  "color": "#333333",
                  "textDecoration": "none",
                }
              }
            >
              Sticky
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>,
]
`;

exports[`Storyshots Progress All 1`] = `
Array [
  <progress
    className="progressBar"
    max={100}
    value={30}
  />,
  <progress
    className="progressBar foo-bar"
    max={100}
    value={30}
  />,
  <progress
    className="progressBar foo-bar"
    max={100}
    value={0}
  />,
  <progress
    className="progressBar foo-bar"
    max={100}
    value={100}
  />,
]
`;