import { Canvas, Meta, Story } from "@storybook/addon-docs";
import LinkTo from "@storybook/addon-links/react";

import LogoUrl from "../../public/amp-logo.png";

<Meta
  title="Storybook AMP addon"
  id="hello"
  parameters={{
    viewport: {
      defaultViewport: "responsive",
    },
    amp: {
      isEnabled: false,
    },
    previewTabs: {
      canvas: {
        title: "Docs",
      },
    },
    options: {
      isToolshown: false,
      showPanel: false,
    },
  }}
/>

<img src={LogoUrl} style={{ float: "left", width: 80, marginRight: 20 }} />

# Storybook AMP

Storybook addon for render AMP html ready stories using React.

<br />

---

<br />
<br />

### Examples Components

<br />

##### AMP Websites
<ul>
  <li>
    <LinkTo kind="Components/Websites/amp-accordion" story="base">
      amp-accordion
    </LinkTo>
  </li>
  <li>
    <LinkTo kind="Components/Websites/amp-autocomplete" story="base">
      amp-autocomplete
    </LinkTo>
  </li>
  <li>
    <LinkTo kind="Components/Websites/amp-carousel" story="base">
      amp-carousel
    </LinkTo>
  </li>
  <li>
    <LinkTo kind="Components/Websites/amp-date-picker" story="base">
      amp-date-picker
    </LinkTo>
  </li>
</ul>

##### AMP Email
<ul>
  <li>
    <LinkTo kind="Components/Email/amp-accordion" story="base">
      amp-accordion
    </LinkTo>
  </li>
</ul>

##### AMP Ads
<ul>
  <li>
    <LinkTo kind="Components/Ads/amp-carousel" story="base">
      amp-carousel
    </LinkTo>
  </li>
</ul>


<br />

### Tested Addons Compatibility

<ul>
  <li>
    <LinkTo kind="Addons/Viewport" story="base">
      Addon Viewport
    </LinkTo>
  </li>
  <li>
    <LinkTo kind="Addons/Controls" story="base">
      Addon Controls
    </LinkTo>
  </li>
  <li>
    Addon Backgrounds
  </li>
  <li>
    Addon Storysource
  </li>
  <li>
    Addon Docs (Coming soon)
  </li>
  <li>
    Addon Toolbars (Coming soon)
  </li>
  <li>
    Addon Accessibility (Coming soon)
  </li>
</ul>
