Add addon implementation

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.browserslistrc

@@ -0,0 +1 @@
+> 0.25%

.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+build
+builds
+scripts
+config
+lib
+dist
+*.config.*

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "plugins": [
+    "import",
+    "compat"
+  ],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/test/*", "**/*.jest.*", "**/*.test.*"]}],
+    "compat/compat": "error",
+    "max-len": ["error", { "code": 120 }]
+  },
+  "settings": {
+    "polyfills": ["promises"]
+  }
+}

.gitignore

@@ -1,3 +1,9 @@
+node_modules
+dist
+lib
+yarn-error*
+.DS_Store
+
 # Logs
 logs
 *.log

.npmignore

@@ -0,0 +1,5 @@
+*.log
+node_modules
+target
+reports
+tests/**/__snapshots__/

.nvmrc

@@ -0,0 +1 @@
+lts/*

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "storybook-addon-goto-iframe",
+  "version": "1.1.0",
+  "main": "dist/register.js",
+  "author": "Cody Price <[email protected]>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dev-cprice/storybook-addon-goto-iframe.git"
+  },
+  "homepage": "https://github.com/dev-cprice/storybook-addon-goto-iframe",
+  "keywords": [
+    "addon",
+    "storybook"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "register.js"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.4.11"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.0",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.10.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-compat": "^2.6.3",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
+    "react": "^16.6.3"
+  },
+  "peerDependencies": {
+    "react": "^16"
+  },
+  "scripts": {
+    "compile": "babel src --out-dir dist --copy-files",
+    "precompile": "rm -rf dist",
+    "lint": "eslint src",
+    "prepublishOnly": "yarn run lint && yarn run compile"
+  }
+}

register.js

@@ -0,0 +1 @@
+require('./dist/register.js');

src/components/button/Button.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import buttonStyle, { hoverButtonStyle } from './ButtonStyles';
+
+const propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+class Button extends Component {
+  static propTypes = propTypes;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHovered: false,
+    }
+  }
+
+  toggleHover = () => {
+    this.setState(({ isHovered }) => ({ isHovered: !isHovered }));
+  }
+
+  render() {
+    const { href, children } = this.props;
+
+    const hoveredStyle = this.state.isHovered ? hoverButtonStyle : {};
+
+    const style = {
+      ...buttonStyle,
+      ...hoveredStyle,
+    };
+
+    return (
+      <a href={href} style={style} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
+        {children}
+      </a>
+    );
+  }
+}
+
+export default Button;

src/components/button/ButtonStyles.js

@@ -0,0 +1,29 @@
+export default {
+  backgroundColor: '#0c5fd0',
+  color: '#fff',
+  borderClip: 'border-box',
+  borderRadius: '0.1875rem',
+  borderStyle: 'none',
+  boxShadow: [
+    '0px 3px 1px -2px rgba(0, 0, 0, 0.2)',
+    '0px 2px 2px 0px rgba(0, 0, 0, 0.14)',
+    '0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
+  ].join(', '),
+  cursor: 'pointer',
+  display: 'inline-block',
+  fontFamily: 'sans-serif',
+  fontSize: '14px',
+  outline: 'none',
+  padding: '8px',
+  textAlign: 'center',
+  textDecoration: 'none',
+  textTransform: 'uppercase',
+};
+
+export const hoverButtonStyle = {
+  boxShadow: [
+    '0px 5px 5px -3px rgba(0, 0, 0, 0.2)',
+    '0px 8px 10px 1px rgba(0, 0, 0, 0.14)',
+    '0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
+  ].join(', '),
+};

src/components/panel/Panel.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../button/Button';
+import panelStyle, { centeredStyle, descriptionStyle } from './PanelStyles';
+
+const propTypes = {
+  api: PropTypes.shape({
+    onStory: PropTypes.func,
+  }).isRequired,
+};
+
+class Panel extends Component {
+  static propTypes = propTypes;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: '',
+    };
+  }
+
+  componentDidMount() {
+    const { api: { onStory } } = this.props;
+    onStory((kind, story) => this.updateUrl(kind, story));
+  }
+
+  componentWillUnmount() {
+    this.setState({ url: '' });
+  }
+
+  updateUrl = (storyPath, storyName) => {
+    const selectedKind = storyPath.replace(/\//g, '%2F');
+    const selectedStory = storyName.replace(/ /g, '%20');
+    const url = `iframe.html?selectedKind=${selectedKind}&selectedStory=${selectedStory}`
+
+    this.setState({ url });
+  }
+
+  render() {
+    const { url } = this.state;
+
+    return (
+      <div style={panelStyle}>
+        <p>Use this addon to navigate to the selected story's iframe.</p>
+        <p style={descriptionStyle}>This is useful for testing accessibility (the Storybook UI has WCAG/508 violations) or when you need a larger window size than Storybook allows for.</p>
+        <div style={centeredStyle}>
+          <Button href={url}>Go to Story Iframe</Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Panel;

src/components/panel/PanelStyles.js

@@ -0,0 +1,13 @@
+export const centeredStyle = {
+  textAlign: 'center',
+};
+
+export const descriptionStyle = {
+  color: 'rgba(0, 0, 0, 0.54)',
+};
+
+export default {
+  color: 'rgba(0, 0, 0, 0.87)',
+  fontFamily: 'sans-serif',
+  margin: '16px',
+};

src/constants.js

@@ -0,0 +1,5 @@
+export const ADDON_TITLE = 'Go To Story Iframe';
+
+export const ADDON_ID = 'dev-cprice/story-iframe';
+
+export const PANEL_ID = `${ADDON_ID}/panel`;

src/register.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import Panel from './components/panel/Panel';
+import { ADDON_ID, ADDON_TITLE, PANEL_ID } from './constants';
+
+addons.register(ADDON_ID, api => {
+  addons.addPanel(PANEL_ID, {
+    title: ADDON_TITLE,
+    render: () => <Panel api={api} />,
+  });
+});