storyshot.enzyme.test.js.snap

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

exports[`Storyshots Another Button with some emoji 1`] = `
<Button
  onClick={[Function]}
>
  <button
    onClick={[Function]}
    style={
      Object {
        "backgroundColor": "#FFFFFF",
        "border": "1px solid #eee",
        "borderRadius": 3,
        "cursor": "pointer",
        "fontSize": 15,
        "margin": 10,
        "padding": "3px 10px",
      }
    }
    type="button"
  >
    <span
      aria-label="so cool"
      role="img"
    >
      😀 😎 👍 💯
    </span>
  </button>
</Button>
`;

exports[`Storyshots Another Button with text 1`] = `
<Button
  onClick={[Function]}
>
  <button
    onClick={[Function]}
    style={
      Object {
        "backgroundColor": "#FFFFFF",
        "border": "1px solid #eee",
        "borderRadius": 3,
        "cursor": "pointer",
        "fontSize": 15,
        "margin": 10,
        "padding": "3px 10px",
      }
    }
    type="button"
  >
    Hello Button
  </button>
</Button>
`;

exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
<AsyncTestComponent>
  <h1 />
</AsyncTestComponent>
`;

exports[`Storyshots Button with some emoji 1`] = `
<Button
  onClick={[Function]}
>
  <button
    onClick={[Function]}
    style={
      Object {
        "backgroundColor": "#FFFFFF",
        "border": "1px solid #eee",
        "borderRadius": 3,
        "cursor": "pointer",
        "fontSize": 15,
        "margin": 10,
        "padding": "3px 10px",
      }
    }
    type="button"
  >
    <span
      aria-label="so cool"
      role="img"
    >
      😀 😎 👍 💯
    </span>
  </button>
</Button>
`;

exports[`Storyshots Button with text 1`] = `
<Button
  onClick={[Function]}
>
  <button
    onClick={[Function]}
    style={
      Object {
        "backgroundColor": "#FFFFFF",
        "border": "1px solid #eee",
        "borderRadius": 3,
        "cursor": "pointer",
        "fontSize": 15,
        "margin": 10,
        "padding": "3px 10px",
      }
    }
    type="button"
  >
    Hello Button
  </button>
</Button>
`;

exports[`Storyshots Welcome to Storybook 1`] = `
<Welcome
  showApp={[Function]}
>
  <Main>
    <article
      style={
        Object {
          "backgroundColor": "#fff",
          "color": "#000",
          "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
          "lineHeight": 1.4,
          "padding": 15,
        }
      }
    >
      <Title>
        <h1>
          Welcome to storybook
        </h1>
      </Title>
      <p>
        This is a UI component dev environment for your app.
      </p>
      <p>
        We've added some basic stories inside the 
        <InlineCode>
          <code
            style={
              Object {
                "backgroundColor": "#f3f2f2",
                "border": "1px solid #eae9e9",
                "borderRadius": 4,
                "color": "#3a3a3a",
                "fontSize": 15,
                "fontWeight": 600,
                "padding": "2px 5px",
              }
            }
          >
            src/stories
          </code>
        </InlineCode>
         directory.
        <br />
        A story is a single state of one or more UI components. You can have as many stories as you want.
        <br />
        (Basically a story is like a visual test case.)
      </p>
      <p>
        See these sample 
        <NavButton
          onClick={[Function]}
        >
          <button
            onClick={[Function]}
            style={
              Object {
                "backgroundColor": "transparent",
                "borderBottom": "1px solid #1474f3",
                "borderLeft": "none",
                "borderRight": "none",
                "borderTop": "none",
                "color": "#1474f3",
                "cursor": "pointer",
                "font": "inherit",
                "padding": 0,
                "paddingBottom": 2,
                "textDecoration": "none",
              }
            }
            type="button"
          >
            stories
          </button>
        </NavButton>
         for a component called
         
        <InlineCode>
          <code
            style={
              Object {
                "backgroundColor": "#f3f2f2",
                "border": "1px solid #eae9e9",
                "borderRadius": 4,
                "color": "#3a3a3a",
                "fontSize": 15,
                "fontWeight": 600,
                "padding": "2px 5px",
              }
            }
          >
            Button
          </code>
        </InlineCode>
        .
      </p>
      <p>
        Just like that, you can add your own components as stories.
        <br />
        You can also edit those components and see changes right away.
        <br />
        (Try editing the 
        <InlineCode>
          <code
            style={
              Object {
                "backgroundColor": "#f3f2f2",
                "border": "1px solid #eae9e9",
                "borderRadius": 4,
                "color": "#3a3a3a",
                "fontSize": 15,
                "fontWeight": 600,
                "padding": "2px 5px",
              }
            }
          >
            Button
          </code>
        </InlineCode>
         stories located at
         
        <InlineCode>
          <code
            style={
              Object {
                "backgroundColor": "#f3f2f2",
                "border": "1px solid #eae9e9",
                "borderRadius": 4,
                "color": "#3a3a3a",
                "fontSize": 15,
                "fontWeight": 600,
                "padding": "2px 5px",
              }
            }
          >
            src/stories/index.js
          </code>
        </InlineCode>
        .)
      </p>
      <p>
        Usually we create stories with smaller UI components in the app.
        <br />
        Have a look at the
         
        <Link
          href="https://storybook.js.org/basics/writing-stories"
          rel="noopener noreferrer"
          target="_blank"
        >
          <a
            href="https://storybook.js.org/basics/writing-stories"
            rel="noopener noreferrer"
            style={
              Object {
                "borderBottom": "1px solid #1474f3",
                "color": "#1474f3",
                "paddingBottom": 2,
                "textDecoration": "none",
              }
            }
            target="_blank"
          >
            Writing Stories
          </a>
        </Link>
         
        section in our documentation.
      </p>
      <Note>
        <p
          style={
            Object {
              "opacity": 0.5,
            }
          }
        >
          <b>
            NOTE:
          </b>
          <br />
          Have a look at the 
          <InlineCode>
            <code
              style={
                Object {
                  "backgroundColor": "#f3f2f2",
                  "border": "1px solid #eae9e9",
                  "borderRadius": 4,
                  "color": "#3a3a3a",
                  "fontSize": 15,
                  "fontWeight": 600,
                  "padding": "2px 5px",
                }
              }
            >
              .storybook/webpack.config.js
            </code>
          </InlineCode>
           to add webpack loaders and plugins you are using in this project.
        </p>
      </Note>
    </article>
  </Main>
</Welcome>
`;