Storybook addon for AMP (Accelerated Mobile Pages). Allows to display in your stories AMP Html components generated with React.
- Deliver in each story the output code (AMP ready) resulting from the SSR.
- Works with AMP websites, AMP email and AMP ads
- Realtime AMP validation.
- Adds addon panel to also validate the story (using online AMP Validator) and view the output code.
- Support Styled Components using a custom render function
demo.onwidget.com/storybook-amp/
npm install -D storybook-amp
Next, update .storybook/main.js
to the following:
// .storybook/main.js
module.exports = {
stories: [
// ...
],
addons: [
// Other Storybook addons
'storybook-amp', // 👈 The addon registered here
],
};
To set custom settings, use the amp
parameter.
// .storybook/preview.js
const scripts = '';
const styles = '';
export const parameters = {
// Other defined parameters
amp: { // 👈 The addon parameters here
isEnabled: true, // Enable the addon, false by default (boolean)
scripts, // Global scripts to add, empty by default (string)
styles, // Custom css styles, empty by default (string)
},
};
You can use the amp
parameter to override settings on each story individually:
// Story example
export default {
title: "Components/amp-youtube",
parameters: {
amp: {
scripts: // 👈 Script needed by the story
`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`,
},
},
};
export const Story = (args) => (
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid='lBTCB7yLs8Y'
></amp-youtube>
)
For more examples and configurations go to the Demo
- Addon Viewport
- Addon Controls
- Addon Backgrounds
- Addon Storysource
- Addon Docs (Coming soon)
- Addon Toolbars (Coming soon)
- Addon Accessibility (Coming soon)
- Addon Chromatic (Coming soon)