welcome.stories.storyshot

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

exports[`Storyshots Welcome to Storybook 1`] = `
<article
  style={
    Object {
      "backgroundColor": "#ffffff",
      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
      "lineHeight": 1.4,
      "padding": 15,
    }
  }
>
  <h1>
    Welcome to storybook for Preact
  </h1>
  <img
    alt="Preact logo"
    src="./logo.png"
    style={
      Object {
        "display": "block",
        "height": "150px",
        "margin": "0 auto",
        "text-align": "center",
      }
    }
  />
  <p>
    This is a UI component dev environment for your Preact app.
  </p>
  <p>
    We've added some basic stories inside the 
    <code
      style={
        Object {
          "backgroundColor": "#f3f2f2",
          "border": "1px solid #eae9e9",
          "borderRadius": 4,
          "color": "#3a3a3a",
          "fontSize": 15,
          "fontWeight": 600,
          "padding": "2px 5px",
        }
      }
    >
      src/stories
    </code>
     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 
    <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>
     for a component called 
    <code
      style={
        Object {
          "backgroundColor": "#f3f2f2",
          "border": "1px solid #eae9e9",
          "borderRadius": 4,
          "color": "#3a3a3a",
          "fontSize": 15,
          "fontWeight": 600,
          "padding": "2px 5px",
        }
      }
    >
      Button
    </code>
    .
  </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 
    <code
      style={
        Object {
          "backgroundColor": "#f3f2f2",
          "border": "1px solid #eae9e9",
          "borderRadius": 4,
          "color": "#3a3a3a",
          "fontSize": 15,
          "fontWeight": 600,
          "padding": "2px 5px",
        }
      }
    >
      Button
    </code>
     stories located at 
    <code
      style={
        Object {
          "backgroundColor": "#f3f2f2",
          "border": "1px solid #eae9e9",
          "borderRadius": 4,
          "color": "#3a3a3a",
          "fontSize": 15,
          "fontWeight": 600,
          "padding": "2px 5px",
        }
      }
    >
      src/stories/1-Button.stories.js
    </code>
    .)
  </p>
  <p>
    Usually we create stories with smaller UI components in the app.
    <br />
    Have a look at the 
    <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>
     section in our documentation.
  </p>
  <p
    style={
      Object {
        "opacity": 0.5,
      }
    }
  >
    <b>
      NOTE:
    </b>
    <br />
    Have a look at the 
    <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>
     to add webpack loaders and plugins you are using in this project.
  </p>
</article>
`;