, HTMLParagraphElement>
+) => (
(
/>
);
-const InlineCode = props => (
+const InlineCode = (
+ props?: React.DetailedHTMLProps, HTMLElement>
+) => (
(
/>
);
-const Link = ({ children, href, ...props }) => (
+const Link = ({
+ children,
+ href,
+ target,
+ ...props
+}: {
+ children: string;
+ href: string;
+ target: string;
+ rel: string;
+ props?: React.DetailedHTMLProps, HTMLAnchorElement>;
+}) => (
(
+const NavButton = ({
+ children,
+ onClick,
+ ...props
+}: {
+ children: string;
+ onClick: (event: React.MouseEvent) => void;
+ props?: React.DetailedHTMLProps, HTMLButtonElement>;
+}) => (
(
+const Welcome = ({ showApp }: { showApp: () => void }) => (
Welcome to storybook
This is a UI component dev environment for your app.
diff --git a/app/react/src/server/__mocks__/mockConfig.js b/app/react/src/server/__mocks__/mockConfig.ts
similarity index 100%
rename from app/react/src/server/__mocks__/mockConfig.js
rename to app/react/src/server/__mocks__/mockConfig.ts
diff --git a/app/react/src/server/__mocks__/mockRules.js b/app/react/src/server/__mocks__/mockRules.ts
similarity index 100%
rename from app/react/src/server/__mocks__/mockRules.js
rename to app/react/src/server/__mocks__/mockRules.ts
diff --git a/app/react/src/server/build.js b/app/react/src/server/build.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/react/src/server/build.js
rename to app/react/src/server/build.ts
diff --git a/app/react/src/server/cra-config.test.js b/app/react/src/server/cra-config.test.ts
similarity index 95%
rename from app/react/src/server/cra-config.test.js
rename to app/react/src/server/cra-config.test.ts
index f7afea9a12e8..35eb39a0db03 100644
--- a/app/react/src/server/cra-config.test.js
+++ b/app/react/src/server/cra-config.test.ts
@@ -18,7 +18,7 @@ jest.mock('mini-css-extract-plugin', () => {});
const SCRIPT_PATH = '.bin/react-scripts';
-const stripCwd = loaderPath => loaderPath.replace(process.cwd(), '');
+const stripCwd = (loaderPath: string) => loaderPath.replace(process.cwd(), '');
describe('cra-config', () => {
describe('when used with the default react-scripts package', () => {
@@ -92,7 +92,9 @@ exit $ret`
// Allows using TypeScript in the `.storybook` (or config) folder.
it('should add the Storybook config directory to `include`', () => {
const rules = getTypeScriptRules(mockRules, './.storybook');
- expect(rules[0].include.findIndex(string => string.includes('.storybook'))).toEqual(1);
+ expect(rules[0].include.findIndex((string: string) => string.includes('.storybook'))).toEqual(
+ 1
+ );
});
it('should get the baseUrl from a tsconfig.json', () => {
diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.ts
similarity index 90%
rename from app/react/src/server/cra-config.js
rename to app/react/src/server/cra-config.ts
index 15be0ff52571..330cc7f9738c 100644
--- a/app/react/src/server/cra-config.js
+++ b/app/react/src/server/cra-config.ts
@@ -1,6 +1,7 @@
import fs from 'fs';
import path from 'path';
import semver from 'semver';
+import { Configuration, Plugin, RuleSetRule } from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import { normalizeCondition } from 'webpack/lib/RuleSet';
import { logger } from '@storybook/node-logger';
@@ -13,9 +14,9 @@ const cssExtensions = ['.css', '.scss', '.sass'];
const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass'];
const typeScriptExtensions = ['.ts', '.tsx'];
-let reactScriptsPath;
+let reactScriptsPath: string;
-export function getReactScriptsPath({ noCache } = {}) {
+export function getReactScriptsPath({ noCache }: { noCache?: boolean } = {}) {
if (reactScriptsPath && !noCache) return reactScriptsPath;
let reactScriptsScriptPath = fs.realpathSync(
@@ -69,8 +70,8 @@ export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
}
}
-export const getRules = extensions => rules =>
- rules.reduce((craRules, rule) => {
+export const getRules = (extensions: string[]) => (rules: RuleSetRule[]) =>
+ rules.reduce((craRules: any, rule: any) => {
// If at least one extension satisfies the rule test, the rule is one
// we want to extract
if (rule.test && extensions.some(normalizeCondition(rule.test))) {
@@ -93,7 +94,7 @@ export const getRules = extensions => rules =>
const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
-export const getTypeScriptRules = (webpackConfigRules, configDir) => {
+export const getTypeScriptRules = (webpackConfigRules: RuleSetRule[], configDir: string) => {
const rules = getRules(typeScriptExtensions)(webpackConfigRules);
// We know CRA only has one rule targetting TS for now, which is the first rule.
const babelRule = rules[0];
@@ -126,7 +127,7 @@ export const getModulePath = () => {
return false;
};
-function mergePlugins(basePlugins, additionalPlugins) {
+function mergePlugins(basePlugins: Plugin[], additionalPlugins: Plugin[]) {
return [...basePlugins, ...additionalPlugins].reduce((plugins, plugin) => {
if (
plugins.some(includedPlugin => includedPlugin.constructor.name === plugin.constructor.name)
@@ -137,7 +138,7 @@ function mergePlugins(basePlugins, additionalPlugins) {
}, []);
}
-export function getCraWebpackConfig(mode) {
+export function getCraWebpackConfig(mode: 'development' | 'production' | 'none') {
const pathToReactScripts = getReactScriptsPath();
const craWebpackConfig =
@@ -159,7 +160,7 @@ export function getCraWebpackConfig(mode) {
return webpackConfig;
}
-export function applyCRAWebpackConfig(baseConfig, configDir) {
+export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: string): Configuration {
// Check if the user can use TypeScript (react-scripts version 2.1+).
const hasTsSupport = isReactScriptsInstalled('2.1.0');
diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.ts
similarity index 81%
rename from app/react/src/server/framework-preset-cra.js
rename to app/react/src/server/framework-preset-cra.ts
index c742566d92a9..18c075f7c874 100644
--- a/app/react/src/server/framework-preset-cra.js
+++ b/app/react/src/server/framework-preset-cra.ts
@@ -1,8 +1,9 @@
import path from 'path';
+import { Configuration } from 'webpack';
import { logger } from '@storybook/node-logger';
import { applyCRAWebpackConfig, getReactScriptsPath, isReactScriptsInstalled } from './cra-config';
-export function webpackFinal(config, { configDir }) {
+export function webpackFinal(config: Configuration, { configDir }: { configDir: string }) {
if (!isReactScriptsInstalled()) {
logger.info('=> Using base config because react-scripts is not installed.');
return config;
@@ -12,7 +13,7 @@ export function webpackFinal(config, { configDir }) {
return applyCRAWebpackConfig(config, configDir);
}
-export function managerWebpack(config) {
+export function managerWebpack(config: Configuration) {
if (!isReactScriptsInstalled()) {
return config;
}
@@ -25,7 +26,7 @@ export function managerWebpack(config) {
};
}
-export function babelDefault(config) {
+export function babelDefault(config: Configuration) {
if (!isReactScriptsInstalled()) {
return config;
}
diff --git a/app/react/src/server/framework-preset-react-docgen.test.js b/app/react/src/server/framework-preset-react-docgen.test.ts
similarity index 93%
rename from app/react/src/server/framework-preset-react-docgen.test.js
rename to app/react/src/server/framework-preset-react-docgen.test.ts
index 359f27689de9..1b1f0e27ca87 100644
--- a/app/react/src/server/framework-preset-react-docgen.test.js
+++ b/app/react/src/server/framework-preset-react-docgen.test.ts
@@ -1,3 +1,4 @@
+import { TransformOptions } from '@babel/core';
import * as preset from './framework-preset-react-docgen';
describe('framework-preset-react-docgen', () => {
@@ -28,10 +29,10 @@ describe('framework-preset-react-docgen', () => {
});
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
- const babelConfig = {
+ const babelConfig: TransformOptions = {
babelrc: false,
presets: ['env', 'foo-preset'],
- plugins: 'bar-plugin',
+ plugins: ['bar-plugin'],
};
const config = preset.babel(babelConfig);
diff --git a/app/react/src/server/framework-preset-react-docgen.js b/app/react/src/server/framework-preset-react-docgen.ts
similarity index 84%
rename from app/react/src/server/framework-preset-react-docgen.js
rename to app/react/src/server/framework-preset-react-docgen.ts
index 5d344f6cf927..08a8fecc07f0 100644
--- a/app/react/src/server/framework-preset-react-docgen.js
+++ b/app/react/src/server/framework-preset-react-docgen.ts
@@ -1,4 +1,6 @@
-export function babel(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babel(config: TransformOptions) {
// Ensure plugins are defined or fallback to an array to avoid empty values.
const babelConfigPlugins = config.plugins || [];
diff --git a/app/react/src/server/framework-preset-react.js b/app/react/src/server/framework-preset-react.ts
similarity index 77%
rename from app/react/src/server/framework-preset-react.js
rename to app/react/src/server/framework-preset-react.ts
index c0be957bc4f5..23d9151b636b 100644
--- a/app/react/src/server/framework-preset-react.js
+++ b/app/react/src/server/framework-preset-react.ts
@@ -1,4 +1,6 @@
-export function babelDefault(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babelDefault(config: TransformOptions) {
return {
...config,
presets: [
diff --git a/app/react/src/server/index.js b/app/react/src/server/index.ts
old mode 100755
new mode 100644
similarity index 100%
rename from app/react/src/server/index.js
rename to app/react/src/server/index.ts
diff --git a/app/react/src/server/options.js b/app/react/src/server/options.ts
similarity index 100%
rename from app/react/src/server/options.js
rename to app/react/src/server/options.ts
diff --git a/app/react/src/typings.d.ts b/app/react/src/typings.d.ts
new file mode 100644
index 000000000000..10c6c8e3f99c
--- /dev/null
+++ b/app/react/src/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '@storybook/core/*';
+declare module 'global';
+// todo check for correct types
+declare module 'webpack/lib/RuleSet';
diff --git a/app/react/tsconfig.json b/app/react/tsconfig.json
new file mode 100644
index 000000000000..29fcd6ad6a26
--- /dev/null
+++ b/app/react/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "types": ["webpack-env"],
+ "resolveJsonModule": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "src/**/*.test.*"
+ ]
+}
diff --git a/yarn.lock b/yarn.lock
index 3de24a16bfd6..45b7be438c5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3606,6 +3606,13 @@
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.132.tgz#8ce45ca8745ff2e004fac0de0ab46f61e390ffa0"
integrity sha512-RNUU1rrh85NgUJcjOOr96YXr+RHwInGbaQCZmlitqOaCKXffj8bh+Zxwuq5rjDy5OgzFldDVoqk4pyLEDiwxIw==
+"@types/mini-css-extract-plugin@^0.2.1":
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.1.tgz#f833abd67e8d6e40efb08a0455be252db063d475"
+ integrity sha512-KJOp7SZusMEGpiE5VprIUBcXtr3okLeVsJOykLGpcnrc7ivoWg9+5vGAANSIPrwn06HqXMruCYqzEZl3/uvwwg==
+ dependencies:
+ "@types/webpack" "*"
+
"@types/minimatch@*", "@types/minimatch@^3.0.3":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -3621,6 +3628,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.2.tgz#3452a24edf9fea138b48fad4a0a028a683da1e40"
integrity sha512-5tabW/i+9mhrfEOUcLDu2xBPsHJ+X5Orqy9FKpale3SjDA17j5AEpYq5vfy3oAeAHGcvANRCO3NV3d2D6q3NiA==
+"@types/node@^12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.8.tgz#551466be11b2adc3f3d47156758f610bd9f6b1d8"
+ integrity sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==
+
"@types/node@^6.0.0":
version "6.14.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-6.14.6.tgz#31df045b4c7618ff74d84f542fc3d29445dd566b"
@@ -3830,7 +3842,7 @@
"@types/source-list-map" "*"
source-map "^0.6.1"
-"@types/webpack@^4.4.25":
+"@types/webpack@*", "@types/webpack@^4.4.25", "@types/webpack@^4.4.32":
version "4.4.32"
resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.4.32.tgz#2d460cd33a15e568e93f38de5e628cf846396c51"
integrity sha512-mNARoaSJTzbiHxtZbf9NULFilu2frqD+g9Iyl9V2jPYJWXi+AC3Hz8lQWPZ5LLtgUm7iF4SDDMB/1bPrbRQgFw==
From 82f241e2c007496eb8b0f0f049ba48eaee7e0f7e Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Tue, 11 Jun 2019 23:21:34 +0200
Subject: [PATCH 049/371] Add tests, docs, example
---
addons/cssresources/src/register.tsx | 3 +-
addons/notes/src/register.tsx | 3 +-
docs/src/pages/addons/using-addons/index.md | 23 +++
docs/src/pages/addons/writing-addons/index.md | 29 ++++
lib/addons/src/index.ts | 1 -
lib/api/src/modules/addons.ts | 23 +++
lib/api/src/tests/addons.test.js | 147 ++++++++++++++++++
lib/ui/src/containers/panel.js | 19 +--
lib/ui/src/containers/panel.stories.js | 22 +++
9 files changed, 249 insertions(+), 21 deletions(-)
create mode 100644 lib/api/src/tests/addons.test.js
create mode 100644 lib/ui/src/containers/panel.stories.js
diff --git a/addons/cssresources/src/register.tsx b/addons/cssresources/src/register.tsx
index 4c893c5ccc92..4366ea61801a 100644
--- a/addons/cssresources/src/register.tsx
+++ b/addons/cssresources/src/register.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { addons, types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { CssResourcePanel } from './css-resource-panel';
addons.register(ADDON_ID, api => {
@@ -10,5 +10,6 @@ addons.register(ADDON_ID, api => {
type: types.PANEL,
title: 'CSS resources',
render: ({ active }) => ,
+ paramKey: PARAM_KEY,
});
});
diff --git a/addons/notes/src/register.tsx b/addons/notes/src/register.tsx
index 17d3c8d4189f..0e56ab83ae1a 100644
--- a/addons/notes/src/register.tsx
+++ b/addons/notes/src/register.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import addons, { types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './shared';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
// TODO: fix eslint in tslint (igor said he fixed it, should ask him)
import Panel from './Panel';
@@ -14,6 +14,7 @@ export default function register(type: types) {
route: ({ storyId }) => `/info/${storyId}`, // todo add type
match: ({ viewMode }) => viewMode === 'info', // todo add type
render: ({ active }) => ,
+ paramKey: PARAM_KEY,
});
});
}
diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md
index 4fbe3455df2e..501f9f76735c 100644
--- a/docs/src/pages/addons/using-addons/index.md
+++ b/docs/src/pages/addons/using-addons/index.md
@@ -65,6 +65,29 @@ Then you'll be able to see those notes when you are viewing the story.
![Stories with notes](../static/stories-with-notes.png)
+## Disable the addon
+
+You can disable an addon panel for a story by adding a `disabled` parameter.
+
+```js
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+storiesOf('Button', module).add(
+ 'with some emoji',
+ () => (
+
+
+ 😀 😎 👍 💯
+
+
+ ),
+ { notes: { disabled: true } }
+);
+```
+
## Global Configuration
Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that.
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index eaa34bd36626..e634cd224023 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -110,6 +110,7 @@ addons.register(ADDON_ID, api => {
type: types.PANEL,
title,
render,
+ paramKey: PARAM_KEY,
});
});
```
@@ -259,6 +260,34 @@ storiesOf('Button', module)
});
```
+### Disabling an addon panel
+
+It's possible to disable an addon panel for a particular story.
+
+To offer that capability, you need to pass the paramKey when you register the panel
+```js
+addons.register(ADDON_ID, () => {
+ addons.add(PANEL_ID, {
+ type: types.PANEL,
+ title: 'My Addon',
+ render: () => Addon tab content
,
+ paramKey: 'myAddon',
+ });
+});
+```
+
+While adding a story, you can then pass a `disabled` parameter.
+
+```js
+storiesOf('Button', module)
+ .add('with text', () => Hello Button , {
+ myAddon: {
+ disabled: true,
+ },
+ });
+```
+
+
## Styling your addon
We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user!
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index 14f077b686da..4e593d6e8c3e 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -24,7 +24,6 @@ export interface Addon {
route?: (routeOptions: RouteOptions) => string;
match?: (matchOptions: MatchOptions) => boolean;
render: (renderOptions: RenderOptions) => ReactElement;
- paramKey?: string;
}
export type Loader = (api: API) => void;
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index d3ef5704a002..67e06a9ce14a 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -29,6 +29,7 @@ export interface Addon {
route?: (routeOptions: RouteOptions) => string;
match?: (matchOptions: MatchOptions) => boolean;
render: (renderOptions: RenderOptions) => ReactElement;
+ paramKey: string;
}
export interface Collection {
[key: string]: Addon;
@@ -41,10 +42,15 @@ interface Panels {
export interface SubAPI {
getElements: (type: Types) => Collection;
getPanels: () => Collection;
+ getPanelsForStory: (storyParameters: StoryParameters) => Collection;
getSelectedPanel: () => string;
setSelectedPanel: (panelName: string) => void;
}
+interface StoryParameters {
+ [key: string]: any;
+}
+
export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel?: string) {
const keys = Object.keys(panels);
@@ -62,6 +68,23 @@ export default ({ provider, store }: Module) => {
const api: SubAPI = {
getElements: type => provider.getElements(type),
getPanels: () => api.getElements(types.PANEL),
+ getPanelsForStory: (storyParameters: StoryParameters) => {
+ const panels = api.getPanels();
+ if (!panels || !storyParameters) {
+ return panels;
+ }
+
+ const filteredPanels: Collection = {};
+ Object.entries(panels).forEach(([id, panel]) => {
+ const { paramKey } = panel;
+ if (paramKey && storyParameters[paramKey] && storyParameters[paramKey].disabled) {
+ return;
+ }
+ filteredPanels[id] = panel;
+ });
+
+ return filteredPanels;
+ },
getSelectedPanel: () => {
const { selectedPanel } = store.getState();
return ensurePanel(api.getPanels(), selectedPanel, selectedPanel);
diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js
new file mode 100644
index 000000000000..0053f44471f4
--- /dev/null
+++ b/lib/api/src/tests/addons.test.js
@@ -0,0 +1,147 @@
+import initAddons, { types } from '../modules/addons';
+
+const PANELS = {
+ a11y: {
+ title: 'Accessibility',
+ paramKey: 'a11y',
+ },
+ actions: {
+ title: 'Actions',
+ paramKey: 'actions',
+ },
+ knobs: {
+ title: 'Knobs',
+ paramKey: 'knobs',
+ },
+};
+
+const provider = {
+ getElements(type) {
+ if (type === types.PANEL) {
+ return PANELS;
+ }
+ return null;
+ },
+};
+
+const store = {
+ getState: () => ({
+ selectedPanel: '',
+ }),
+ setState: jest.fn(),
+};
+
+describe('Addons API', () => {
+ describe('#getElements', () => {
+ it('should return provider elements', () => {
+ // given
+ const { api } = initAddons({ provider, store });
+
+ // when
+ const panels = api.getElements(types.PANEL);
+
+ // then
+ expect(panels).toBe(PANELS);
+ });
+ });
+
+ describe('#getPanels', () => {
+ it('should return provider panels', () => {
+ // given
+ const { api } = initAddons({ provider, store });
+
+ // when
+ const panels = api.getPanels();
+
+ // then
+ expect(panels).toBe(PANELS);
+ });
+ });
+
+ describe('#getPanelsForStory', () => {
+ it('should return all panels by default', () => {
+ // given
+ const { api } = initAddons({ provider, store });
+
+ // when
+ const filteredPanels = api.getPanelsForStory();
+
+ // then
+ expect(filteredPanels).toBe(PANELS);
+ });
+
+ it('should filter disabled addons', () => {
+ // given
+ const { api } = initAddons({ provider, store });
+ const storyParameters = {
+ a11y: { disabled: true },
+ };
+
+ // when
+ const filteredPanels = api.getPanelsForStory(storyParameters);
+
+ // then
+ expect(filteredPanels).toEqual({
+ actions: PANELS.actions,
+ knobs: PANELS.knobs,
+ });
+ });
+ });
+
+ describe('#getSelectedPanel', () => {
+ it('should return provider panels', () => {
+ // given
+ const storeWithSelectedPanel = {
+ getState: () => ({
+ selectedPanel: 'actions',
+ }),
+ setState: jest.fn(),
+ };
+ const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+
+ // when
+ const selectedPanel = api.getSelectedPanel();
+
+ // then
+ expect(selectedPanel).toBe('actions');
+ });
+
+ it('should return first panel when selected is not a panel', () => {
+ // given
+ const storeWithSelectedPanel = {
+ getState: () => ({
+ selectedPanel: 'unknown',
+ }),
+ setState: jest.fn(),
+ };
+ const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+
+ // when
+ const selectedPanel = api.getSelectedPanel();
+
+ // then
+ expect(selectedPanel).toBe('a11y');
+ });
+ });
+
+ describe('#setSelectedPanel', () => {
+ it('should set value inn store', () => {
+ // given
+ const setState = jest.fn();
+ const storeWithSelectedPanel = {
+ getState: () => ({
+ selectedPanel: 'actions',
+ }),
+ setState,
+ };
+ const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+ expect(setState).not.toHaveBeenCalled();
+
+ // when
+ api.setSelectedPanel('knobs');
+
+ // then
+ expect(setState).toHaveBeenCalledWith({ selectedPanel: 'knobs' }, { persistence: 'session' });
+ });
+ });
+});
diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js
index 2c8e60bfa041..6e6a5ceaafb7 100644
--- a/lib/ui/src/containers/panel.js
+++ b/lib/ui/src/containers/panel.js
@@ -10,25 +10,8 @@ const createPanelActions = memoize(1)(api => ({
togglePosition: () => api.togglePanelPosition(),
}));
-const filterPanel = (panels, storyParameters) => {
- if (!panels || !storyParameters) {
- return panels;
- }
-
- const filteredPanels = {};
- Object.entries(panels).forEach(([id, panel]) => {
- const { paramKey } = panel;
- const panelParameters = paramKey && storyParameters[paramKey];
- if (!panelParameters || !panelParameters.disabled) {
- filteredPanels[id] = panel;
- }
- });
-
- return filteredPanels;
-};
-
const mapper = ({ state, api }) => ({
- panels: filterPanel(api.getPanels(), api.getParameters(state.storyId)),
+ panels: api.getPanelsForStory(api.getParameters(state.storyId)),
selectedPanel: api.getSelectedPanel(),
panelPosition: state.layout.panelPosition,
actions: createPanelActions(api),
diff --git a/lib/ui/src/containers/panel.stories.js b/lib/ui/src/containers/panel.stories.js
new file mode 100644
index 000000000000..f920d6639ffb
--- /dev/null
+++ b/lib/ui/src/containers/panel.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('UI|Addon Panel', module)
+ .add('default', () => By default all addon panels are rendered
)
+ .add(
+ 'disable panel',
+ () => (
+
+ This story disables Actions and Accessibility panels
+
+ {`storiesOf('UI|Addon Panel', module)
+ .add(
+ 'my story',
+ ,
+ { a11y: { disable: true }, actions: { disable: true } }
+ );`}
+
+
+ ),
+ { a11y: { disabled: true }, actions: { disabled: true } }
+ );
From 79e58491feacb35e313e904a8bc5d0af514f6253 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 00:43:18 +0200
Subject: [PATCH 050/371] CLEANUP && FIX snapshots
---
addons/queryparams/src/index.ts | 2 --
.../addon-queryparams.stories.storyshot | 13 +++++++++++++
2 files changed, 13 insertions(+), 2 deletions(-)
create mode 100644 examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
diff --git a/addons/queryparams/src/index.ts b/addons/queryparams/src/index.ts
index 10ea12c0e31d..bdcc88545692 100644
--- a/addons/queryparams/src/index.ts
+++ b/addons/queryparams/src/index.ts
@@ -19,8 +19,6 @@ export const withQuery = makeDecorator({
const newQuery = qs.stringify(Object.assign({}, currentQuery, additionalQuery));
const newLocation = location.href.replace(location.search, `?${newQuery}`);
- console.log({ newLocation });
-
history.replaceState({}, document.title, newLocation);
return getStory(context);
diff --git a/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
new file mode 100644
index 000000000000..954331075904
--- /dev/null
+++ b/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|QueryParams mock is 4 1`] = `
+
+ This story should have an extra url query param: ?mock=4
+
+`;
+
+exports[`Storyshots Addons|QueryParams mock is true 1`] = `
+
+ This story should have an extra url query param: ?mock=truehttp://localhost/
+
+`;
From 70f932f150f07dda87809767e83c84d653738527 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 01:34:38 +0200
Subject: [PATCH 051/371] FIX syntax highlighter plain text not visible
---
.../tests/__snapshots__/storyshots.test.js.snap | 8 ++++----
lib/components/src/typography/DocumentFormatting.tsx | 2 +-
lib/ui/src/settings/__snapshots__/about.stories.storyshot | 4 ++--
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 37d15cd0840d..913118b84dc5 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -337,7 +337,7 @@ exports[`Storyshots Basics|DocumentFormatting withDOM 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
@@ -772,7 +772,7 @@ exports[`Storyshots Basics|DocumentFormatting withDOM 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
@@ -1533,7 +1533,7 @@ exports[`Storyshots Basics|DocumentFormatting withMarkdown 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
@@ -1968,7 +1968,7 @@ exports[`Storyshots Basics|DocumentFormatting withMarkdown 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index c1c9afa0ff94..1e5a0f56f08c 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -50,7 +50,7 @@ const Wrapper = styled.div(
margin: 0;
white-space: pre-wrap;
- color: ${props.theme.color.darkest};
+ color: inherit;
font-size: 13px;
line-height: 19px;
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 2289a015bfb8..2a58323dd789 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -990,7 +990,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
@@ -2519,7 +2519,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
padding: 15px;
margin: 0;
white-space: pre-wrap;
- color: #333333;
+ color: inherit;
font-size: 13px;
line-height: 19px;
}
From 355990fde1002a8dd138508a7b11e211c4a2a84f Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Wed, 12 Jun 2019 00:51:10 +0000
Subject: [PATCH 052/371] Bump global from 4.3.2 to 4.4.0 in /docs
Bumps [global](https://github.com/Raynos/global) from 4.3.2 to 4.4.0.
- [Release notes](https://github.com/Raynos/global/releases)
- [Commits](https://github.com/Raynos/global/compare/v4.3.2...v4.4.0)
Signed-off-by: dependabot-preview[bot]
---
docs/package.json | 2 +-
docs/yarn.lock | 10 +++++++++-
2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index 58765a611b20..bc8148d766f5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -32,7 +32,7 @@
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
- "global": "^4.3.2",
+ "global": "^4.4.0",
"html-react-parser": "^0.7.0",
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 44f996b61aa6..77f80416cce6 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -5166,7 +5166,15 @@ global-prefix@^1.0.1:
is-windows "^1.0.1"
which "^1.2.14"
-global@^4.3.0, global@^4.3.2, global@~4.3.0:
+global@^4.3.0, global@^4.3.2, global@^4.4.0:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+ integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+ dependencies:
+ min-document "^2.19.0"
+ process "^0.11.10"
+
+global@~4.3.0:
version "4.3.2"
resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=
From ad4fb3f654e2cb5e61f7af3a3445b61427a27c70 Mon Sep 17 00:00:00 2001
From: Mijung Lee
Date: Tue, 11 Jun 2019 22:39:51 -0700
Subject: [PATCH 053/371] Fixes typo
---
docs/src/pages/basics/introduction/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/pages/basics/introduction/index.md b/docs/src/pages/basics/introduction/index.md
index c8575a7aeac1..e2969b0c8996 100644
--- a/docs/src/pages/basics/introduction/index.md
+++ b/docs/src/pages/basics/introduction/index.md
@@ -18,4 +18,4 @@ Here are some featured Storybooks to see how it works:
- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
-Read the Learn Storyboook [tutorial](https://www.learnstorybook.com) for a step by step guide to building an app with Storybook and to see how building components in isolation can supercharge your app development workflow.
+Read the Learn Storybook [tutorial](https://www.learnstorybook.com) for a step by step guide to building an app with Storybook and to see how building components in isolation can supercharge your app development workflow.
From fdff13ad69e5b69829c72939c069c3beac1294de Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 12:49:51 +0200
Subject: [PATCH 054/371] Update CODE_OF_CONDUCT.md
---
CODE_OF_CONDUCT.md | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index cfc1b23f81fc..7d9ac3248c0a 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -34,7 +34,15 @@ This Code of Conduct applies both within project spaces and in public spaces whe
## Enforcement
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at ndelangen@me.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members:
+
+Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
+Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
+Tom Coleman ~ @tmeasday - `tom@thesnail.org`
+Micheal Shilman ~ @shilman - `michael@lab80.co`
+Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
+
+The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
From 3e8bf519f78a99967b8902b131308102d17dd77a Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 13:26:44 +0200
Subject: [PATCH 055/371] CHANGE version to 5.2.0-unreleased, to stop the
update PR spam
---
addons/a11y/package.json | 14 ++---
addons/actions/package.json | 12 ++--
addons/backgrounds/package.json | 14 ++---
addons/centered/package.json | 2 +-
addons/contexts/package.json | 10 ++--
addons/cssresources/package.json | 10 ++--
addons/design-assets/package.json | 14 ++---
addons/events/package.json | 8 +--
addons/google-analytics/package.json | 6 +-
addons/graphql/package.json | 6 +-
addons/info/package.json | 10 ++--
addons/jest/package.json | 12 ++--
addons/knobs/package.json | 12 ++--
addons/links/package.json | 8 +--
addons/notes/package.json | 16 ++---
addons/ondevice-actions/package.json | 8 +--
addons/ondevice-backgrounds/package.json | 4 +-
addons/ondevice-knobs/package.json | 6 +-
addons/ondevice-notes/package.json | 4 +-
addons/options/package.json | 4 +-
addons/queryparams/package.json | 14 ++---
.../storyshots/storyshots-core/package.json | 4 +-
.../storyshots-puppeteer/package.json | 6 +-
addons/storysource/package.json | 10 ++--
addons/viewport/package.json | 12 ++--
app/angular/package.json | 6 +-
app/ember/package.json | 4 +-
app/html/package.json | 4 +-
app/marko/package.json | 4 +-
app/mithril/package.json | 4 +-
app/polymer/package.json | 4 +-
app/preact/package.json | 4 +-
app/rax/package.json | 4 +-
app/react-native-server/package.json | 14 ++---
app/react-native/package.json | 12 ++--
app/react/package.json | 6 +-
app/riot/package.json | 4 +-
app/svelte/package.json | 4 +-
app/vue/package.json | 4 +-
dev-kits/addon-parameter/package.json | 14 ++---
dev-kits/addon-roundtrip/package.json | 14 ++---
docs/package.json | 4 +-
docs/src/versions/latest.json | 2 +-
.../crna-kitchen-sink/package.json | 18 +++---
examples/angular-cli/package.json | 28 ++++-----
examples/cra-kitchen-sink/package.json | 34 +++++------
examples/cra-react15/package.json | 10 ++--
examples/cra-ts-kitchen-sink/package.json | 14 ++---
examples/dev-kits/package.json | 18 +++---
examples/ember-cli/package.json | 26 ++++-----
examples/html-kitchen-sink/package.json | 36 ++++++------
examples/marko-cli/package.json | 16 ++---
examples/mithril-kitchen-sink/package.json | 28 ++++-----
examples/official-storybook/package.json | 54 ++++++++---------
examples/polymer-cli/package.json | 22 +++----
examples/preact-kitchen-sink/package.json | 30 +++++-----
examples/rax-kitchen-sink/package.json | 34 +++++------
examples/riot-kitchen-sink/package.json | 28 ++++-----
examples/svelte-kitchen-sink/package.json | 28 ++++-----
examples/vue-kitchen-sink/package.json | 30 +++++-----
lerna.json | 2 +-
lib/addons/package.json | 8 +--
lib/api/package.json | 12 ++--
lib/channel-postmessage/package.json | 6 +-
lib/channel-websocket/package.json | 4 +-
lib/channels/package.json | 2 +-
lib/cli/package.json | 58 +++++++++----------
lib/client-api/package.json | 10 ++--
lib/client-logger/package.json | 2 +-
lib/codemod/package.json | 2 +-
lib/components/package.json | 6 +-
lib/core-events/package.json | 2 +-
lib/core/package.json | 20 +++----
lib/node-logger/package.json | 2 +-
lib/router/package.json | 2 +-
lib/theming/package.json | 4 +-
lib/ui/package.json | 16 ++---
package.json | 2 +-
78 files changed, 476 insertions(+), 476 deletions(-)
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index e3d1d38b9cdf..f6c9dabf6128 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@@ -26,12 +26,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"axe-core": "^3.2.2",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 90f9e733f901..670f225bf37e 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 166555543b0e..3e7be73e5979 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -25,12 +25,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",
diff --git a/addons/centered/package.json b/addons/centered/package.json
index 3cde9dc7bf8f..f5a9cb21aaf9 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index 1f8f09f5ef41..24751544e9b5 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook Addon Contexts",
"keywords": [
"storybook",
@@ -28,10 +28,10 @@
"dev:check-types": "tsc --noEmit"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1"
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0"
},
"peerDependencies": {
"global": "*",
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index 0a04845933e0..aa17a9af4837 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@@ -25,10 +25,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 4af82c31c178..7d48245248f6 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/events/package.json b/addons/events/package.json
index 7937db1befbf..bb6cd5d43dcc 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@@ -24,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"prop-types": "^15.7.2",
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 803bd2b8eaa8..54e32ed12cf0 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/core-events": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index e2c3593097c8..4c88b163dca3 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@@ -22,8 +22,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.13.0",
diff --git a/addons/info/package.json b/addons/info/package.json
index 978f8b966f49..775e80c0b4fd 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",
diff --git a/addons/jest/package.json b/addons/jest/package.json
index ea5813cd4909..254d62ceba2a 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index f91d491562e4..c4b0525751ed 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@@ -22,11 +22,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/client-api": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/client-api": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",
diff --git a/addons/links/package.json b/addons/links/package.json
index d2550e8dc8e3..04ff1dc4dbc0 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@@ -22,9 +22,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/router": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/addons/notes/package.json b/addons/notes/package.json
index 46e175a56be3..d5cbe7a5e076 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@@ -23,13 +23,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/router": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.3",
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index 3c457273efe8..5bdbcdaa5136 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@@ -19,13 +19,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/core-events": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
"core-js": "^2.5.7",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
- "@storybook/addon-actions": "5.1.1"
+ "@storybook/addon-actions": "5.2.0-unreleased.0"
},
"peerDependencies": {
"@storybook/addon-actions": "*",
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 1cb2493e9b32..37ea02fb9750 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index ca48fe330431..02663270847b 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/core-events": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index d30ad4686a33..db042a2c85c2 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@@ -20,7 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"
diff --git a/addons/options/package.json b/addons/options/package.json
index a60b45593fdb..4f7442a31f2a 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Options addon for storybook",
"keywords": [
"addon",
@@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 1434411e8686..12d85468efb8 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index dfb93fca7a93..80105b9f0e6b 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@@ -25,7 +25,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 5a0f1df53b33..7da9107c997a 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@@ -22,8 +22,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/node-logger": "5.1.1",
- "@storybook/router": "5.1.1",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"puppeteer": "^1.12.2",
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 27984c68bd4c..c7e83d29e257 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/router": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 045470e27f6b..910212986952 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
diff --git a/app/angular/package.json b/app/angular/package.json
index ae26fd2ceee7..8d3ea8c6354b 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
- "@storybook/node-logger": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
"angular2-template-loader": "^0.6.2",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.4",
diff --git a/app/ember/package.json b/app/ember/package.json
index 6d231d8b236c..3d6f0a8fa537 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@@ -24,7 +24,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/html/package.json b/app/html/package.json
index ea965029d0a3..e42de31509f5 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/marko/package.json b/app/marko/package.json
index d2bc523e066d..f5ff0d84a975 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index d378393e2bc9..06035b7e77dc 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index b77fa96b7f31..4dfcb425587f 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/app/preact/package.json b/app/preact/package.json
index 3771772d355b..1a554163b296 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/rax/package.json b/app/rax/package.json
index 38d7bdf9928d..16a90ded1ce1 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"storybook",
@@ -28,7 +28,7 @@
},
"dependencies": {
"babel-preset-rax": "^1.0.0-beta.0",
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.2",
"global": "^4.3.2",
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index a35c80488acc..f49bcc32959c 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/channel-websocket": "5.1.1",
- "@storybook/core": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/ui": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/channel-websocket": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/ui": "5.2.0-unreleased.0",
"commander": "^2.19.0",
"global": "^4.3.2",
"react": "^16.6.0",
diff --git a/app/react-native/package.json b/app/react-native/package.json
index a44f91bb80b0..2f65f177c9d8 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -23,11 +23,11 @@
},
"dependencies": {
"@emotion/native": "^10.0.10",
- "@storybook/addons": "5.1.1",
- "@storybook/channel-websocket": "5.1.1",
- "@storybook/channels": "5.1.1",
- "@storybook/client-api": "5.1.1",
- "@storybook/core-events": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/channel-websocket": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/client-api": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"react-native-swipe-gestures": "^1.0.3",
"rn-host-detect": "^1.1.5"
diff --git a/app/react/package.json b/app/react/package.json
index 8c44d4cf4cb5..dde303705f8e 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -29,8 +29,8 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
- "@storybook/core": "5.1.1",
- "@storybook/node-logger": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
"@svgr/webpack": "^4.0.3",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-plugin-react-docgen": "^3.0.0",
diff --git a/app/riot/package.json b/app/riot/package.json
index 6a7a66e75860..89e0ca738438 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index ef4d72579401..8cd79a7da44b 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/vue/package.json b/app/vue/package.json
index 28d873e4864a..54a98c3f480a 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.1.1",
+ "@storybook/core": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 271f722150ef..f602ddbe580c 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-parameter",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "parameter addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index 5c05bd9e5bff..bcb1be65170f 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-roundtrip",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "roundtrip addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/docs/package.json b/docs/package.json
index bc8148d766f5..d87c8666ff65 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,8 +15,8 @@
"serve": "gatsby serve"
},
"dependencies": {
- "@storybook/components": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"babel-loader": "^6.4.1",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json
index 7cb06f152337..dcba5389aa3e 100644
--- a/docs/src/versions/latest.json
+++ b/docs/src/versions/latest.json
@@ -1 +1 @@
-{"version":"5.1.1","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
+{"version":"5.2.0-unreleased.0","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 99e8ce7d7e1f..8387d9ab5ea6 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "crna-kitchen-sink",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
@@ -24,14 +24,14 @@
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-ondevice-actions": "5.1.1",
- "@storybook/addon-ondevice-backgrounds": "5.1.1",
- "@storybook/addon-ondevice-knobs": "5.1.1",
- "@storybook/addon-ondevice-notes": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/react-native": "5.1.1",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-ondevice-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-ondevice-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-ondevice-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-ondevice-notes": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/react-native": "5.2.0-unreleased.0",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^5.1.1",
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index abd5617a5841..a497483faf45 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"license": "MIT",
"scripts": {
@@ -34,19 +34,19 @@
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-jest": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/angular": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-jest": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/angular": "5.2.0-unreleased.0",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "~12.0.2",
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 91f8518f4726..f55592a0fecf 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,22 +19,22 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-events": "5.1.1",
- "@storybook/addon-info": "5.1.1",
- "@storybook/addon-jest": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/react": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-events": "5.2.0-unreleased.0",
+ "@storybook/addon-info": "5.2.0-unreleased.0",
+ "@storybook/addon-jest": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"react-scripts": "^3.0.1"
}
}
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 9c064378e5a8..6ed222bc70a4 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"dependencies": {
"babel-loader": "8.0.6",
@@ -19,10 +19,10 @@
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/react": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"babel-core": "6",
"babel-runtime": "6"
}
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 4ba1bd2de2eb..05d56418ecda 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -14,12 +14,12 @@
"react-dom": "^16.8.3"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-info": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/react": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-info": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
"@types/enzyme": "^3.9.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index a46f212ddf00..c2f97a78c62f 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-devkits",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -8,14 +8,14 @@
"storybook": "start-storybook -p 9011 -c ./"
},
"devDependencies": {
- "@storybook/addon-roundtrip": "5.1.1",
- "@storybook/addon-parameter": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/node-logger": "5.1.1",
- "@storybook/react": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addon-roundtrip": "5.2.0-unreleased.0",
+ "@storybook/addon-parameter": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 53b12feb9d2b..124d4fcf76d3 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build": "ember build",
@@ -15,18 +15,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/ember": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/ember": "5.2.0-unreleased.0",
"babel-loader": "^8",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^5.2.0",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index 5dbe4d81af6f..fd89d4162c00 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"description": "",
"keywords": [],
@@ -14,23 +14,23 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-events": "5.1.1",
- "@storybook/addon-jest": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/core": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/html": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-events": "5.2.0-unreleased.0",
+ "@storybook/addon-jest": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/html": "5.2.0-unreleased.0",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index f5018c62745d..6585798da66c 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "marko-cli",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@@ -24,13 +24,13 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/marko": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/marko": "5.2.0-unreleased.0",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 5d6e09795296..4ac42b770b4b 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "mithril-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -11,19 +11,19 @@
"mithril": "^1.1.6"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/mithril": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/mithril": "5.2.0-unreleased.0",
"webpack": "^4.33.0"
}
}
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 62e8a708a090..61448ccdc043 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -13,32 +13,32 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-contexts": "5.1.1",
- "@storybook/addon-cssresources": "5.1.1",
- "@storybook/addon-design-assets": "5.1.1",
- "@storybook/addon-events": "5.1.1",
- "@storybook/addon-graphql": "5.1.1",
- "@storybook/addon-info": "5.1.1",
- "@storybook/addon-jest": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-queryparams": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storyshots-puppeteer": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/node-logger": "5.1.1",
- "@storybook/react": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-contexts": "5.2.0-unreleased.0",
+ "@storybook/addon-cssresources": "5.2.0-unreleased.0",
+ "@storybook/addon-design-assets": "5.2.0-unreleased.0",
+ "@storybook/addon-events": "5.2.0-unreleased.0",
+ "@storybook/addon-graphql": "5.2.0-unreleased.0",
+ "@storybook/addon-info": "5.2.0-unreleased.0",
+ "@storybook/addon-jest": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-queryparams": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots-puppeteer": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index 47f6a8b7dad5..2eb16aa14b1e 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "polymer-cli",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,16 +10,16 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/polymer": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/polymer": "5.2.0-unreleased.0",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 0a880ae838ba..94be4175589f 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,20 +16,20 @@
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.2.0",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-contexts": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/preact": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-contexts": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/preact": "5.2.0-unreleased.0",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index cb4bb9608422..daf251cafd6f 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "rax-kitchen-sink",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js",
@@ -24,22 +24,22 @@
"rax-view": "^0.6.5"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-events": "5.1.1",
- "@storybook/addon-info": "5.1.1",
- "@storybook/addon-jest": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/rax": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-events": "5.2.0-unreleased.0",
+ "@storybook/addon-info": "5.2.0-unreleased.0",
+ "@storybook/addon-jest": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/rax": "5.2.0-unreleased.0",
"babel-eslint": "^8.2.2",
"babel-preset-rax": "^1.0.0-beta.0",
"rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index b12cf181d402..c9470651f085 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "riot-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,19 +16,19 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/riot": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/riot": "5.2.0-unreleased.0",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 455018802c35..6fbb4fc4d244 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -11,18 +11,18 @@
"global": "^4.3.2"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/svelte": "5.1.1"
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/svelte": "5.2.0-unreleased.0"
}
}
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index b649d1efcab2..9741736637ef 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,20 +15,20 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.1.1",
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-backgrounds": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-contexts": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addon-storysource": "5.1.1",
- "@storybook/addon-viewport": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/vue": "5.1.1",
+ "@storybook/addon-a11y": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-contexts": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addon-storysource": "5.2.0-unreleased.0",
+ "@storybook/addon-viewport": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/vue": "5.2.0-unreleased.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"cross-env": "^5.2.0",
diff --git a/lerna.json b/lerna.json
index dbeb36db1816..89fd11c7e605 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
"npmClient": "yarn",
"useWorkspaces": true,
"registry": "https://registry.npmjs.org",
- "version": "5.1.1"
+ "version": "5.2.0-unreleased.0"
}
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 996ab512d33f..d80049800092 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook addons store",
"keywords": [
"storybook"
@@ -21,9 +21,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/api": "5.1.1",
- "@storybook/channels": "5.1.1",
- "@storybook/client-logger": "5.1.1",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
diff --git a/lib/api/package.json b/lib/api/package.json
index 98a6d8c54c1f..a51fd91b26fd 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/api",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Core Storybook API & Context",
"keywords": [
"storybook"
@@ -20,11 +20,11 @@
"prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/router": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 7f16ac9cd3a8..df17808a51ed 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-postmessage",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.1.1",
- "@storybook/client-logger": "5.1.1",
+ "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"telejson": "^2.2.1"
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 439aece8b26f..b5e069e699a0 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-websocket",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "",
"keywords": [
"storybook"
@@ -21,7 +21,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.1.1",
+ "@storybook/channels": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"json-fn": "^1.1.1"
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 68f65c751729..1f3c87bbef37 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/cli/package.json b/lib/cli/package.json
index f61744cbb44d..3235fad74b24 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
@@ -30,7 +30,7 @@
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.0.0",
- "@storybook/codemod": "5.1.1",
+ "@storybook/codemod": "5.2.0-unreleased.0",
"chalk": "^2.4.1",
"commander": "^2.19.0",
"core-js": "^3.0.1",
@@ -44,33 +44,33 @@
"update-notifier": "^3.0.0"
},
"devDependencies": {
- "@storybook/addon-actions": "5.1.1",
- "@storybook/addon-centered": "5.1.1",
- "@storybook/addon-graphql": "5.1.1",
- "@storybook/addon-info": "5.1.1",
- "@storybook/addon-knobs": "5.1.1",
- "@storybook/addon-links": "5.1.1",
- "@storybook/addon-notes": "5.1.1",
- "@storybook/addon-options": "5.1.1",
- "@storybook/addon-storyshots": "5.1.1",
- "@storybook/addons": "5.1.1",
- "@storybook/angular": "5.1.1",
- "@storybook/channel-postmessage": "5.1.1",
- "@storybook/channel-websocket": "5.1.1",
- "@storybook/channels": "5.1.1",
- "@storybook/ember": "5.1.1",
- "@storybook/html": "5.1.1",
- "@storybook/marko": "5.1.1",
- "@storybook/mithril": "5.1.1",
- "@storybook/polymer": "5.1.1",
- "@storybook/preact": "5.1.1",
- "@storybook/rax": "5.1.1",
- "@storybook/react": "5.1.1",
- "@storybook/react-native": "5.1.1",
- "@storybook/riot": "5.1.1",
- "@storybook/svelte": "5.1.1",
- "@storybook/ui": "5.1.1",
- "@storybook/vue": "5.1.1"
+ "@storybook/addon-actions": "5.2.0-unreleased.0",
+ "@storybook/addon-centered": "5.2.0-unreleased.0",
+ "@storybook/addon-graphql": "5.2.0-unreleased.0",
+ "@storybook/addon-info": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-links": "5.2.0-unreleased.0",
+ "@storybook/addon-notes": "5.2.0-unreleased.0",
+ "@storybook/addon-options": "5.2.0-unreleased.0",
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/angular": "5.2.0-unreleased.0",
+ "@storybook/channel-postmessage": "5.2.0-unreleased.0",
+ "@storybook/channel-websocket": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/ember": "5.2.0-unreleased.0",
+ "@storybook/html": "5.2.0-unreleased.0",
+ "@storybook/marko": "5.2.0-unreleased.0",
+ "@storybook/mithril": "5.2.0-unreleased.0",
+ "@storybook/polymer": "5.2.0-unreleased.0",
+ "@storybook/preact": "5.2.0-unreleased.0",
+ "@storybook/rax": "5.2.0-unreleased.0",
+ "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/react-native": "5.2.0-unreleased.0",
+ "@storybook/riot": "5.2.0-unreleased.0",
+ "@storybook/svelte": "5.2.0-unreleased.0",
+ "@storybook/ui": "5.2.0-unreleased.0",
+ "@storybook/vue": "5.2.0-unreleased.0"
},
"publishConfig": {
"access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 57d60746a856..35b5013e530c 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook Client API",
"keywords": [
"storybook"
@@ -20,10 +20,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/router": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"eventemitter3": "^3.1.0",
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 7dbf636f1e4e..2efd927b72c3 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 9eadffb5701f..65164f8aa834 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
diff --git a/lib/components/package.json b/lib/components/package.json
index da65968875fe..86093a6a420e 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/client-logger": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.1",
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 88eb83200fa8..65cfb33e5614 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 304510de616f..4ad432f4aadf 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -25,15 +25,15 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-env": "^7.4.5",
- "@storybook/addons": "5.1.1",
- "@storybook/channel-postmessage": "5.1.1",
- "@storybook/client-api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/node-logger": "5.1.1",
- "@storybook/router": "5.1.1",
- "@storybook/theming": "5.1.1",
- "@storybook/ui": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/channel-postmessage": "5.2.0-unreleased.0",
+ "@storybook/client-api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/ui": "5.2.0-unreleased.0",
"airbnb-js-shims": "^1 || ^2",
"autoprefixer": "^9.4.9",
"babel-plugin-add-react-displayname": "^0.0.5",
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 28a119f5dbd2..394893e9d444 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/router/package.json b/lib/router/package.json
index 4524d2014695..8308f486b757 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 3859142f0ca9..5361bdb4e362 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -23,7 +23,7 @@
"dependencies": {
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.7",
- "@storybook/client-logger": "5.1.1",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index bfeb5a346c44..5e26ff06b0ed 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -22,13 +22,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.1.1",
- "@storybook/api": "5.1.1",
- "@storybook/client-logger": "5.1.1",
- "@storybook/components": "5.1.1",
- "@storybook/core-events": "5.1.1",
- "@storybook/router": "5.1.1",
- "@storybook/theming": "5.1.1",
+ "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-unreleased.0",
+ "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/theming": "5.2.0-unreleased.0",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"core-js-pure": "^3.0.1",
diff --git a/package.json b/package.json
index 41eda81cefce..30003863bddd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "5.1.1",
+ "version": "5.2.0-unreleased.0",
"private": true,
"description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
"keywords": [
From fed2ffa5e2919220f0508e540b2eae848523fee5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 13:36:12 +0200
Subject: [PATCH 056/371] FIX version.ts
---
lib/api/src/version.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 1be85a5657c3..26f79de3bc32 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.1.1';
+export const version = '5.2.0-unreleased.0';
From 59316b9d31b4662342b8efad37cf8306a648930c Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 21:17:01 +0200
Subject: [PATCH 057/371] FIX versions
---
addons/ondevice-knobs/package.json | 2 +-
addons/storyshots/storyshots-puppeteer/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index 02663270847b..2ed70641c0dd 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -32,7 +32,7 @@
"react-native-switch": "^1.5.0"
},
"peerDependencies": {
- "@storybook/addon-knobs": "5.1.0-rc.0",
+ "@storybook/addon-knobs": "5.2.0-unreleased.0",
"react": "*",
"react-native": "*"
},
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 7da9107c997a..e2da7555ea21 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -30,7 +30,7 @@
"regenerator-runtime": "^0.12.1"
},
"peerDependencies": {
- "@storybook/addon-storyshots": "5.1.0-rc.0"
+ "@storybook/addon-storyshots": "5.2.0-unreleased.0"
},
"publishConfig": {
"access": "public"
From b64c2a4c1eafd2cb3d2d0fbe719846de2583abdd Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 13:38:36 +0200
Subject: [PATCH 058/371] CHANGE netlify so it only builds docs
---
netlify.toml | 4 +-
scripts/netlify-build.sh | 117 ---------------------------------------
2 files changed, 2 insertions(+), 119 deletions(-)
delete mode 100755 scripts/netlify-build.sh
diff --git a/netlify.toml b/netlify.toml
index a2251b21abba..3272e1a44e5e 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,6 +1,6 @@
[build]
- publish = "netlify-build"
- command = "bash scripts/netlify-build.sh"
+ publish = "docs/public"
+ command = "yarn bootstrap --docs --core && yarn docs:build"
[build.environment]
NODE_VERSION = "8"
YARN_VERSION = "1.3.2"
diff --git a/scripts/netlify-build.sh b/scripts/netlify-build.sh
deleted file mode 100755
index 06098fc89cbb..000000000000
--- a/scripts/netlify-build.sh
+++ /dev/null
@@ -1,117 +0,0 @@
-#!/bin/sh
-
-# Make sure to set $BUILD_CONTEXT in the Netlify "Deploy Settings"
-echo "Building for Netlify. BUILD_CONTEXT: $BUILD_CONTEXT"
-
-# Fixes
-npm i -g process-nextick-args util-deprecate gauge
-
-yarn
-yarn bootstrap --core
-
-if [ "$BUILD_CONTEXT" = "DOCS" ]; then
- pushd docs
- yarn install
- popd
- yarn docs:build
- mv docs/public netlify-build
-elif [ "$BUILD_CONTEXT" = "CRA" ]; then
- pushd examples/cra-kitchen-sink
- yarn add tapable # quirk with netlify build instance
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "CRA_TS" ]; then
- pushd examples/cra-ts-kitchen-sink
- yarn add tapable # quirk with netlify build instance
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "CRA_REACT15" ]; then
- pushd examples/cra-react15
- yarn add tapable # quirk with netlify build instance
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "VUE" ]; then
- echo "netlify-build Vue examples"
- pushd examples/vue-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "SVELTE" ]; then
- echo "netlify-build Svelte examples"
- pushd examples/svelte-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "ANGULAR" ]; then
- echo "netlify-build Angular examples"
- pushd examples/angular-cli
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "EMBER" ]; then
- echo "netlify-build Ember examples"
- pushd examples/ember-cli
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "POLYMER" ]; then
- echo "netlify-build Polymer examples"
- pushd examples/polymer-cli
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "PREACT" ]; then
- echo "netlify-build Preact examples"
- pushd examples/preact-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "MITHRIL" ]; then
- echo "netlify-build Mithril examples"
- pushd examples/mithril-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "MARKO" ]; then
- echo "netlify-build Marko examples"
- pushd examples/marko-cli
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "HTML" ]; then
- echo "netlify-build HTML examples"
- pushd examples/html-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "OFFICIAL" ]; then
- echo "netlify-build official examples"
- pushd examples/official-storybook
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-elif [ "$BUILD_CONTEXT" = "RIOT" ]; then
- echo "netlify-build riot examples"
- pushd examples/riot-kitchen-sink
- yarn
- yarn build-storybook --quiet
- mv storybook-static ../../netlify-build
- popd
-else
- RED='\033[0;31m'
- NOCOLOR='\033[0m'
- echo "Unrecognized BUILD_CONTEXT \"${RED}$BUILD_CONTEXT${NOCOLOR}\"" 1>&2
-fi
From a226c2d071c6cda36d2bbc52d27c1cdbefe98ff6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 21:20:55 +0200
Subject: [PATCH 059/371] Use published version for docs
---
docs/package.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index d87c8666ff65..dd17b5d3de51 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,8 +15,8 @@
"serve": "gatsby serve"
},
"dependencies": {
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/components": "5.1.3",
+ "@storybook/theming": "5.1.3",
"babel-loader": "^6.4.1",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
From 1fddb1f1dca902e05725eb4d0dc62f07fd6b5fde Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 21:33:40 +0200
Subject: [PATCH 060/371] FIX lockfile for docs
---
docs/yarn.lock | 30 +++++++++++++++---------------
1 file changed, 15 insertions(+), 15 deletions(-)
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 77f80416cce6..88064121dbba 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -173,20 +173,20 @@
dependencies:
"@ndhoule/map" "^2.0.1"
-"@storybook/client-logger@5.1.1":
- version "5.1.1"
- resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.1.1.tgz#e62a214a801079e75b4b101afd73cc66c262701d"
- integrity sha512-I0j9tGyjQpLC7dKhQuotJzaAl9j6++hJdUT5ieoqVIC4Hya15wIyc63lpa6ugXQLeRpW73x72CTFV8K+132Qow==
+"@storybook/client-logger@5.1.3":
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.1.3.tgz#6d9f45fdac7d3f2f65d1238c35df11170c2f8b68"
+ integrity sha512-/86NGA7NPsAktpA0lSnw0NhgdqS7Grz08wE7Paz+qLDj1AxnttTvMZctWJ8bLAa3EeJ9wHXGak854CmGiVFnWA==
dependencies:
core-js "^3.0.1"
-"@storybook/components@5.1.1":
- version "5.1.1"
- resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.1.1.tgz#4ca7343009ebd92cdfb79cfa373628d6f3bb12d0"
- integrity sha512-17rqqxant4zqCNxcESLZR0yAhz1mGHDz6THj8fz5rUncEnSrPYIcdvRKIfeao8yDaiK1Bh48jAjSPdfUO8BngA==
+"@storybook/components@5.1.3":
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.1.3.tgz#9c6898f8f66bf6b9dfdb3ecca73370f2d799e546"
+ integrity sha512-lM+iSdIl/UlmPlgH3vqo8NhMAdPUrWkgp40CVADfXsM6Yxai/23gpg8/HEoHiU5hFjNxowJUt76gTvwt9ak+gg==
dependencies:
- "@storybook/client-logger" "5.1.1"
- "@storybook/theming" "5.1.1"
+ "@storybook/client-logger" "5.1.3"
+ "@storybook/theming" "5.1.3"
core-js "^3.0.1"
global "^4.3.2"
markdown-to-jsx "^6.9.1"
@@ -204,14 +204,14 @@
recompose "^0.30.0"
simplebar-react "^1.0.0-alpha.6"
-"@storybook/theming@5.1.1":
- version "5.1.1"
- resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.1.1.tgz#605572b650049457dbd102aa5686933ff2202ace"
- integrity sha512-70Pf6XZnTI4wniItQxIhAOQjVi7fDRzR3xZUIBC+pEatbKD+OoyFOALwkww5uW66jeWBYC5AhRPEHWo7ylcXUQ==
+"@storybook/theming@5.1.3":
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.1.3.tgz#705654392b020ef5654c6c500f4398cc7f067653"
+ integrity sha512-ScBAEMkpwY6pHPuD7SYqAwbQ3M4cOEYY2340HtLNR53M6EJ2mcd87rH2kwpTEgTzeA0VuUln6WXEoBz3WRBLYA==
dependencies:
"@emotion/core" "^10.0.9"
"@emotion/styled" "^10.0.7"
- "@storybook/client-logger" "5.1.1"
+ "@storybook/client-logger" "5.1.3"
common-tags "^1.8.0"
core-js "^3.0.1"
deep-object-diff "^1.1.0"
From da1a64c1c2a98c9413b62c8dc833d8775e87ae58 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Wed, 12 Jun 2019 21:37:18 +0200
Subject: [PATCH 061/371] Make getStoryPanels a full api method
---
lib/api/src/modules/addons.ts | 5 +++--
lib/api/src/tests/addons.test.js | 27 ++++++++++++++++++++-------
lib/ui/src/containers/panel.js | 2 +-
3 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index 67e06a9ce14a..f8732bb1581f 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -42,7 +42,7 @@ interface Panels {
export interface SubAPI {
getElements: (type: Types) => Collection;
getPanels: () => Collection;
- getPanelsForStory: (storyParameters: StoryParameters) => Collection;
+ getStoryPanels: (storyId: string) => Collection;
getSelectedPanel: () => string;
setSelectedPanel: (panelName: string) => void;
}
@@ -68,7 +68,8 @@ export default ({ provider, store }: Module) => {
const api: SubAPI = {
getElements: type => provider.getElements(type),
getPanels: () => api.getElements(types.PANEL),
- getPanelsForStory: (storyParameters: StoryParameters) => {
+ getStoryPanels: storyId => {
+ const storyParameters = provider.getParameters(storyId);
const panels = api.getPanels();
if (!panels || !storyParameters) {
return panels;
diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js
index 0053f44471f4..95a016a71508 100644
--- a/lib/api/src/tests/addons.test.js
+++ b/lib/api/src/tests/addons.test.js
@@ -58,13 +58,17 @@ describe('Addons API', () => {
});
});
- describe('#getPanelsForStory', () => {
+ describe('#getStoryPanels', () => {
it('should return all panels by default', () => {
// given
- const { api } = initAddons({ provider, store });
+ const providerWithStoryParameters = {
+ ...provider,
+ getParameters: () => {},
+ };
+ const { api } = initAddons({ provider: providerWithStoryParameters, store });
// when
- const filteredPanels = api.getPanelsForStory();
+ const filteredPanels = api.getStoryPanels();
// then
expect(filteredPanels).toBe(PANELS);
@@ -72,13 +76,22 @@ describe('Addons API', () => {
it('should filter disabled addons', () => {
// given
- const { api } = initAddons({ provider, store });
- const storyParameters = {
- a11y: { disabled: true },
+ const storyId = 'story 1';
+ const providerWithStoryParameters = {
+ ...provider,
+ getParameters: id => {
+ if (id === storyId) {
+ return {
+ a11y: { disabled: true },
+ };
+ }
+ return null;
+ },
};
+ const { api } = initAddons({ provider: providerWithStoryParameters, store });
// when
- const filteredPanels = api.getPanelsForStory(storyParameters);
+ const filteredPanels = api.getStoryPanels(storyId);
// then
expect(filteredPanels).toEqual({
diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js
index 6e6a5ceaafb7..fcf2e7eca281 100644
--- a/lib/ui/src/containers/panel.js
+++ b/lib/ui/src/containers/panel.js
@@ -11,7 +11,7 @@ const createPanelActions = memoize(1)(api => ({
}));
const mapper = ({ state, api }) => ({
- panels: api.getPanelsForStory(api.getParameters(state.storyId)),
+ panels: api.getStoryPanels(state.storyId),
selectedPanel: api.getSelectedPanel(),
panelPosition: state.layout.panelPosition,
actions: createPanelActions(api),
From 1d10ab1117dee91c269bc6a2de6d309bef90ed5f Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Thu, 13 Jun 2019 03:59:57 +0800
Subject: [PATCH 062/371] fix typo
---
CODE_OF_CONDUCT.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 7d9ac3248c0a..988567141411 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -39,7 +39,7 @@ Instances of abusive, harassing, or otherwise unacceptable behavior may be repor
Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
Tom Coleman ~ @tmeasday - `tom@thesnail.org`
-Micheal Shilman ~ @shilman - `michael@lab80.co`
+Michael Shilman ~ @shilman - `michael@lab80.co`
Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
From 50486926cef3e05fe6bc9140965a5ea22b592cd4 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 12 Jun 2019 23:05:07 +0200
Subject: [PATCH 063/371] simplify docs netlify command
---
netlify.toml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/netlify.toml b/netlify.toml
index 3272e1a44e5e..359e4c9a27f0 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,6 +1,6 @@
[build]
publish = "docs/public"
- command = "yarn bootstrap --docs --core && yarn docs:build"
+ command = "cd docs && yarn && yarn build && cd .."
[build.environment]
NODE_VERSION = "8"
YARN_VERSION = "1.3.2"
From 78722470216bf193ddb672f40afc150599297e1c Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Wed, 12 Jun 2019 23:05:17 +0200
Subject: [PATCH 064/371] Fix type
---
lib/addons/src/index.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index 046b59d403cc..c0ccd03ed4de 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -24,6 +24,7 @@ export interface Addon {
route?: (routeOptions: RouteOptions) => string;
match?: (matchOptions: MatchOptions) => boolean;
render: (renderOptions: RenderOptions) => ReactElement;
+ paramKey: string;
}
export type Loader = (api: API) => void;
From 404f5901a66342fd28a242161cee6194711fcca0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 00:38:52 +0200
Subject: [PATCH 065/371] FIX sidebar loading visibility
---
lib/ui/src/components/sidebar/SidebarItem.js | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
index 6384ba727142..719cfe004677 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -86,6 +86,7 @@ export const Item = styled.div(
}),
({ theme, loading }) =>
loading && {
+ '&& > svg + span': { background: theme.color.medium },
'&& > *': theme.animation.inlineGlow,
'&& > span': { borderColor: 'transparent' },
}
@@ -93,12 +94,10 @@ export const Item = styled.div(
export default function SidebarItem({
name,
- depth,
isComponent,
isLeaf,
isExpanded,
isSelected,
- loading,
...props
}) {
let iconName;
@@ -113,8 +112,6 @@ export default function SidebarItem({
return (
-
From fbee3cdd5f64d4e082d506e33806da8bad15a995 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 00:50:44 +0200
Subject: [PATCH 066/371] CHANGE versions again, sorry, CLI tests use published
version, we should really fix that!
---
addons/a11y/package.json | 14 ++---
addons/actions/package.json | 12 ++--
addons/backgrounds/package.json | 14 ++---
addons/centered/package.json | 2 +-
addons/contexts/package.json | 10 ++--
addons/cssresources/package.json | 10 ++--
addons/design-assets/package.json | 14 ++---
addons/events/package.json | 8 +--
addons/google-analytics/package.json | 6 +-
addons/graphql/package.json | 6 +-
addons/info/package.json | 10 ++--
addons/jest/package.json | 12 ++--
addons/knobs/package.json | 12 ++--
addons/links/package.json | 8 +--
addons/notes/package.json | 16 ++---
addons/ondevice-actions/package.json | 8 +--
addons/ondevice-backgrounds/package.json | 4 +-
addons/ondevice-knobs/package.json | 8 +--
addons/ondevice-notes/package.json | 4 +-
addons/options/package.json | 4 +-
addons/queryparams/package.json | 14 ++---
.../storyshots/storyshots-core/package.json | 4 +-
.../storyshots-puppeteer/package.json | 8 +--
addons/storysource/package.json | 10 ++--
addons/viewport/package.json | 12 ++--
app/angular/package.json | 6 +-
app/ember/package.json | 4 +-
app/html/package.json | 4 +-
app/marko/package.json | 4 +-
app/mithril/package.json | 4 +-
app/polymer/package.json | 4 +-
app/preact/package.json | 4 +-
app/rax/package.json | 4 +-
app/react-native-server/package.json | 14 ++---
app/react-native/package.json | 12 ++--
app/react/package.json | 6 +-
app/riot/package.json | 4 +-
app/svelte/package.json | 4 +-
app/vue/package.json | 4 +-
dev-kits/addon-parameter/package.json | 14 ++---
dev-kits/addon-roundtrip/package.json | 14 ++---
docs/package.json | 4 +-
docs/src/versions/latest.json | 2 +-
.../crna-kitchen-sink/package.json | 18 +++---
examples/angular-cli/package.json | 28 ++++-----
examples/cra-kitchen-sink/package.json | 34 +++++------
examples/cra-react15/package.json | 10 ++--
examples/cra-ts-kitchen-sink/package.json | 14 ++---
examples/dev-kits/package.json | 18 +++---
examples/ember-cli/package.json | 26 ++++-----
examples/html-kitchen-sink/package.json | 36 ++++++------
examples/marko-cli/package.json | 16 ++---
examples/mithril-kitchen-sink/package.json | 28 ++++-----
examples/official-storybook/package.json | 54 ++++++++---------
examples/polymer-cli/package.json | 22 +++----
examples/preact-kitchen-sink/package.json | 30 +++++-----
examples/rax-kitchen-sink/package.json | 34 +++++------
examples/riot-kitchen-sink/package.json | 28 ++++-----
examples/svelte-kitchen-sink/package.json | 28 ++++-----
examples/vue-kitchen-sink/package.json | 30 +++++-----
lerna.json | 2 +-
lib/addons/package.json | 8 +--
lib/api/package.json | 12 ++--
lib/channel-postmessage/package.json | 6 +-
lib/channel-websocket/package.json | 4 +-
lib/channels/package.json | 2 +-
lib/cli/package.json | 58 +++++++++----------
lib/client-api/package.json | 10 ++--
lib/client-logger/package.json | 2 +-
lib/codemod/package.json | 2 +-
lib/components/package.json | 6 +-
lib/core-events/package.json | 2 +-
lib/core/package.json | 20 +++----
lib/node-logger/package.json | 2 +-
lib/router/package.json | 2 +-
lib/theming/package.json | 4 +-
lib/ui/package.json | 16 ++---
package.json | 2 +-
78 files changed, 478 insertions(+), 478 deletions(-)
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index f6c9dabf6128..6462f86c1a86 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@@ -26,12 +26,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"axe-core": "^3.2.2",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 670f225bf37e..9231d6135f48 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 3e7be73e5979..273d598a0d18 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -25,12 +25,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",
diff --git a/addons/centered/package.json b/addons/centered/package.json
index f5a9cb21aaf9..da975b3c42a3 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index 24751544e9b5..4796b46bb4f5 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Addon Contexts",
"keywords": [
"storybook",
@@ -28,10 +28,10 @@
"dev:check-types": "tsc --noEmit"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0"
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23"
},
"peerDependencies": {
"global": "*",
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index aa17a9af4837..2acdafdd1736 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@@ -25,10 +25,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 7d48245248f6..659b71f40534 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/events/package.json b/addons/events/package.json
index bb6cd5d43dcc..9857a865a34a 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@@ -24,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"prop-types": "^15.7.2",
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 54e32ed12cf0..8597020c20ff 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index 4c88b163dca3..e4a38145ee88 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@@ -22,8 +22,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.13.0",
diff --git a/addons/info/package.json b/addons/info/package.json
index 775e80c0b4fd..1dd2b8e3a6fd 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 254d62ceba2a..3997f1a073d1 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index c4b0525751ed..0d282c2187dc 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@@ -22,11 +22,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",
diff --git a/addons/links/package.json b/addons/links/package.json
index 04ff1dc4dbc0..520f10cb7faf 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@@ -22,9 +22,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/addons/notes/package.json b/addons/notes/package.json
index d5cbe7a5e076..acf676981449 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@@ -23,13 +23,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.3",
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index 5bdbcdaa5136..e1c5743b8664 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@@ -19,13 +19,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^2.5.7",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0"
+ "@storybook/addon-actions": "5.2.0-alpha.23"
},
"peerDependencies": {
"@storybook/addon-actions": "*",
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 37ea02fb9750..fb008630355a 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index 2ed70641c0dd..fbab2758ad0f 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",
@@ -32,7 +32,7 @@
"react-native-switch": "^1.5.0"
},
"peerDependencies": {
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
"react": "*",
"react-native": "*"
},
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index db042a2c85c2..2f83a8ae86ad 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@@ -20,7 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"
diff --git a/addons/options/package.json b/addons/options/package.json
index 4f7442a31f2a..c16a073f1954 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Options addon for storybook",
"keywords": [
"addon",
@@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 12d85468efb8..854adf15c508 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index 80105b9f0e6b..fd0354d15b3d 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@@ -25,7 +25,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index e2da7555ea21..10142f3faa38 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@@ -22,15 +22,15 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"puppeteer": "^1.12.2",
"regenerator-runtime": "^0.12.1"
},
"peerDependencies": {
- "@storybook/addon-storyshots": "5.2.0-unreleased.0"
+ "@storybook/addon-storyshots": "5.2.0-alpha.23"
},
"publishConfig": {
"access": "public"
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index c7e83d29e257..5acbe8de1a9e 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 910212986952..a49570604932 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
diff --git a/app/angular/package.json b/app/angular/package.json
index 8d3ea8c6354b..a20e71f389b6 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
"angular2-template-loader": "^0.6.2",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.4",
diff --git a/app/ember/package.json b/app/ember/package.json
index 3d6f0a8fa537..462b200a39a6 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@@ -24,7 +24,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/html/package.json b/app/html/package.json
index e42de31509f5..c59d4a049e22 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/marko/package.json b/app/marko/package.json
index f5ff0d84a975..324ab8edded0 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 06035b7e77dc..732e6ad3ee8c 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index 4dfcb425587f..9904ee959114 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/app/preact/package.json b/app/preact/package.json
index 1a554163b296..c673df82f16e 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/rax/package.json b/app/rax/package.json
index 16a90ded1ce1..f76c26c8a9fc 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"storybook",
@@ -28,7 +28,7 @@
},
"dependencies": {
"babel-preset-rax": "^1.0.0-beta.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.2",
"global": "^4.3.2",
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index f49bcc32959c..17acc5504495 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
"commander": "^2.19.0",
"global": "^4.3.2",
"react": "^16.6.0",
diff --git a/app/react-native/package.json b/app/react-native/package.json
index 2f65f177c9d8..75e7cbf73b75 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -23,11 +23,11 @@
},
"dependencies": {
"@emotion/native": "^10.0.10",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"react-native-swipe-gestures": "^1.0.3",
"rn-host-detect": "^1.1.5"
diff --git a/app/react/package.json b/app/react/package.json
index dde303705f8e..af64149fb8d5 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -29,8 +29,8 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
"@svgr/webpack": "^4.0.3",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-plugin-react-docgen": "^3.0.0",
diff --git a/app/riot/package.json b/app/riot/package.json
index 89e0ca738438..e89be376a7e3 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 8cd79a7da44b..b2abc4521c5d 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/vue/package.json b/app/vue/package.json
index 54a98c3f480a..a0c164c698a9 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index f602ddbe580c..50f40cdf3ee6 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-parameter",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "parameter addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index bcb1be65170f..5aa760468255 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-roundtrip",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "roundtrip addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/docs/package.json b/docs/package.json
index d87c8666ff65..412f5fa79baa 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,8 +15,8 @@
"serve": "gatsby serve"
},
"dependencies": {
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"babel-loader": "^6.4.1",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json
index dcba5389aa3e..c0e4f2a14ad5 100644
--- a/docs/src/versions/latest.json
+++ b/docs/src/versions/latest.json
@@ -1 +1 @@
-{"version":"5.2.0-unreleased.0","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
+{"version":"5.2.0-alpha.23","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 8387d9ab5ea6..6f9371f2654e 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "crna-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
@@ -24,14 +24,14 @@
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-actions": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-notes": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/react-native": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-actions": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-notes": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/react-native": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^5.1.1",
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index a497483faf45..2b17909bceb9 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"license": "MIT",
"scripts": {
@@ -34,19 +34,19 @@
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/angular": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/angular": "5.2.0-alpha.23",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "~12.0.2",
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index f55592a0fecf..cdc1c2c38ca0 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,22 +19,22 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"react-scripts": "^3.0.1"
}
}
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 6ed222bc70a4..39af8718dafa 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"dependencies": {
"babel-loader": "8.0.6",
@@ -19,10 +19,10 @@
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"babel-core": "6",
"babel-runtime": "6"
}
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 05d56418ecda..344b2e251fc4 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -14,12 +14,12 @@
"react-dom": "^16.8.3"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
"@types/enzyme": "^3.9.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index c2f97a78c62f..5b8d3e94ba4e 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-devkits",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -8,14 +8,14 @@
"storybook": "start-storybook -p 9011 -c ./"
},
"devDependencies": {
- "@storybook/addon-roundtrip": "5.2.0-unreleased.0",
- "@storybook/addon-parameter": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-roundtrip": "5.2.0-alpha.23",
+ "@storybook/addon-parameter": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 124d4fcf76d3..6425b7f90722 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "ember build",
@@ -15,18 +15,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/ember": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/ember": "5.2.0-alpha.23",
"babel-loader": "^8",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^5.2.0",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index fd89d4162c00..ff3ce8a491df 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "",
"keywords": [],
@@ -14,23 +14,23 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/html": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/html": "5.2.0-alpha.23",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 6585798da66c..57d3538ab5ca 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "marko-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@@ -24,13 +24,13 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/marko": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/marko": "5.2.0-alpha.23",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 4ac42b770b4b..ea7802446a95 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "mithril-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -11,19 +11,19 @@
"mithril": "^1.1.6"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/mithril": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/mithril": "5.2.0-alpha.23",
"webpack": "^4.33.0"
}
}
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 61448ccdc043..da0b260ec49e 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -13,32 +13,32 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-cssresources": "5.2.0-unreleased.0",
- "@storybook/addon-design-assets": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-graphql": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-queryparams": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots-puppeteer": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-cssresources": "5.2.0-alpha.23",
+ "@storybook/addon-design-assets": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-graphql": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-queryparams": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index 2eb16aa14b1e..ba93e8862d40 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "polymer-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,16 +10,16 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/polymer": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/polymer": "5.2.0-alpha.23",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 94be4175589f..5b3d6aa7a813 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,20 +16,20 @@
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.2.0",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/preact": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/preact": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index daf251cafd6f..98ca817db918 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "rax-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js",
@@ -24,22 +24,22 @@
"rax-view": "^0.6.5"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/rax": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/rax": "5.2.0-alpha.23",
"babel-eslint": "^8.2.2",
"babel-preset-rax": "^1.0.0-beta.0",
"rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index c9470651f085..cf3f892e7380 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "riot-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,19 +16,19 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/riot": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/riot": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 6fbb4fc4d244..4eac0f34f862 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -11,18 +11,18 @@
"global": "^4.3.2"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/svelte": "5.2.0-unreleased.0"
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/svelte": "5.2.0-alpha.23"
}
}
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 9741736637ef..5ee3052f862f 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,20 +15,20 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/vue": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/vue": "5.2.0-alpha.23",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"cross-env": "^5.2.0",
diff --git a/lerna.json b/lerna.json
index 89fd11c7e605..0305f8a07fd4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
"npmClient": "yarn",
"useWorkspaces": true,
"registry": "https://registry.npmjs.org",
- "version": "5.2.0-unreleased.0"
+ "version": "5.2.0-alpha.23"
}
diff --git a/lib/addons/package.json b/lib/addons/package.json
index d80049800092..8d360840d0b9 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addons store",
"keywords": [
"storybook"
@@ -21,9 +21,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
diff --git a/lib/api/package.json b/lib/api/package.json
index a51fd91b26fd..fd4301db46e3 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/api",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook API & Context",
"keywords": [
"storybook"
@@ -20,11 +20,11 @@
"prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index df17808a51ed..812f92ca9ba1 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-postmessage",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"telejson": "^2.2.1"
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index b5e069e699a0..86047f7ea804 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-websocket",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
@@ -21,7 +21,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"json-fn": "^1.1.1"
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 1f3c87bbef37..faf47c26ac53 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 3235fad74b24..bcbfdf040903 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
@@ -30,7 +30,7 @@
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.0.0",
- "@storybook/codemod": "5.2.0-unreleased.0",
+ "@storybook/codemod": "5.2.0-alpha.23",
"chalk": "^2.4.1",
"commander": "^2.19.0",
"core-js": "^3.0.1",
@@ -44,33 +44,33 @@
"update-notifier": "^3.0.0"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-graphql": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/angular": "5.2.0-unreleased.0",
- "@storybook/channel-postmessage": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/ember": "5.2.0-unreleased.0",
- "@storybook/html": "5.2.0-unreleased.0",
- "@storybook/marko": "5.2.0-unreleased.0",
- "@storybook/mithril": "5.2.0-unreleased.0",
- "@storybook/polymer": "5.2.0-unreleased.0",
- "@storybook/preact": "5.2.0-unreleased.0",
- "@storybook/rax": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/react-native": "5.2.0-unreleased.0",
- "@storybook/riot": "5.2.0-unreleased.0",
- "@storybook/svelte": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
- "@storybook/vue": "5.2.0-unreleased.0"
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-graphql": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/angular": "5.2.0-alpha.23",
+ "@storybook/channel-postmessage": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/ember": "5.2.0-alpha.23",
+ "@storybook/html": "5.2.0-alpha.23",
+ "@storybook/marko": "5.2.0-alpha.23",
+ "@storybook/mithril": "5.2.0-alpha.23",
+ "@storybook/polymer": "5.2.0-alpha.23",
+ "@storybook/preact": "5.2.0-alpha.23",
+ "@storybook/rax": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/react-native": "5.2.0-alpha.23",
+ "@storybook/riot": "5.2.0-alpha.23",
+ "@storybook/svelte": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
+ "@storybook/vue": "5.2.0-alpha.23"
},
"publishConfig": {
"access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 35b5013e530c..d781b1ec6c13 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Client API",
"keywords": [
"storybook"
@@ -20,10 +20,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"eventemitter3": "^3.1.0",
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 2efd927b72c3..ee741c4c72e3 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 65164f8aa834..a7adaa35a17f 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
diff --git a/lib/components/package.json b/lib/components/package.json
index 86093a6a420e..850c8da31186 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.1",
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 65cfb33e5614..a81023ad6143 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 4ad432f4aadf..3a48f831ba26 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -25,15 +25,15 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-env": "^7.4.5",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/channel-postmessage": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/channel-postmessage": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
"airbnb-js-shims": "^1 || ^2",
"autoprefixer": "^9.4.9",
"babel-plugin-add-react-displayname": "^0.0.5",
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 394893e9d444..a528c78fe19a 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/router/package.json b/lib/router/package.json
index 8308f486b757..40af241733f1 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 5361bdb4e362..abd05eb752fe 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -23,7 +23,7 @@
"dependencies": {
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.7",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 5e26ff06b0ed..afb6284864aa 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -22,13 +22,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"core-js-pure": "^3.0.1",
diff --git a/package.json b/package.json
index 30003863bddd..8150f2f30343 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
"keywords": [
From 9c88277b41c87c910c2ed417fe6feade73d58874 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Thu, 13 Jun 2019 11:08:38 +0900
Subject: [PATCH 067/371] Change importing style of isEqual
---
addons/events/src/components/Event.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
index d127d540b30c..7e3634959479 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
import { styled } from '@storybook/theming';
import json from 'format-json';
From 6c3e6c38271514fb2349425413882d8e81fff737 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Thu, 13 Jun 2019 11:14:45 +0900
Subject: [PATCH 068/371] Update snapshots
---
.../__snapshots__/storyshots.test.js.snap | 24 +++++++++----------
.../__snapshots__/Tooltip.stories.storyshot | 16 ++++++-------
.../TooltipLinkList.stories.storyshot | 8 +++----
.../TooltipMessage.stories.storyshot | 16 ++++++-------
.../WithTooltip.stories.storyshot | 4 ++--
5 files changed, 34 insertions(+), 34 deletions(-)
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 6da1f644e7f3..69cfc39a9ca0 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -5381,7 +5381,7 @@ exports[`Storyshots UI|Notifications/Item longText 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5395,7 +5395,7 @@ exports[`Storyshots UI|Notifications/Item longText 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5421,7 +5421,7 @@ exports[`Storyshots UI|Notifications/Item simple 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5435,7 +5435,7 @@ exports[`Storyshots UI|Notifications/Item simple 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5461,7 +5461,7 @@ exports[`Storyshots UI|Notifications/Item withLink 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5475,7 +5475,7 @@ exports[`Storyshots UI|Notifications/Item withLink 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5502,7 +5502,7 @@ exports[`Storyshots UI|Notifications/Notifications all 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5532,7 +5532,7 @@ exports[`Storyshots UI|Notifications/Notifications all 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5589,7 +5589,7 @@ exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5618,7 +5618,7 @@ exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5674,7 +5674,7 @@ exports[`Storyshots UI|Notifications/Notifications single 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5704,7 +5704,7 @@ exports[`Storyshots UI|Notifications/Notifications single 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
+ background-color: #F6F9FC;
-webkit-text-decoration: none;
text-decoration: none;
}
diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
index baeb3ec46624..a09351e0cfd1 100644
--- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -8,7 +8,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
- background: rgba(255,255,255,0.95);
+ background: #F6F9FC;
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -30,7 +30,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
border-top-width: 8px;
border-right-width: 8px;
border-left-width: 8px;
- border-top-color: rgba(255,255,255,0.95);
+ border-top-color: #F6F9FC;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@@ -77,7 +77,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
- background: rgba(255,255,255,0.95);
+ background: #F6F9FC;
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -100,7 +100,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
border-right-width: 8px;
border-left-width: 8px;
border-top-color: transparent;
- border-bottom-color: rgba(255,255,255,0.95);
+ border-bottom-color: #F6F9FC;
border-left-color: transparent;
border-right-color: transparent;
}
@@ -136,7 +136,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
margin-top: 0px;
margin-left: 0px;
margin-right: 10px;
- background: rgba(255,255,255,0.95);
+ background: #F6F9FC;
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -160,7 +160,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
border-left-width: 8px;
border-top-color: transparent;
border-bottom-color: transparent;
- border-left-color: rgba(255,255,255,0.95);
+ border-left-color: #F6F9FC;
border-right-color: transparent;
}
@@ -195,7 +195,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
margin-top: 0px;
margin-left: 10px;
margin-right: 0px;
- background: rgba(255,255,255,0.95);
+ background: #F6F9FC;
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -220,7 +220,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
- border-right-color: rgba(255,255,255,0.95);
+ border-right-color: #F6F9FC;
}
Date: Thu, 13 Jun 2019 10:46:16 +0200
Subject: [PATCH 069/371] chore(notes): add angular documentation
---
addons/notes/README.md | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/addons/notes/README.md b/addons/notes/README.md
index c4371d530874..8253c03b1b99 100644
--- a/addons/notes/README.md
+++ b/addons/notes/README.md
@@ -58,6 +58,27 @@ storiesOf('MyButton', module).add(
);
```
+### With Angular
+
+```js
+import { storiesOf } from '@storybook/vue';
+
+import { ButtonComponent } from './button.component';
+
+storiesOf('Button', module).add(
+ 'with some emoji',
+ () => ({
+ component: ButtonComponent,
+ props: {
+ text: '😀 😎 👍 💯'
+ }
+ }),
+ {
+ notes: 'A very simple example of addon notes',
+ }
+);
+```
+
## Using Markdown
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
From 14fc78f0af4173837287b90334d13d77689a2288 Mon Sep 17 00:00:00 2001
From: Jakub Werner
Date: Thu, 13 Jun 2019 12:42:34 +0200
Subject: [PATCH 070/371] change for contexts title fallback
---
.../src/manager/components/ToolBarControl.tsx | 2 +-
.../src/manager/components/ToolBarMenu.tsx | 14 +++++++++-----
.../stories/addon-contexts.stories.js | 1 -
lib/api/src/version.ts | 2 +-
4 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/addons/contexts/src/manager/components/ToolBarControl.tsx b/addons/contexts/src/manager/components/ToolBarControl.tsx
index 0fab1e873ed6..20de51e25559 100644
--- a/addons/contexts/src/manager/components/ToolBarControl.tsx
+++ b/addons/contexts/src/manager/components/ToolBarControl.tsx
@@ -47,5 +47,5 @@ export const ToolBarControl: ToolBarControl = ({
},
};
- return icon && list.length && !options.disable ? : null;
+ return list.length && !options.disable ? : null;
};
diff --git a/addons/contexts/src/manager/components/ToolBarMenu.tsx b/addons/contexts/src/manager/components/ToolBarMenu.tsx
index efba73366bbe..1054bddf83ea 100644
--- a/addons/contexts/src/manager/components/ToolBarMenu.tsx
+++ b/addons/contexts/src/manager/components/ToolBarMenu.tsx
@@ -1,10 +1,10 @@
import React, { ComponentProps } from 'react';
-import { Icons, IconButton, WithTooltip } from '@storybook/components';
+import { Icons, IconButton, WithTooltip, TabButton } from '@storybook/components';
import { ToolBarMenuOptions } from './ToolBarMenuOptions';
import { ContextNode, FCNoChildren } from '../../shared/types.d';
type ToolBarMenu = FCNoChildren<{
- icon: ComponentProps['icon'];
+ icon?: ComponentProps['icon'] | '' | void;
title: ContextNode['title'];
active: boolean;
expanded: boolean;
@@ -28,8 +28,12 @@ export const ToolBarMenu: ToolBarMenu = ({
onVisibilityChange={setExpanded}
tooltip={ }
>
-
-
-
+ {icon ? (
+
+
+
+ ) : (
+ {title}
+ )}
);
diff --git a/examples/official-storybook/stories/addon-contexts.stories.js b/examples/official-storybook/stories/addon-contexts.stories.js
index f7d8bb94ba60..7f646826d736 100644
--- a/examples/official-storybook/stories/addon-contexts.stories.js
+++ b/examples/official-storybook/stories/addon-contexts.stories.js
@@ -5,7 +5,6 @@ import { withContexts } from '@storybook/addon-contexts/react';
// Example A: Simple CSS Theming
const topLevelContexts = [
{
- icon: 'sidebaralt',
title: 'CSS Themes',
components: ['div'],
params: [
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 26f79de3bc32..cc27aa191530 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.2.0-unreleased.0';
+export const version = '5.2.0-alpha.23';
From 11fdc16aeff3fe5c102339897ccbb8187eda084c Mon Sep 17 00:00:00 2001
From: Jakub Werner
Date: Thu, 13 Jun 2019 12:49:48 +0200
Subject: [PATCH 071/371] adding test
---
.../manager/components/ToolBarMenu.test.tsx | 47 +++++++++++++++++++
1 file changed, 47 insertions(+)
diff --git a/addons/contexts/src/manager/components/ToolBarMenu.test.tsx b/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
index dd1e7ef26f4c..2d4e9a6942b0 100644
--- a/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
+++ b/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
@@ -53,4 +53,51 @@ describe('Tests on addon-contexts component: ToolBarMenu', () => {
`);
});
+
+ it('should render TabButton with title if the icon is given', () => {
+ // given
+ const someProps = {
+ title: 'Some Context',
+ active: true,
+ expanded: false,
+ setExpanded: jest.fn,
+ optionsProps: {
+ activeName: 'A',
+ list: ['A', 'B'],
+ onSelectOption: jest.fn,
+ },
+ };
+
+ // when
+ const result = shallow( );
+
+ // then
+ expect(result).toMatchInlineSnapshot(`
+
+ }
+ tooltipShown={false}
+ trigger="click"
+ >
+
+ Some Context
+
+
+ `);
+ });
});
From f2de67904542686785dcb6cc2046c251169888f6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 13:05:52 +0200
Subject: [PATCH 072/371] FIX the issue
---
lib/ui/src/components/sidebar/SidebarItem.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
index 6384ba727142..e2830f341994 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -49,7 +49,9 @@ const Icon = styled(Icons)(
({ isSelected }) => (isSelected ? { color: 'inherit' } : {})
);
-export const Item = styled.div(
+export const Item = styled(({ className, children }) => (
+ {children}
+))(
{
fontSize: 13,
lineHeight: '16px',
From 4167073cc5365d0340f2bfe6c0996df6bc19a798 Mon Sep 17 00:00:00 2001
From: "zoltan.kochan"
Date: Thu, 13 Jun 2019 14:08:20 +0300
Subject: [PATCH 073/371] Add missing dependencies to ui/react
---
app/react/package.json | 1 +
lib/ui/package.json | 1 +
2 files changed, 2 insertions(+)
diff --git a/app/react/package.json b/app/react/package.json
index af64149fb8d5..f86b8b938af5 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -32,6 +32,7 @@
"@storybook/core": "5.2.0-alpha.23",
"@storybook/node-logger": "5.2.0-alpha.23",
"@svgr/webpack": "^4.0.3",
+ "babel-plugin-add-react-displayname": "^0.0.5",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-plugin-react-docgen": "^3.0.0",
"babel-preset-react-app": "^9.0.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index afb6284864aa..5ae92fedb22a 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -24,6 +24,7 @@
"dependencies": {
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/api": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
"@storybook/client-logger": "5.2.0-alpha.23",
"@storybook/components": "5.2.0-alpha.23",
"@storybook/core-events": "5.2.0-alpha.23",
From e3c0d9386596eb7ae1138d4ad050f098c7baa056 Mon Sep 17 00:00:00 2001
From: Alex Wilson
Date: Thu, 13 Jun 2019 07:15:42 -0400
Subject: [PATCH 074/371] Update CONTRIBUTING.md
removed "If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybookjs/storybook/tree/master/lib/ui) page." because it was causing confusion and sending people to the hacking guide
---
CONTRIBUTING.md | 2 --
1 file changed, 2 deletions(-)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ab00172371e1..9d85e25c3b9c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -251,8 +251,6 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
## Development Guide
-> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybookjs/storybook/tree/master/lib/ui) page.
-
### Prerequisites
Please have the **_latest_** stable versions of the following on your machine
From 2a5778d9ecf7c31bf5d6febf5c1ee590ef52465e Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 13:51:31 +0200
Subject: [PATCH 075/371] FIX missing ID
---
lib/ui/src/components/sidebar/SidebarItem.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/lib/ui/src/components/sidebar/SidebarItem.js b/lib/ui/src/components/sidebar/SidebarItem.js
index e2830f341994..28f280440701 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.js
@@ -49,8 +49,10 @@ const Icon = styled(Icons)(
({ isSelected }) => (isSelected ? { color: 'inherit' } : {})
);
-export const Item = styled(({ className, children }) => (
- {children}
+export const Item = styled(({ className, children, id }) => (
+
+ {children}
+
))(
{
fontSize: 13,
From aebabf8069a3aad09654d8272b48e5a5fbbb13af Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 13:52:00 +0200
Subject: [PATCH 076/371] FIX version.ts file
---
lib/api/src/version.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 26f79de3bc32..cc27aa191530 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.2.0-unreleased.0';
+export const version = '5.2.0-alpha.23';
From be7e36c582295d06a6f5242edd5807322c1ceb29 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Thu, 13 Jun 2019 11:59:20 +0000
Subject: [PATCH 077/371] Bump styled-components from 4.3.0 to 4.3.1 in /docs
Bumps [styled-components](https://github.com/styled-components/styled-components) from 4.3.0 to 4.3.1.
- [Release notes](https://github.com/styled-components/styled-components/releases)
- [Changelog](https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md)
- [Commits](https://github.com/styled-components/styled-components/compare/v4.3.0...v4.3.1)
Signed-off-by: dependabot-preview[bot]
---
docs/package.json | 2 +-
docs/yarn.lock | 98 ++++++++++++++++++++++++++++++++++-------------
2 files changed, 73 insertions(+), 27 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index 412f5fa79baa..f834a7402a3b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -48,7 +48,7 @@
"react-stack-grid": "^0.7.1",
"recompose": "^0.30.0",
"sitemap": "^2.2.0",
- "styled-components": "^4.3.0",
+ "styled-components": "^4.3.1",
"validatorjs": "^3.15.1"
}
}
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 88064121dbba..2efeceaa4413 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -166,6 +166,17 @@
dependencies:
"@ndhoule/each" "^2.0.1"
+"@reach/router@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
+ integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
+ dependencies:
+ create-react-context "^0.2.1"
+ invariant "^2.2.3"
+ prop-types "^15.6.1"
+ react-lifecycles-compat "^3.0.4"
+ warning "^3.0.0"
+
"@segment/snippet@^4.0.1":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@segment/snippet/-/snippet-4.4.0.tgz#153f17b8048a2764bbb1343a61f3c3c24da038e2"
@@ -173,20 +184,21 @@
dependencies:
"@ndhoule/map" "^2.0.1"
-"@storybook/client-logger@5.1.3":
- version "5.1.3"
- resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.1.3.tgz#6d9f45fdac7d3f2f65d1238c35df11170c2f8b68"
- integrity sha512-/86NGA7NPsAktpA0lSnw0NhgdqS7Grz08wE7Paz+qLDj1AxnttTvMZctWJ8bLAa3EeJ9wHXGak854CmGiVFnWA==
+"@storybook/client-logger@5.2.0-alpha.23":
+ version "5.2.0-alpha.23"
+ resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.23.tgz#c59078b0041b8f443edeb24841e4b7a4908e3d0c"
+ integrity sha512-2TdYE+LBfmiiefRPt3DXVfRAxIu28vkc5pksgCbEwk1jscL6rAtD423HvcwhNR2nMdIDTzjBjkxq0ISp5dEmxw==
dependencies:
core-js "^3.0.1"
-"@storybook/components@5.1.3":
- version "5.1.3"
- resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.1.3.tgz#9c6898f8f66bf6b9dfdb3ecca73370f2d799e546"
- integrity sha512-lM+iSdIl/UlmPlgH3vqo8NhMAdPUrWkgp40CVADfXsM6Yxai/23gpg8/HEoHiU5hFjNxowJUt76gTvwt9ak+gg==
+"@storybook/components@5.2.0-alpha.23":
+ version "5.2.0-alpha.23"
+ resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.23.tgz#df38d9dc5cf8245025dec25b247f4ce1b593f2c6"
+ integrity sha512-NaeB+r3eZPoyfZ6FrZk58Sy4zJVoTpVLhUHpc1cAhlQol8chuptUxreBDo6aRFYtVKOd/9rnyU/7B32ddxI+OA==
dependencies:
- "@storybook/client-logger" "5.1.3"
- "@storybook/theming" "5.1.3"
+ "@storybook/client-logger" "5.2.0-alpha.23"
+ "@storybook/router" "5.2.0-alpha.23"
+ "@storybook/theming" "5.2.0-alpha.23"
core-js "^3.0.1"
global "^4.3.2"
markdown-to-jsx "^6.9.1"
@@ -194,8 +206,9 @@
polished "^3.3.1"
popper.js "^1.14.7"
prop-types "^15.7.2"
- react "^16.8.4"
- react-dom "^16.8.4"
+ react "^16.8.3"
+ react-addons-create-fragment "^15.6.2"
+ react-dom "^16.8.3"
react-focus-lock "^1.18.3"
react-helmet-async "^1.0.2"
react-popper-tooltip "^2.8.3"
@@ -204,14 +217,25 @@
recompose "^0.30.0"
simplebar-react "^1.0.0-alpha.6"
-"@storybook/theming@5.1.3":
- version "5.1.3"
- resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.1.3.tgz#705654392b020ef5654c6c500f4398cc7f067653"
- integrity sha512-ScBAEMkpwY6pHPuD7SYqAwbQ3M4cOEYY2340HtLNR53M6EJ2mcd87rH2kwpTEgTzeA0VuUln6WXEoBz3WRBLYA==
+"@storybook/router@5.2.0-alpha.23":
+ version "5.2.0-alpha.23"
+ resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.0-alpha.23.tgz#ce3d1bf997ad0e18925fb270d48a92514242e456"
+ integrity sha512-eTjJUN3GzwCHIR+nXzcVNEqvr/dlJExhC68JmkQ8QuabHXodnhWYLRyrUNc8ATJjUxdlc2VT/PBj0xq+PsUuHg==
+ dependencies:
+ "@reach/router" "^1.2.1"
+ core-js "^3.0.1"
+ global "^4.3.2"
+ memoizerific "^1.11.3"
+ qs "^6.6.0"
+
+"@storybook/theming@5.2.0-alpha.23":
+ version "5.2.0-alpha.23"
+ resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.23.tgz#8f0ae7345416b605db619896656393f567a72396"
+ integrity sha512-8kUpX7ojq4pZH082MOxTC3lHLBrO7POwKrmviZHMWt+93FvaLfSerl9CK0lbEbWt+L8ZdsG+cXRNJbc+PJEI7A==
dependencies:
"@emotion/core" "^10.0.9"
"@emotion/styled" "^10.0.7"
- "@storybook/client-logger" "5.1.3"
+ "@storybook/client-logger" "5.2.0-alpha.23"
common-tags "^1.8.0"
core-js "^3.0.1"
deep-object-diff "^1.1.0"
@@ -2946,6 +2970,14 @@ create-react-context@<=0.2.2:
fbjs "^0.8.0"
gud "^1.0.0"
+create-react-context@^0.2.1:
+ version "0.2.3"
+ resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+ integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+ dependencies:
+ fbjs "^0.8.0"
+ gud "^1.0.0"
+
cross-env@^3.1.1:
version "3.2.4"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
@@ -4276,7 +4308,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
-fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -5968,7 +6000,7 @@ interpret@^1.0.0:
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
-invariant@2.2.4, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -9557,6 +9589,11 @@ qs@6.5.2, qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+qs@^6.6.0:
+ version "6.7.0"
+ resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+ integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
query-string@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -9644,6 +9681,15 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+react-addons-create-fragment@^15.6.2:
+ version "15.6.2"
+ resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
+ integrity sha1-o5TefCx77Na1R1uhuXrEcs58dPg=
+ dependencies:
+ fbjs "^0.8.4"
+ loose-envify "^1.3.1"
+ object-assign "^4.1.0"
+
react-clientside-effect@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.0.tgz#db823695f75e9616a5e4dd6d908e5ea627fb2516"
@@ -9706,7 +9752,7 @@ react-dom@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
-react-dom@^16.8.4, react-dom@^16.8.6:
+react-dom@^16.8.3, react-dom@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -9773,7 +9819,7 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
-react-lifecycles-compat@^3.0.2:
+react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -9904,7 +9950,7 @@ react@15, react@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
-react@^16.8.4, react@^16.8.6:
+react@^16.8.3, react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -11645,10 +11691,10 @@ style-to-object@0.2.2:
dependencies:
css "2.2.4"
-styled-components@^4.3.0:
- version "4.3.0"
- resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.0.tgz#1dbc329b101e548b63184c6466d0bdd51c59bedc"
- integrity sha512-bm2o63f49gRFIXHzcsYWmam5OzEK2MMKuYXBGDrhQh3C8srRLDDwldylAgD3lNZrQT8SH1fTU5icZp9PyWrBpg==
+styled-components@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.1.tgz#18c3709f4ed9d582cd206b1acd8b758a211dd114"
+ integrity sha512-04XKQFFSEx3qTeN5I4kiSeajrwG6juDMw2+vUgvfxeXFegE40TuPKS4fFey8RJP1Ii1AoVQVUOglrdUUey0ZHw==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@emotion/is-prop-valid" "^0.7.3"
From 1aba4afc204815ba08716b249479e74fbc355bb6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 14:05:12 +0200
Subject: [PATCH 078/371] FIX snapshots
---
.../__snapshots__/storyshots.test.js.snap | 72 +++++++++++++++++++
1 file changed, 72 insertions(+)
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 913118b84dc5..55ea770a53a6 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -8061,6 +8061,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 9px;
}
+.emotion-11.emotion-11 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8093,6 +8097,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 24px;
}
+.emotion-19.emotion-19 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8125,6 +8133,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 39px;
}
+.emotion-27.emotion-27 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-27.emotion-27 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8157,6 +8169,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 54px;
}
+.emotion-31.emotion-31 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-31.emotion-31 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8421,6 +8437,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 9px;
}
+.emotion-11.emotion-11 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8453,6 +8473,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 24px;
}
+.emotion-19.emotion-19 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8485,6 +8509,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 39px;
}
+.emotion-27.emotion-27 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-27.emotion-27 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -8517,6 +8545,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
padding-left: 54px;
}
+.emotion-31.emotion-31 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-31.emotion-31 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -13107,6 +13139,10 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
padding-left: 9px;
}
+.emotion-3.emotion-3 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -13211,6 +13247,10 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
padding-left: 9px;
}
+.emotion-3.emotion-3 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15320,6 +15360,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 9px;
}
+.emotion-3.emotion-3 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15352,6 +15396,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 24px;
}
+.emotion-11.emotion-11 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15384,6 +15432,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 39px;
}
+.emotion-19.emotion-19 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15416,6 +15468,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 54px;
}
+.emotion-23.emotion-23 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-23.emotion-23 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15528,6 +15584,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 9px;
}
+.emotion-3.emotion-3 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-3.emotion-3 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15560,6 +15620,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 24px;
}
+.emotion-11.emotion-11 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-11.emotion-11 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15592,6 +15656,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 39px;
}
+.emotion-19.emotion-19 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-19.emotion-19 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
@@ -15624,6 +15692,10 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
padding-left: 54px;
}
+.emotion-23.emotion-23 > svg + span {
+ background: #DDDDDD;
+}
+
.emotion-23.emotion-23 > * {
-webkit-animation: animation-0 1.5s ease-in-out infinite;
animation: animation-0 1.5s ease-in-out infinite;
From ecbe98544446098d7ce87dba5d81383f40f513f6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 16:08:04 +0200
Subject: [PATCH 079/371] UPGRADE the plugin for core-js fix
---
lib/core/package.json | 2 +-
lib/ui/package.json | 2 +-
package.json | 2 +-
yarn.lock | 8 ++++----
4 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/lib/core/package.json b/lib/core/package.json
index 3a48f831ba26..14b9d3ba7ad0 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -47,7 +47,7 @@
"commander": "^2.19.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
- "corejs-upgrade-webpack-plugin": "^1.0.1",
+ "corejs-upgrade-webpack-plugin": "^2.0.0",
"css-loader": "^2.1.1",
"detect-port": "^1.3.0",
"dotenv-webpack": "^1.7.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index afb6284864aa..c06ef78f2f45 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -55,7 +55,7 @@
"util-deprecate": "^1.0.2"
},
"devDependencies": {
- "corejs-upgrade-webpack-plugin": "^1.0.1",
+ "corejs-upgrade-webpack-plugin": "^2.0.0",
"flush-promises": "^1.0.2",
"terser-webpack-plugin": "^1.2.4",
"webpack": "^4.33.0"
diff --git a/package.json b/package.json
index 8150f2f30343..914cbf3eb0c3 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
"common-tags": "^1.8.0",
"concurrently": "^4.0.1",
"core-js": "^3.0.1",
- "corejs-upgrade-webpack-plugin": "^1.0.1",
+ "corejs-upgrade-webpack-plugin": "^2.0.0",
"cross-env": "^5.2.0",
"danger": "^7.0.15",
"detect-port": "^1.3.0",
diff --git a/yarn.lock b/yarn.lock
index fb0d95340de8..de90f12b16a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8844,10 +8844,10 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-corejs-upgrade-webpack-plugin@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/corejs-upgrade-webpack-plugin/-/corejs-upgrade-webpack-plugin-1.0.1.tgz#6f54085a60da28e60c62d551dbd899812d16ad57"
- integrity sha512-WWZ7X0ly4TpnyoNypDNqQtq55Dyq2525iz5wD2Zq5mBC3qxIKY9Mm1Tfqf6xJxvQ1At9eC8i8aN5vLr444cunw==
+corejs-upgrade-webpack-plugin@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/corejs-upgrade-webpack-plugin/-/corejs-upgrade-webpack-plugin-2.0.0.tgz#adc05c9db427d87062c981373d28d4d174ddffcd"
+ integrity sha512-EiVJMYjo8uVkaj0JdQnfCW+ZuGPdloCDCSNTDdxr7R/9T+WHCx/4u2Q9kCNNMDRoB02jpyZPzrX5GBWNXM+Smg==
dependencies:
resolve-from "^5.0.0"
webpack "^4.33.0"
From 665b352de29a11d77fad5741867215d3edea88e6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 16:19:25 +0200
Subject: [PATCH 080/371] FIX lockfile
---
yarn.lock | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index 3de24a16bfd6..fa3b0f755ac6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10556,7 +10556,7 @@ emojis-list@^2.0.0:
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-emotion-theming@^10.0.9:
+emotion-theming@^10.0.10, emotion-theming@^10.0.9:
version "10.0.10"
resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.10.tgz#efe8751119751bdc70fdc1795fe4cde0fb0cf14c"
integrity sha512-E4SQ3Y91avxxydDgubi/po/GaC5MM1XHm8kcClKg1PA/TeOye0PiLBzAzlgt9dBzDRV9+qHDunsayPvzVYIYng==
@@ -20938,7 +20938,7 @@ pnp-webpack-plugin@1.2.1:
dependencies:
ts-pnp "^1.0.0"
-pnp-webpack-plugin@^1.2.1:
+pnp-webpack-plugin@1.4.3, pnp-webpack-plugin@^1.2.1:
version "1.4.3"
resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.4.3.tgz#0a100b63f4a1d09cee6ee55a87393b69f03ab5c7"
integrity sha512-ExrNwuFH3DudHwWY2uRMqyiCOBEDdhQYHIAsqW/CM6hIZlSgXC/ma/p08FoNOUhVyh9hl1NGnMpR94T5i3SHaQ==
From ca6487386a1b3f00132b16030b52d4db7e9e3647 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Thu, 13 Jun 2019 15:14:42 +0000
Subject: [PATCH 081/371] Bump html-react-parser from 0.7.0 to 0.7.1 in /docs
Bumps [html-react-parser](https://github.com/remarkablemark/html-react-parser) from 0.7.0 to 0.7.1.
- [Release notes](https://github.com/remarkablemark/html-react-parser/releases)
- [Changelog](https://github.com/remarkablemark/html-react-parser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/remarkablemark/html-react-parser/compare/v0.7.0...v0.7.1)
Signed-off-by: dependabot-preview[bot]
---
docs/package.json | 2 +-
docs/yarn.lock | 66 +++++++++++++++++++++++++++++++++++------------
2 files changed, 51 insertions(+), 17 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index f834a7402a3b..5168568d94a4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -33,7 +33,7 @@
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"global": "^4.4.0",
- "html-react-parser": "^0.7.0",
+ "html-react-parser": "^0.7.1",
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
"marked": "^0.6.2",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 2efeceaa4413..6af46929b909 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2895,6 +2895,11 @@ core-js@^2.4.0, core-js@^2.5.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
+core-js@^2.4.1:
+ version "2.6.9"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+ integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
+
core-js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.0.1.tgz#1343182634298f7f38622f95e73f54e48ddf4738"
@@ -4308,6 +4313,25 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
+fbjs-css-vars@^1.0.0:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+ integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
+
+fbjs@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+ integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
+ dependencies:
+ core-js "^2.4.1"
+ fbjs-css-vars "^1.0.0"
+ isomorphic-fetch "^2.1.1"
+ loose-envify "^1.0.0"
+ object-assign "^4.1.0"
+ promise "^7.1.1"
+ setimmediate "^1.0.5"
+ ua-parser-js "^0.7.18"
+
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@@ -5723,14 +5747,14 @@ html-entities@^1.2.0:
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
-html-react-parser@^0.7.0:
- version "0.7.0"
- resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.7.0.tgz#943b935ce76705bdbef13eed2fec7eee010e5d06"
- integrity sha512-CheTifRqOK1mFmtTnFnDUeHPrA19knrus4Hx+7lS/V5ywHvjAl5BMM8phVLWwLo73rqP2QBpnfvraXMMBgHqMw==
+html-react-parser@^0.7.1:
+ version "0.7.1"
+ resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.7.1.tgz#4230717092e1d2ea486bbe5e6b7f8c955b29cf91"
+ integrity sha512-e1rvyL5F4BjtQ+p89Y00lQem9A6G45WksytIwEpgxr7rVz4tF0vh1+jcQc8JfAjxWh8hOvzt2VCn1rPPpFZsVQ==
dependencies:
"@types/domhandler" "2.4.1"
html-dom-parser "0.2.1"
- react-dom-core "0.0.4"
+ react-dom-core "0.1.1"
style-to-object "0.2.2"
html-void-elements@^1.0.0, html-void-elements@^1.0.1:
@@ -8132,6 +8156,11 @@ oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+object-assign@4.1.1, object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+ integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
object-assign@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
@@ -8142,11 +8171,6 @@ object-assign@^3.0.0:
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
-object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
- integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
object-component@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
@@ -9681,6 +9705,14 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+react-15@0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/react-15/-/react-15-0.2.0.tgz#5cc915031b433c50bdec225d3ef8b80a07295175"
+ integrity sha512-9bdNuBo2I+2AerqURa37AcCKwHqjOvWuNrsd8wKXF+Y+ceBbJAJ1GkWeTliZV40RiEiAgRCLOzwCBxihCZvOfg==
+ dependencies:
+ fbjs "1.0.0"
+ object-assign "4.1.1"
+
react-addons-create-fragment@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
@@ -9735,12 +9767,14 @@ react-document-title@^2.0.3:
prop-types "^15.5.6"
react-side-effect "^1.0.2"
-react-dom-core@0.0.4:
- version "0.0.4"
- resolved "https://registry.yarnpkg.com/react-dom-core/-/react-dom-core-0.0.4.tgz#26ef74749c1235993b0e570a83308f323a485b2a"
- integrity sha512-nJoncKG/Ltlv3K7f0uVwX3kEvhrRl3dyKguxpYR3OmFF1REcRHiWWxSkD1hJdgeVfoBFp/DPVp48JZuaQhwLoQ==
+react-dom-core@0.1.1:
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/react-dom-core/-/react-dom-core-0.1.1.tgz#d580a72941f84f7b5b53d95d406b654181fb8021"
+ integrity sha512-06UPgimujyIOsR9owLdLy5731O8rxs/CZrFYX/ZPDLC6VUDwJuTkPWmLVA03es1tO7JqsqsET4rVe0cfKBEQXA==
dependencies:
- react "15"
+ fbjs "1.0.0"
+ object-assign "4.1.1"
+ react-15 "0.2.0"
react-dom@^15.6.0:
version "15.6.2"
@@ -9939,7 +9973,7 @@ react-transition-group@^1.2.0:
prop-types "^15.5.6"
warning "^3.0.0"
-react@15, react@^15.6.0:
+react@^15.6.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
From 280fdb04603ed3371ace0721c1a6795e94243e5d Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 17:30:46 +0200
Subject: [PATCH 082/371] ADD packtracker to official example
---
examples/official-storybook/package.json | 4 ++-
yarn.lock | 32 ++++++++++++++++++++++++
2 files changed, 35 insertions(+), 1 deletion(-)
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index da0b260ec49e..db7861c4175d 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -10,9 +10,11 @@
"graphql": "node ./graphql-server/index.js",
"image-snapshots": "yarn run build-storybook && yarn run do-image-snapshots",
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
- "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
+ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll",
+ "packtracker": "yarn storybook --smoke-test && packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json"
},
"devDependencies": {
+ "@packtracker/webpack-plugin": "^2.0.1",
"@storybook/addon-a11y": "5.2.0-alpha.23",
"@storybook/addon-actions": "5.2.0-alpha.23",
"@storybook/addon-backgrounds": "5.2.0-alpha.23",
diff --git a/yarn.lock b/yarn.lock
index fb0d95340de8..2beabbf41c81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3240,6 +3240,17 @@
universal-user-agent "^2.0.0"
url-template "^2.0.8"
+"@packtracker/webpack-plugin@^2.0.1":
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/@packtracker/webpack-plugin/-/webpack-plugin-2.0.1.tgz#bd188431f724b759231f844fad031b20bb4616f3"
+ integrity sha512-OjzXfDsEjQuxLqPpSwjDIktIDBV7ygw58j2vNk41cJo/lDS/aPuBwKCmcbW7PraL5y+gQ0yxurVSKdda9t5LgA==
+ dependencies:
+ lodash "^4.17.11"
+ minimist "^1.2.0"
+ omit-deep "^0.3.0"
+ tiny-json-http "^7.0.2"
+ webpack-bundle-analyzer "^3.0.4"
+
"@polymer/polymer@^2.6.0":
version "2.7.2"
resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-2.7.2.tgz#ae49d14b412acf065527ae44db3db5b802d16867"
@@ -19932,6 +19943,14 @@ omggif@^1.0.9:
resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.9.tgz#dcb7024dacd50c52b4d303f04802c91c057c765f"
integrity sha1-3LcCTazVDFK00wPwSALJHAV8dl8=
+omit-deep@^0.3.0:
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/omit-deep/-/omit-deep-0.3.0.tgz#21c8af3499bcadd29651a232cbcacbc52445ebec"
+ integrity sha1-IcivNJm8rdKWUaIyy8rLxSRF6+w=
+ dependencies:
+ is-plain-object "^2.0.1"
+ unset-value "^0.1.1"
+
on-finished@~2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -26720,6 +26739,11 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+tiny-json-http@^7.0.2:
+ version "7.1.2"
+ resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.1.2.tgz#620e189849bab08992ec23fada7b48c7c61637b4"
+ integrity sha512-XB9Bu+ohdQso6ziPFNVqK+pcTt0l8BSRkW/CCBq0pUVlLxcYDsorpo7ae5yPhu2CF1xYgJuKVLF7cfOGeLCTlA==
+
tiny-lr@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.1.1.tgz#9fa547412f238fedb068ee295af8b682c98b2aab"
@@ -27604,6 +27628,14 @@ unquote@^1.1.0, unquote@~1.1.1:
resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
+unset-value@^0.1.1:
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-0.1.2.tgz#506810b867f27c2a5a6e9b04833631f6de58d310"
+ integrity sha1-UGgQuGfyfCpabpsEgzYx9t5Y0xA=
+ dependencies:
+ has-value "^0.3.1"
+ isobject "^3.0.0"
+
unset-value@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
From 0e3254613a54ad0cdbea5b70cd7b815f611db7da Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 20:46:53 +0200
Subject: [PATCH 083/371] Found a really bad import, leading to the entire
library of highlight.js being included
---
addons/storysource/src/StoryPanel.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
index 939629be46dd..afa1d63ce276 100644
--- a/addons/storysource/src/StoryPanel.js
+++ b/addons/storysource/src/StoryPanel.js
@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
import { Link } from '@storybook/router';
import { SyntaxHighlighter } from '@storybook/components';
-import { createElement } from 'react-syntax-highlighter';
+import createElement from 'react-syntax-highlighter/create-element';
import { EVENT_ID } from './events';
const StyledStoryLink = styled(Link)(({ theme }) => ({
From c173bf0e8a7d7394dab806c190a9662e2a34028d Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 21:07:26 +0200
Subject: [PATCH 084/371] ADD job to CircleCI
---
.circleci/config.yml | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4a162f629341..9f6b618ddb80 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -50,6 +50,17 @@ jobs:
- run:
name: Run chromatic on the pre-built storybook
command: yarn chromatic -- -d ./storybook-static
+ packtracker:
+ <<: *defaults
+ steps:
+ - checkout
+ - attach_workspace:
+ at: .
+ - run:
+ name: Report webpack stats for manager of official storybook
+ command: |
+ cd examples/official-storybook
+ yarn packtracker
examples:
<<: *defaults
steps:
@@ -350,6 +361,9 @@ workflows:
- smoke-tests:
requires:
- build
+ - packtracker:
+ requires:
+ - build
- native-smoke-tests:
requires:
- build
From b8ac710fbec1112c66371d6312cbac76279c01db Mon Sep 17 00:00:00 2001
From: lonyele
Date: Fri, 14 Jun 2019 04:23:59 +0900
Subject: [PATCH 085/371] Fix stupid mistake
---
lib/theming/src/utils.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/theming/src/utils.ts b/lib/theming/src/utils.ts
index 48e27411828d..445ce2f683d9 100644
--- a/lib/theming/src/utils.ts
+++ b/lib/theming/src/utils.ts
@@ -23,7 +23,7 @@ const isColorString = (color: string) => {
// that crashes the entire storybook. It needs to be guarded when arguments
// of those functions are from user input.
const isValidColorForPolished = (color: string) => {
- return /(gradient|var|calc)/.test(color);
+ return !/(gradient|var|calc)/.test(color);
};
const applyPolished = (type: string, color: string) => {
From 73fca95969f2914286a6c475e16c37d687f568c2 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Fri, 14 Jun 2019 04:52:15 +0900
Subject: [PATCH 086/371] Fix snapshots
---
.../__snapshots__/storyshots.test.js.snap | 24 +++++++++----------
.../__snapshots__/Tooltip.stories.storyshot | 16 ++++++-------
.../TooltipLinkList.stories.storyshot | 8 +++----
.../TooltipMessage.stories.storyshot | 16 ++++++-------
.../WithTooltip.stories.storyshot | 4 ++--
5 files changed, 34 insertions(+), 34 deletions(-)
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 69cfc39a9ca0..6da1f644e7f3 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -5381,7 +5381,7 @@ exports[`Storyshots UI|Notifications/Item longText 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5395,7 +5395,7 @@ exports[`Storyshots UI|Notifications/Item longText 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5421,7 +5421,7 @@ exports[`Storyshots UI|Notifications/Item simple 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5435,7 +5435,7 @@ exports[`Storyshots UI|Notifications/Item simple 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5461,7 +5461,7 @@ exports[`Storyshots UI|Notifications/Item withLink 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5475,7 +5475,7 @@ exports[`Storyshots UI|Notifications/Item withLink 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5502,7 +5502,7 @@ exports[`Storyshots UI|Notifications/Notifications all 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5532,7 +5532,7 @@ exports[`Storyshots UI|Notifications/Notifications all 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5589,7 +5589,7 @@ exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5618,7 +5618,7 @@ exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5674,7 +5674,7 @@ exports[`Storyshots UI|Notifications/Notifications single 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -5704,7 +5704,7 @@ exports[`Storyshots UI|Notifications/Notifications single 1`] = `
line-height: 16px;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
color: #FFFFFF;
- background-color: #F6F9FC;
+ background-color: rgba(0,0,0,0.95);
-webkit-text-decoration: none;
text-decoration: none;
}
diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
index a09351e0cfd1..baeb3ec46624 100644
--- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
+++ b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
@@ -8,7 +8,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
- background: #F6F9FC;
+ background: rgba(255,255,255,0.95);
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -30,7 +30,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
border-top-width: 8px;
border-right-width: 8px;
border-left-width: 8px;
- border-top-color: #F6F9FC;
+ border-top-color: rgba(255,255,255,0.95);
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
@@ -77,7 +77,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
- background: #F6F9FC;
+ background: rgba(255,255,255,0.95);
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -100,7 +100,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
border-right-width: 8px;
border-left-width: 8px;
border-top-color: transparent;
- border-bottom-color: #F6F9FC;
+ border-bottom-color: rgba(255,255,255,0.95);
border-left-color: transparent;
border-right-color: transparent;
}
@@ -136,7 +136,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
margin-top: 0px;
margin-left: 0px;
margin-right: 10px;
- background: #F6F9FC;
+ background: rgba(255,255,255,0.95);
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -160,7 +160,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
border-left-width: 8px;
border-top-color: transparent;
border-bottom-color: transparent;
- border-left-color: #F6F9FC;
+ border-left-color: rgba(255,255,255,0.95);
border-right-color: transparent;
}
@@ -195,7 +195,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
margin-top: 0px;
margin-left: 10px;
margin-right: 0px;
- background: #F6F9FC;
+ background: rgba(255,255,255,0.95);
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 8px;
@@ -220,7 +220,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
- border-right-color: #F6F9FC;
+ border-right-color: rgba(255,255,255,0.95);
}
Date: Fri, 14 Jun 2019 05:12:06 +0900
Subject: [PATCH 087/371] Add test case for valid arguments
---
lib/theming/src/tests/util.test.js | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/lib/theming/src/tests/util.test.js b/lib/theming/src/tests/util.test.js
index 1cbba95d65a6..d2e6f57ffce5 100644
--- a/lib/theming/src/tests/util.test.js
+++ b/lib/theming/src/tests/util.test.js
@@ -1,6 +1,16 @@
import { lightenColor as lighten, darkenColor as darken } from '../utils';
describe('utils', () => {
+ it('should apply polished when valid arguments are passed', () => {
+ const lightColor = '#F6F9FC';
+ const darkColor = '#2f2f2f';
+ const darkenedColor = darken(lightColor);
+ const lightenedColor = lighten(darkColor);
+
+ expect(darkenedColor).toEqual('rgba(0,0,0,0.95)');
+ expect(lightenedColor).toEqual('rgba(255,255,255,0.95)');
+ });
+
it('should guard non-string value is being passed to color of theme object', () => {
const result = () => {
return lighten(1234);
From bbb099ac4e0a7e3f6984e4c58509b462a7cf23ac Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Fri, 14 Jun 2019 04:45:19 +0800
Subject: [PATCH 088/371] Addon-contexts: Add core-js dep
---
addons/contexts/package.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index 4796b46bb4f5..440d6de19e6a 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -31,7 +31,8 @@
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/api": "5.2.0-alpha.23",
"@storybook/components": "5.2.0-alpha.23",
- "@storybook/core-events": "5.2.0-alpha.23"
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "core-js": "^3.0.1"
},
"peerDependencies": {
"global": "*",
From 204d6ad3bebba76ca9a2d11abe216805e5ad0dd1 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Fri, 14 Jun 2019 05:05:19 +0800
Subject: [PATCH 089/371] RN-server: Add core-js dep
---
app/react-native-server/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index 17acc5504495..3909caf157e8 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -31,6 +31,7 @@
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/ui": "5.2.0-alpha.23",
"commander": "^2.19.0",
+ "core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.6.0",
"react-dom": "^16.8.3",
From 7629704d44c183602d055472da0c9ab76d2f65d7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 14 Jun 2019 00:42:40 +0200
Subject: [PATCH 090/371] IMPROVEMENTS on addon-info, I know shocker right?
---
addons/info/package.json | 1 +
addons/info/src/components/Node.js | 179 --------------------
addons/info/src/components/Story.js | 96 ++++-------
addons/info/src/components/markdown/code.js | 4 +-
addons/info/src/components/markdown/text.js | 20 +--
yarn.lock | 119 ++++++++++++-
6 files changed, 155 insertions(+), 264 deletions(-)
delete mode 100644 addons/info/src/components/Node.js
diff --git a/addons/info/package.json b/addons/info/package.json
index 1dd2b8e3a6fd..65ddf062ed69 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -28,6 +28,7 @@
"@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
+ "jsx-to-string": "^1.4.0",
"marksy": "^7.0.0",
"nested-object-assign": "^1.0.3",
"prop-types": "^15.7.2",
diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
deleted file mode 100644
index a51c716a27ad..000000000000
--- a/addons/info/src/components/Node.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React from 'react';
-import { isForwardRef } from 'react-is';
-import PropTypes from 'prop-types';
-import Props from './Props';
-import { getDisplayName } from '../react-utils';
-
-const stylesheet = {
- containerStyle: {},
- tagStyle: {
- color: '#444',
- },
-};
-
-function getData(element) {
- const data = {
- name: null,
- text: null,
- children: null,
- };
-
- if (element === null) {
- return data;
- }
-
- if (typeof element === 'string') {
- data.text = element;
- return data;
- }
-
- if (typeof element === 'number') {
- data.text = String.toString(element);
- return data;
- }
-
- data.children = element.props.children;
- data.name = getDisplayName(element.type);
-
- return data;
-}
-
-export default function Node(props) {
- const {
- node,
- depth,
- maxPropsIntoLine,
- maxPropObjectKeys,
- maxPropArrayLength,
- maxPropStringLength,
- } = props;
- const { tagStyle, containerStyle } = stylesheet;
-
- const leftPad = {
- paddingLeft: 3 + (depth + 1) * 15,
- paddingRight: 3,
- };
-
- // Keep a copy so that further mutations to containerStyle don't impact us:
- const containerStyleCopy = Object.assign({}, containerStyle, leftPad);
-
- const { name, text, children } = getData(node);
-
- // Just text
- if (!name) {
- return (
-
- {text}
-
- );
- }
-
- if (isForwardRef(node) && !node.type.displayName) {
- const childElement = node.type.render(node.props);
- return (
-
-
-
- <
- {`ForwardRef`}
-
-
-
>
-
-
-
-
- </
- {`ForwardRef`}
- >
-
-
-
- );
- }
-
- // Single-line tag
- if (!children) {
- return (
-
-
- <
- {name}
-
-
-
/>
-
- );
- }
-
- // tag with children
- return (
-
-
- {React.Children.map(children, childElement => (
-
- ))}
-
-
- </
- {name}
- >
-
-
-
- );
-}
-
-Node.defaultProps = {
- node: null,
- depth: 0,
-};
-
-Node.propTypes = {
- node: PropTypes.node,
- depth: PropTypes.number,
- maxPropsIntoLine: PropTypes.number.isRequired,
- maxPropObjectKeys: PropTypes.number.isRequired,
- maxPropArrayLength: PropTypes.number.isRequired,
- maxPropStringLength: PropTypes.number.isRequired,
-};
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index a8dc10026c6d..61d61cdda461 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -1,14 +1,14 @@
/* eslint no-underscore-dangle: 0 */
-import React, { Component, createElement } from 'react';
+import React, { Fragment, Component, createElement } from 'react';
import { isForwardRef } from 'react-is';
import { polyfill } from 'react-lifecycles-compat';
import PropTypes from 'prop-types';
import global from 'global';
import marksy from 'marksy';
-import Node from './Node';
-import { Pre } from './markdown';
+import jsxToString from 'react-element-to-jsx-string';
+import { Code } from './markdown';
import { getDisplayName, getType } from '../react-utils';
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
@@ -37,10 +37,9 @@ const stylesheetBase = {
position: 'fixed',
background: 'white',
top: 0,
- bottom: 0,
left: 0,
- right: 0,
- padding: '0 40px',
+ height: '110vh',
+ width: '100vw',
overflow: 'auto',
zIndex: 99999,
},
@@ -54,12 +53,9 @@ const stylesheetBase = {
fontWeight: 300,
lineHeight: 1.45,
fontSize: '15px',
- border: '1px solid #eee',
padding: '20px 40px 40px',
borderRadius: '2px',
backgroundColor: '#fff',
- marginTop: '20px',
- marginBottom: '20px',
},
infoContent: {
marginBottom: 0,
@@ -133,7 +129,7 @@ class Story extends Component {
const { stylesheet } = this.state;
return (
-
+
{this._renderInlineHeader()}
{this._renderStory()}
@@ -144,7 +140,7 @@ class Story extends Component {
{this._getPropTables()}
-
+
);
}
@@ -187,7 +183,7 @@ class Story extends Component {
};
return (
-
+
{children}
Show Info
-
-
- ×
-
-
-
- {this._getInfoHeader()}
- {this._getInfoContent()}
- {this._getComponentDescription()}
- {this._getSourceCode()}
- {this._getPropTables()}
+ {open ? (
+
+
+ ×
+
+
+
+ {this._getInfoHeader()}
+ {this._getInfoContent()}
+ {this._getComponentDescription()}
+ {this._getSourceCode()}
+ {this._getPropTables()}
+
-
-
+ ) : null}
+
);
}
@@ -260,7 +258,8 @@ class Story extends Component {
padding = matches[0].length;
}
const source = lines.map(s => s.slice(padding)).join('\n');
- return
{this.marksy(source).tree}
;
+
+ return
{this.marksy(source).tree} ;
}
_getComponentDescription() {
@@ -275,7 +274,7 @@ class Story extends Component {
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
- retDiv =
{this.marksy(componentDescription).tree}
;
+ retDiv =
{this.marksy(componentDescription).tree} ;
}
});
}
@@ -284,14 +283,7 @@ class Story extends Component {
}
_getSourceCode() {
- const {
- showSource,
- maxPropsIntoLine,
- maxPropObjectKeys,
- maxPropArrayLength,
- maxPropStringLength,
- children,
- } = this.props;
+ const { showSource, children } = this.props;
const { stylesheet } = this.state;
if (!showSource) {
@@ -299,22 +291,10 @@ class Story extends Component {
}
return (
-
+
Story Source
-
- {React.Children.map(children, (root, idx) => (
-
- ))}
-
-
+
+
);
}
@@ -404,16 +384,15 @@ class Story extends Component {
}
return (
-
+
Prop Types
{propTables}
-
+
);
}
render() {
const { showInline } = this.props;
- //
return showInline ? this._renderInline() : this._renderOverlay();
}
}
@@ -437,7 +416,6 @@ Story.propTypes = {
styles: PropTypes.func.isRequired,
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
components: PropTypes.shape({}),
- maxPropsIntoLine: PropTypes.number.isRequired,
maxPropObjectKeys: PropTypes.number.isRequired,
maxPropArrayLength: PropTypes.number.isRequired,
maxPropStringLength: PropTypes.number.isRequired,
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
index 141aa3de5da5..3bd41509241c 100644
--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { SyntaxHighlighter } from '@storybook/components';
import { ThemeProvider, convert } from '@storybook/theming';
-const Code = ({ code, language = 'plaintext' }) => (
+const Code = ({ code, language = 'plaintext', ...rest }) => (
-
+
{code}
diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js
index f7928328bd5f..356a4575cd5e 100644
--- a/addons/info/src/components/markdown/text.js
+++ b/addons/info/src/components/markdown/text.js
@@ -5,35 +5,21 @@ const defaultProps = { children: null };
const propTypes = { children: PropTypes.node };
export function P({ children }) {
- const style = {
- fontSize: '15px',
- };
-
- //
is oftentimes used as a parent element of
- // and elements, which is why
- // is used as the outputted element when parsing
- // marksy content rather than
.
- return
{children}
;
+ return
{children}
;
}
P.defaultProps = defaultProps;
P.propTypes = propTypes;
export function LI({ children }) {
- const style = {
- fontSize: '15px',
- };
- return
{children} ;
+ return
{children} ;
}
LI.defaultProps = defaultProps;
LI.propTypes = propTypes;
export function UL({ children }) {
- const style = {
- fontSize: '15px',
- };
- return
;
+ return
;
}
UL.defaultProps = defaultProps;
diff --git a/yarn.lock b/yarn.lock
index de90f12b16a7..adeae948831e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4340,7 +4340,7 @@ acorn@^3.0.4:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
-acorn@^5.0.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2:
+acorn@^5.0.0, acorn@^5.2.1, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2:
version "5.7.3"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
@@ -6428,6 +6428,11 @@ base32.js@0.1.0:
resolved "https://registry.yarnpkg.com/base32.js/-/base32.js-0.1.0.tgz#b582dec693c2f11e893cf064ee6ac5b6131a2202"
integrity sha1-tYLexpPC8R6JPPBk7mrFthMaIgI=
+base62@^1.1.0:
+ version "1.2.8"
+ resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
+ integrity sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==
+
base64-arraybuffer@0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
@@ -8378,7 +8383,7 @@ commander@2.8.x:
dependencies:
graceful-readlink ">= 1.0.0"
-commander@^2.11.0, commander@^2.12.1, commander@^2.14.1, commander@^2.15.1, commander@^2.18.0, commander@^2.19.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0, commander@~2.20.0:
+commander@^2.11.0, commander@^2.12.1, commander@^2.14.1, commander@^2.15.1, commander@^2.18.0, commander@^2.19.0, commander@^2.5.0, commander@^2.6.0, commander@^2.8.1, commander@^2.9.0, commander@~2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -8403,6 +8408,21 @@ commondir@^1.0.1:
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+commoner@^0.10.1:
+ version "0.10.8"
+ resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
+ integrity sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=
+ dependencies:
+ commander "^2.5.0"
+ detective "^4.3.1"
+ glob "^5.0.15"
+ graceful-fs "^4.1.2"
+ iconv-lite "^0.4.5"
+ mkdirp "^0.5.0"
+ private "^0.1.6"
+ q "^1.1.2"
+ recast "^0.11.17"
+
compare-func@^1.3.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
@@ -9820,6 +9840,14 @@ detect-port@^1.3.0:
address "^1.0.1"
debug "^2.6.0"
+detective@^4.3.1:
+ version "4.7.1"
+ resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
+ integrity sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==
+ dependencies:
+ acorn "^5.2.1"
+ defined "^1.0.0"
+
detective@^5.0.2:
version "5.2.0"
resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
@@ -10674,6 +10702,14 @@ env-ci@^2.1.0:
execa "^1.0.0"
java-properties "^0.2.9"
+envify@^3.0.0:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/envify/-/envify-3.4.1.tgz#d7122329e8df1688ba771b12501917c9ce5cbce8"
+ integrity sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=
+ dependencies:
+ jstransform "^11.0.3"
+ through "~2.3.4"
+
envinfo@5.10.0:
version "5.10.0"
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.10.0.tgz#503a9774ae15b93ea68bdfae2ccd6306624ea6df"
@@ -11173,6 +11209,11 @@ espree@^5.0.1:
acorn-jsx "^5.0.0"
eslint-visitor-keys "^1.0.0"
+esprima-fb@^15001.1.0-dev-harmony-fb:
+ version "15001.1.0-dev-harmony-fb"
+ resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz#30a947303c6b8d5e955bee2b99b1d233206a6901"
+ integrity sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=
+
esprima@^3.1.3, esprima@~3.1.0:
version "3.1.3"
resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -12215,6 +12256,17 @@ fbjs@0.8.17, fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
+fbjs@^0.6.1:
+ version "0.6.1"
+ resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.6.1.tgz#9636b7705f5ba9684d44b72f78321254afc860f7"
+ integrity sha1-lja3cF9bqWhNRLcveDISVK/IYPc=
+ dependencies:
+ core-js "^1.0.0"
+ loose-envify "^1.0.0"
+ promise "^7.0.3"
+ ua-parser-js "^0.7.9"
+ whatwg-fetch "^0.9.0"
+
fbjs@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
@@ -13177,7 +13229,7 @@ glob@7.1.3:
once "^1.3.0"
path-is-absolute "^1.0.0"
-glob@^5.0.10:
+glob@^5.0.10, glob@^5.0.15:
version "5.0.15"
resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
@@ -14135,7 +14187,7 @@ iconv-lite@0.4.23:
dependencies:
safer-buffer ">= 2.1.2 < 3"
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@^0.4.5, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -14244,6 +14296,11 @@ immer@1.10.0:
resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
+immutable@^4.0.0-rc.9:
+ version "4.0.0-rc.12"
+ resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
+ integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==
+
import-cwd@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -16509,6 +16566,11 @@ json-stable-stringify@~0.0.0:
dependencies:
jsonify "~0.0.0"
+json-stringify-pretty-compact@^1.0.1:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-1.2.0.tgz#0bc316b5e6831c07041fc35612487fb4e9ab98b8"
+ integrity sha512-/11Pj1OyX814QMKO7K8l85SHPTr/KsFxHp8GE2zVa0BtJgGimDjXHfM3FhC7keQdWDea7+nXf+f1de7ATZcZkQ==
+
json-stringify-safe@5.0.x, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
@@ -16603,6 +16665,17 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
+jstransform@^11.0.3:
+ version "11.0.3"
+ resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-11.0.3.tgz#09a78993e0ae4d4ef4487f6155a91f6190cb4223"
+ integrity sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=
+ dependencies:
+ base62 "^1.1.0"
+ commoner "^0.10.1"
+ esprima-fb "^15001.1.0-dev-harmony-fb"
+ object-assign "^2.0.0"
+ source-map "^0.4.2"
+
jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz#0ee4e2c971fb9601c67b5641b71be80faecf0b36"
@@ -16610,6 +16683,15 @@ jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0:
dependencies:
array-includes "^3.0.3"
+jsx-to-string@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/jsx-to-string/-/jsx-to-string-1.4.0.tgz#66dc34d773dab9f40fe993cff9940e5da655b705"
+ integrity sha1-Ztw013PaufQP6ZPP+ZQOXaZVtwU=
+ dependencies:
+ immutable "^4.0.0-rc.9"
+ json-stringify-pretty-compact "^1.0.1"
+ react "^0.14.0"
+
jszip@^3.1.3:
version "3.2.1"
resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.2.1.tgz#c5d32df7274042282b157efb16e522b43435e01a"
@@ -19813,6 +19895,11 @@ object-assign@4.1.1, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+object-assign@^2.0.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
+ integrity sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=
+
object-component@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
@@ -21927,7 +22014,7 @@ promise@8.0.2:
dependencies:
asap "~2.0.6"
-promise@^7.1.1:
+promise@^7.0.3, promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
@@ -23307,6 +23394,14 @@ react@*, react@16.8.6, react@^16.6.0, react@^16.8.3:
prop-types "^15.6.2"
scheduler "^0.13.6"
+react@^0.14.0:
+ version "0.14.9"
+ resolved "https://registry.yarnpkg.com/react/-/react-0.14.9.tgz#9110a6497c49d44ba1c0edd317aec29c2e0d91d1"
+ integrity sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=
+ dependencies:
+ envify "^3.0.0"
+ fbjs "^0.6.1"
+
react@^15.4.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -23557,7 +23652,7 @@ realpath-native@^1.0.0, realpath-native@^1.1.0:
dependencies:
util.promisify "^1.0.0"
-recast@^0.11.3, recast@~0.11.12:
+recast@^0.11.17, recast@^0.11.3, recast@~0.11.12:
version "0.11.23"
resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
@@ -26666,7 +26761,7 @@ through2@^3.0.0, through2@^3.0.1:
dependencies:
readable-stream "2 || 3"
-through@2, through@2.3.x, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3.6:
+through@2, through@2.3.x, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3.4, through@~2.3.6:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -27255,6 +27350,11 @@ ua-parser-js@^0.7.18, ua-parser-js@^0.7.19:
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
+ua-parser-js@^0.7.9:
+ version "0.7.20"
+ resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
+ integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
+
uc.micro@^1.0.1, uc.micro@^1.0.5:
version "1.0.6"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -28674,6 +28774,11 @@ whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+whatwg-fetch@^0.9.0:
+ version "0.9.0"
+ resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"
+ integrity sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=
+
whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
From a56011e961c483c8d9de73ed0b26d029fee5b903 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 14 Jun 2019 01:06:38 +0200
Subject: [PATCH 091/371] ADD token
---
examples/official-storybook/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index db7861c4175d..62534d8b0ec7 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -11,7 +11,7 @@
"image-snapshots": "yarn run build-storybook && yarn run do-image-snapshots",
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll",
- "packtracker": "yarn storybook --smoke-test && packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json"
+ "packtracker": "yarn storybook --smoke-test && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json"
},
"devDependencies": {
"@packtracker/webpack-plugin": "^2.0.1",
From 27bbe744a178772224416a0cd4718e4242c551e8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Fri, 14 Jun 2019 01:08:01 +0200
Subject: [PATCH 092/371] less logs please
---
examples/official-storybook/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 62534d8b0ec7..bea9479e0714 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -11,7 +11,7 @@
"image-snapshots": "yarn run build-storybook && yarn run do-image-snapshots",
"now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll",
- "packtracker": "yarn storybook --smoke-test && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json"
+ "packtracker": "yarn storybook --smoke-test --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json"
},
"devDependencies": {
"@packtracker/webpack-plugin": "^2.0.1",
From 51f0a2bf78bdc351d02a15283385f46daa5bdba4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Thu, 13 Jun 2019 15:22:07 +0800
Subject: [PATCH 093/371] Update .gitignore
---
.gitignore | 1 +
1 file changed, 1 insertion(+)
diff --git a/.gitignore b/.gitignore
index 59f8c038fc3a..c32ab0154880 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,4 @@ lib/**/dll
.expo/packager-info.json
scripts/storage
htpasswd
+/false
\ No newline at end of file
From c46c1706c93060cbd19d084bdbc64da4f6225629 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Fri, 14 Jun 2019 15:45:22 +0800
Subject: [PATCH 094/371] Add corejs migration notes
---
MIGRATION.md | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/MIGRATION.md b/MIGRATION.md
index ce02e51fc798..e768f1ba27ef 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -3,6 +3,7 @@
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
+ - [CoreJS 3](#corejs-3)
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
@@ -101,6 +102,18 @@ You should now be able to run Storybook and Angular 7 without any errors.
Reference issue: [https://github.com/angular/angular-cli/issues/13954](https://github.com/angular/angular-cli/issues/13954)
+### CoreJS 3
+
+Following the rest of the JS ecosystem, Storybook 5.1 upgrades [CoreJS](https://github.com/zloirock/core-js) 2 to 3, which is a breaking change.
+
+This upgrade is problematic because many apps/libraries still rely on CoreJS 2, and many users get corejs-related errors due to bad resolution. To address this, we're using [corejs-upgrade-webpack-plugin](https://github.com/ndelangen/corejs-upgrade-webpack-plugin), which attempts to automatically upgrade code to CoreJS 3.
+
+After a few iterations, this approach seems to be working. However, there are a few exceptions:
+
+- If your app uses `babel-polyfill`, try to remove it
+
+We'll update this section as we find more problem cases. If you have a `core-js` problem, please file an issue (preferably with a repro), and we'll do our best to get you sorted.
+
## From version 5.0.1 to 5.0.2
### Deprecate webpack extend mode
From 7411eb38c47b7fb1647526ae4a6f19ff88910623 Mon Sep 17 00:00:00 2001
From: Gytis Vinclovas
Date: Fri, 14 Jun 2019 14:07:26 +0300
Subject: [PATCH 095/371] Updated template to not import addons
These should not be imported in React Native. They are used for web and imported automatically.
---
lib/cli/generators/REACT_NATIVE/template/storybook/index.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/index.js b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js
index 9e13b1e4243d..3f532f977435 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/index.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js
@@ -1,7 +1,6 @@
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';
-import './addons';
import './rn-addons';
// import stories
From ae3484bb97d0b2081da20e108d2a5c6d9a19f4a4 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Fri, 14 Jun 2019 21:43:16 +0200
Subject: [PATCH 096/371] Add param key in graphql addon
---
addons/graphql/src/register.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/addons/graphql/src/register.ts b/addons/graphql/src/register.ts
index d69b5af63619..68d41a5dd20e 100644
--- a/addons/graphql/src/register.ts
+++ b/addons/graphql/src/register.ts
@@ -1,7 +1,7 @@
import { addons, types } from '@storybook/addons';
import GQL from './manager';
-import { ADDON_ID } from '.';
+import { ADDON_ID, PARAM_KEY } from '.';
export const register = () => {
addons.register(ADDON_ID, () => {
@@ -11,6 +11,7 @@ export const register = () => {
route: ({ storyId }) => `/graphql/${storyId}`,
match: ({ viewMode }) => viewMode === 'graphql',
render: GQL,
+ paramKey: PARAM_KEY,
});
});
};
From f04b6e8191287a919774973b8d141e499976e230 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Fri, 14 Jun 2019 22:40:07 +0200
Subject: [PATCH 097/371] Fix type
---
addons/design-assets/src/register.tsx | 3 ++-
lib/addons/src/index.ts | 2 +-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/addons/design-assets/src/register.tsx b/addons/design-assets/src/register.tsx
index 61fda7a988db..fb903ec514e5 100644
--- a/addons/design-assets/src/register.tsx
+++ b/addons/design-assets/src/register.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { Panel } from './panel';
addons.register(ADDON_ID, () => {
@@ -14,5 +14,6 @@ addons.register(ADDON_ID, () => {
),
+ paramKey: PARAM_KEY,
});
});
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index c0ccd03ed4de..5e4843cbaf17 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -24,7 +24,7 @@ export interface Addon {
route?: (routeOptions: RouteOptions) => string;
match?: (matchOptions: MatchOptions) => boolean;
render: (renderOptions: RenderOptions) => ReactElement;
- paramKey: string;
+ paramKey?: string;
}
export type Loader = (api: API) => void;
From 4ef875198695de3a7e07e5c21665a18c3537e875 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Fri, 14 Jun 2019 23:25:39 +0200
Subject: [PATCH 098/371] Cleann
---
lib/api/src/modules/addons.ts | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index d84525a18996..35db70f04758 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -1,6 +1,6 @@
import { ReactElement } from 'react';
-import { Module, State } from '../index';
+import { Module } from '../index';
import { Options } from '../store';
export enum types {
@@ -31,7 +31,7 @@ export interface Addon {
route?: (routeOptions: RouteOptions) => string;
match?: (matchOptions: MatchOptions) => boolean;
render: (renderOptions: RenderOptions) => ReactElement;
- paramKey: string;
+ paramKey?: string;
}
export interface Collection {
[key: string]: Addon;
@@ -57,10 +57,6 @@ export interface SubAPI {
getAddonState(addonId: string): S;
}
-interface StoryParameters {
- [key: string]: any;
-}
-
export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel?: string) {
const keys = Object.keys(panels);
From 521b2b0f228d5942db01b139158d519add6289c2 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Sat, 15 Jun 2019 00:00:50 +0200
Subject: [PATCH 099/371] Add snapshots of panel story
---
.../__snapshots__/panel.stories.storyshot | 21 +++++++++++++++++++
1 file changed, 21 insertions(+)
create mode 100644 lib/ui/src/containers/__snapshots__/panel.stories.storyshot
diff --git a/lib/ui/src/containers/__snapshots__/panel.stories.storyshot b/lib/ui/src/containers/__snapshots__/panel.stories.storyshot
new file mode 100644
index 000000000000..9ec192c6ca77
--- /dev/null
+++ b/lib/ui/src/containers/__snapshots__/panel.stories.storyshot
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots UI|Addon Panel default 1`] = `
+
+ By default all addon panels are rendered
+
+`;
+
+exports[`Storyshots UI|Addon Panel disable panel 1`] = `
+
+ This story disables Actions and Accessibility panels
+
+ storiesOf('UI|Addon Panel', module)
+ .add(
+ 'my story',
+ <MyComponent />,
+ { a11y: { disable: true }, actions: { disable: true } }
+ );
+
+
+`;
From 4bd6121f83dbcd698c77e7353bc34ff6925c1514 Mon Sep 17 00:00:00 2001
From: Laurent Debersaques
Date: Sun, 16 Jun 2019 00:33:30 +0200
Subject: [PATCH 100/371] cli: replaced merge-dirs dependency by fs-extra
---
lib/cli/generators/ANGULAR/index.js | 4 ++--
lib/cli/generators/EMBER/index.js | 4 ++--
lib/cli/generators/HTML/index.js | 4 ++--
lib/cli/generators/MARKO/index.js | 4 ++--
lib/cli/generators/METEOR/index.js | 4 ++--
lib/cli/generators/MITHRIL/index.js | 4 ++--
lib/cli/generators/POLYMER/index.js | 4 ++--
lib/cli/generators/PREACT/index.js | 4 ++--
lib/cli/generators/RAX/index.js | 4 ++--
lib/cli/generators/REACT/index.js | 4 ++--
lib/cli/generators/REACT_NATIVE/index.js | 4 ++--
lib/cli/generators/REACT_SCRIPTS/index.js | 4 ++--
lib/cli/generators/RIOT/index.js | 4 ++--
lib/cli/generators/SFC_VUE/index.js | 4 ++--
lib/cli/generators/SVELTE/index.js | 4 ++--
lib/cli/generators/VUE/index.js | 4 ++--
lib/cli/generators/WEBPACK_REACT/index.js | 4 ++--
lib/cli/package.json | 2 +-
18 files changed, 35 insertions(+), 35 deletions(-)
diff --git a/lib/cli/generators/ANGULAR/index.js b/lib/cli/generators/ANGULAR/index.js
index d437358cf96a..6c3e84e50b14 100644
--- a/lib/cli/generators/ANGULAR/index.js
+++ b/lib/cli/generators/ANGULAR/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
editStorybookTsConfig,
@@ -70,7 +70,7 @@ function editAngularAppTsConfig() {
}
export default async npmOptions => {
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
await addDependencies(npmOptions);
editAngularAppTsConfig();
diff --git a/lib/cli/generators/EMBER/index.js b/lib/cli/generators/EMBER/index.js
index a9160e77c1df..cc4316c4c4f0 100644
--- a/lib/cli/generators/EMBER/index.js
+++ b/lib/cli/generators/EMBER/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/HTML/index.js b/lib/cli/generators/HTML/index.js
index 33ad44256995..bef0abdc484f 100755
--- a/lib/cli/generators/HTML/index.js
+++ b/lib/cli/generators/HTML/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import npmInit from '../../lib/npm_init';
import {
@@ -11,7 +11,7 @@ import {
export default async npmOptions => {
const storybookVersion = await getVersion(npmOptions, '@storybook/html');
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
let packageJson = getPackageJson();
if (!packageJson) {
diff --git a/lib/cli/generators/MARKO/index.js b/lib/cli/generators/MARKO/index.js
index 40de28c14a21..08ec019d813c 100644
--- a/lib/cli/generators/MARKO/index.js
+++ b/lib/cli/generators/MARKO/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -16,7 +16,7 @@ export default async npmOptions => {
'@storybook/addon-knobs'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/METEOR/index.js b/lib/cli/generators/METEOR/index.js
index 27873d4fee9a..fbed7d7eaeb9 100644
--- a/lib/cli/generators/METEOR/index.js
+++ b/lib/cli/generators/METEOR/index.js
@@ -1,7 +1,7 @@
import path from 'path';
import fs from 'fs';
import JSON5 from 'json5';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -32,7 +32,7 @@ export default async npmOptions => {
'@babel/preset-react'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};
diff --git a/lib/cli/generators/MITHRIL/index.js b/lib/cli/generators/MITHRIL/index.js
index 5a0efb948284..37f55bdb960d 100644
--- a/lib/cli/generators/MITHRIL/index.js
+++ b/lib/cli/generators/MITHRIL/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/POLYMER/index.js b/lib/cli/generators/POLYMER/index.js
index 53758fc153c6..ee07fb87bb88 100755
--- a/lib/cli/generators/POLYMER/index.js
+++ b/lib/cli/generators/POLYMER/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@@ -14,7 +14,7 @@ export default async npmOptions => {
'@storybook/polymer',
'polymer-webpack-loader'
);
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson() || {}; // Maybe we are in a bower only project, still we need a package json
diff --git a/lib/cli/generators/PREACT/index.js b/lib/cli/generators/PREACT/index.js
index 7b66fedbf545..b8e9b9c3e4aa 100644
--- a/lib/cli/generators/PREACT/index.js
+++ b/lib/cli/generators/PREACT/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/RAX/index.js b/lib/cli/generators/RAX/index.js
index 48e7df53fd01..de4b9c9a9e46 100644
--- a/lib/cli/generators/RAX/index.js
+++ b/lib/cli/generators/RAX/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -24,7 +24,7 @@ export default async npmOptions => {
'rax'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/REACT/index.js b/lib/cli/generators/REACT/index.js
index 8e8566982467..31dbea118bb8 100644
--- a/lib/cli/generators/REACT/index.js
+++ b/lib/cli/generators/REACT/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js
index d59d4eb899a0..b488122772c8 100644
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ b/lib/cli/generators/REACT_NATIVE/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import shell from 'shelljs';
import chalk from 'chalk';
@@ -26,7 +26,7 @@ export default async (npmOptions, installServer) => {
);
// copy all files from the template directory to project directory
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
// set correct project name on entry files if possible
const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;
diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js
index 82e5906b5f47..a2eb912f192a 100644
--- a/lib/cli/generators/REACT_SCRIPTS/index.js
+++ b/lib/cli/generators/REACT_SCRIPTS/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import fs from 'fs';
import semver from 'semver';
@@ -19,7 +19,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/RIOT/index.js b/lib/cli/generators/RIOT/index.js
index fcf5306edfef..6bbb43340334 100644
--- a/lib/cli/generators/RIOT/index.js
+++ b/lib/cli/generators/RIOT/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@@ -24,7 +24,7 @@ export default async npmOptions => {
'riot-tag-loader'
);
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js
index 9cfa6b9aeff9..5a9ee4041577 100644
--- a/lib/cli/generators/SFC_VUE/index.js
+++ b/lib/cli/generators/SFC_VUE/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/SVELTE/index.js b/lib/cli/generators/SVELTE/index.js
index e9a8e599f0d6..25d3b80e9d4c 100644
--- a/lib/cli/generators/SVELTE/index.js
+++ b/lib/cli/generators/SVELTE/index.js
@@ -1,5 +1,5 @@
import path from 'path';
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import {
getVersions,
getPackageJson,
@@ -26,7 +26,7 @@ export default async npmOptions => {
'svelte-loader'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/VUE/index.js b/lib/cli/generators/VUE/index.js
index 59c48aa88342..5c3b6b543e4d 100644
--- a/lib/cli/generators/VUE/index.js
+++ b/lib/cli/generators/VUE/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@@ -27,7 +27,7 @@ export default async npmOptions => {
'@babel/core'
);
- mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/generators/WEBPACK_REACT/index.js b/lib/cli/generators/WEBPACK_REACT/index.js
index c5098f240364..5447ea5b5856 100644
--- a/lib/cli/generators/WEBPACK_REACT/index.js
+++ b/lib/cli/generators/WEBPACK_REACT/index.js
@@ -1,4 +1,4 @@
-import mergeDirs from 'merge-dirs';
+import fse from 'fs-extra';
import path from 'path';
import {
getVersions,
@@ -17,7 +17,7 @@ export default async npmOptions => {
'@storybook/addons'
);
- mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+ fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
const packageJson = getPackageJson();
diff --git a/lib/cli/package.json b/lib/cli/package.json
index bcbfdf040903..7234a76e1c0e 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -35,10 +35,10 @@
"commander": "^2.19.0",
"core-js": "^3.0.1",
"cross-spawn": "^6.0.5",
+ "fs-extra": "^8.0.1",
"inquirer": "^6.2.0",
"jscodeshift": "^0.6.3",
"json5": "^2.1.0",
- "merge-dirs": "^0.2.1",
"semver": "^6.0.0",
"shelljs": "^0.8.3",
"update-notifier": "^3.0.0"
From e0d3ea256f8b474f336951c78a762f71863ada3b Mon Sep 17 00:00:00 2001
From: Laurent Debersaques
Date: Sun, 16 Jun 2019 01:07:00 +0200
Subject: [PATCH 101/371] upgraded yarn.lock
---
yarn.lock | 126 ++++--------------------------------------------------
1 file changed, 9 insertions(+), 117 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index fadfca9f6649..362ec7ff3152 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4547,11 +4547,6 @@ ansi-cyan@^0.1.1:
dependencies:
ansi-wrap "0.1.0"
-ansi-escapes@^1.1.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
- integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
-
ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -8061,13 +8056,6 @@ cli-boxes@^2.2.0:
resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
-cli-cursor@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
- integrity sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=
- dependencies:
- restore-cursor "^1.0.1"
-
cli-cursor@^2.0.0, cli-cursor@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -8110,11 +8098,6 @@ cli-truncate@^0.2.1:
slice-ansi "0.0.4"
string-width "^1.0.1"
-cli-width@^1.0.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-1.1.1.tgz#a4d293ef67ebb7b88d4a4d42c0ccf00c4d1e366d"
- integrity sha1-pNKT72frt7iNSk1CwMzwDE0eNm0=
-
cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
@@ -11374,11 +11357,6 @@ exif-parser@^0.1.12:
resolved "https://registry.yarnpkg.com/exif-parser/-/exif-parser-0.1.12.tgz#58a9d2d72c02c1f6f02a0ef4a9166272b7760922"
integrity sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=
-exit-hook@^1.0.0:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
- integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
-
exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -12252,7 +12230,7 @@ figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
-figures@^1.3.5, figures@^1.7.0:
+figures@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
@@ -14455,25 +14433,6 @@ inquirer@6.2.2:
strip-ansi "^5.0.0"
through "^2.3.6"
-inquirer@^0.11.0:
- version "0.11.4"
- resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.11.4.tgz#81e3374e8361beaff2d97016206d359d0b32fa4d"
- integrity sha1-geM3ToNhvq/y2XAWIG01nQsy+k0=
- dependencies:
- ansi-escapes "^1.1.0"
- ansi-regex "^2.0.0"
- chalk "^1.0.0"
- cli-cursor "^1.0.1"
- cli-width "^1.0.1"
- figures "^1.3.5"
- lodash "^3.3.1"
- readline2 "^1.0.1"
- run-async "^0.1.0"
- rx-lite "^3.1.2"
- string-width "^1.0.1"
- strip-ansi "^3.0.0"
- through "^2.3.6"
-
inquirer@^3.0.6:
version "3.3.0"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -17843,11 +17802,6 @@ lodash@4.x, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lod
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
-lodash@^3.3.1:
- version "3.10.1"
- resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
- integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
-
log-symbols@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -18412,16 +18366,6 @@ merge-descriptors@1.0.1:
resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-merge-dirs@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/merge-dirs/-/merge-dirs-0.2.1.tgz#21e648b2c6b0261712509e4df36c2424773160c9"
- integrity sha1-IeZIssawJhcSUJ5N82wkJHcxYMk=
- dependencies:
- inquirer "^0.11.0"
- minimist "^1.2.0"
- node-fs "~0.1.7"
- path "^0.12.7"
-
merge-source-map@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
@@ -19246,11 +19190,6 @@ mustache@^3.0.0:
resolved "https://registry.yarnpkg.com/mustache/-/mustache-3.0.1.tgz#873855f23aa8a95b150fb96d9836edbc5a1d248a"
integrity sha512-jFI/4UVRsRYdUbuDTKT7KzfOp7FiD5WzYmmwNwXyUVypC0xjoTL78Fqc0jHUPIvvGD+6DQSPHIt1NE7D1ArsqA==
-mute-stream@0.0.5:
- version "0.0.5"
- resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
- integrity sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA=
-
mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -19438,11 +19377,6 @@ node-forge@0.7.6:
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
-node-fs@~0.1.7:
- version "0.1.7"
- resolved "https://registry.yarnpkg.com/node-fs/-/node-fs-0.1.7.tgz#32323cccb46c9fbf0fc11812d45021cc31d325bb"
- integrity sha1-MjI8zLRsn78PwRgS1FAhzDHTJbs=
-
node-gyp@^3.8.0:
version "3.8.0"
resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -19970,11 +19904,6 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
dependencies:
wrappy "1"
-onetime@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
- integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
-
onetime@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
@@ -20761,14 +20690,6 @@ path-type@^3.0.0:
dependencies:
pify "^3.0.0"
-path@^0.12.7:
- version "0.12.7"
- resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
- integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
- dependencies:
- process "^0.11.1"
- util "^0.10.3"
-
paths.macro@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/paths.macro/-/paths.macro-2.0.2.tgz#7b7b3930170c9d41f42ec426c987b2df3505fb72"
@@ -21867,7 +21788,7 @@ process-relative-require@^1.0.0:
dependencies:
node-modules-path "^1.0.0"
-process@^0.11.1, process@^0.11.10, process@~0.11.0:
+process@^0.11.10, process@~0.11.0:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -23560,15 +23481,6 @@ readline-sync@^1.4.9:
resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.9.tgz#3eda8e65f23cd2a17e61301b1f0003396af5ecda"
integrity sha1-PtqOZfI80qF+YTAbHwADOWr17No=
-readline2@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
- integrity sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=
- dependencies:
- code-point-at "^1.0.0"
- is-fullwidth-code-point "^1.0.0"
- mute-stream "0.0.5"
-
realpath-native@^1.0.0, realpath-native@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
@@ -24365,14 +24277,6 @@ rest-handler@^1.2.16:
path-based-router "^1.1.3"
raptor-async "^1.1.2"
-restore-cursor@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
- integrity sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=
- dependencies:
- exit-hook "^1.0.0"
- onetime "^1.0.0"
-
restore-cursor@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -24569,13 +24473,6 @@ rtl-detect@^1.0.2:
resolved "https://registry.yarnpkg.com/rtl-detect/-/rtl-detect-1.0.2.tgz#8eca316f5c6563d54df4e406171dd7819adda67f"
integrity sha512-5X1422hvphzg2a/bo4tIDbjFjbJUOaPZwqE6dnyyxqwFqfR+tBcvfqapJr0o0VygATVCGKiODEewhZtKF+90AA==
-run-async@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
- integrity sha1-yK1KXhEGYeQCp9IbUw4AnyX444k=
- dependencies:
- once "^1.3.0"
-
run-async@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -24612,11 +24509,6 @@ rx-lite@*, rx-lite@^4.0.8:
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
-rx-lite@^3.1.2:
- version "3.1.2"
- resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
- integrity sha1-Gc5QLKVyZl87ZHsQk5+X/RYV8QI=
-
rxjs-compat@^6.4.0:
version "6.5.2"
resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.5.2.tgz#e469070adf6260bdad195e9d4a39f444ae28b458"
@@ -27819,13 +27711,6 @@ util@0.10.3:
dependencies:
inherits "2.0.1"
-util@^0.10.3, util@~0.10.1:
- version "0.10.4"
- resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
- integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
- dependencies:
- inherits "2.0.3"
-
util@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
@@ -27833,6 +27718,13 @@ util@^0.11.0:
dependencies:
inherits "2.0.3"
+util@~0.10.1:
+ version "0.10.4"
+ resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+ integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+ dependencies:
+ inherits "2.0.3"
+
utila@^0.4.0, utila@~0.4:
version "0.4.0"
resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
From 703c9fd6130f10a003f39d1da7a2ab1587eb3e3e Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Sun, 16 Jun 2019 21:07:37 +0200
Subject: [PATCH 102/371] IMPROVE reset script
---
scripts/reset.js | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/scripts/reset.js b/scripts/reset.js
index 59f77675dc30..d1066a7ac761 100644
--- a/scripts/reset.js
+++ b/scripts/reset.js
@@ -23,14 +23,19 @@ cleaningProcess.stdout.on('data', data => {
const [, uri] = i.match(/Would remove (.*)$/) || [];
if (uri) {
- if (uri.match(/node_modules/)) {
+ if (uri.match(/node_modules/) || uri.match(/dist/) || uri.match(/\.cache/) || uri.match(/dll/)) {
del(uri).then(() => {
console.log(`deleted ${uri}`);
});
} else {
- trash(uri).then(() => {
- console.log(`trashed ${uri}`);
- });
+ trash(uri)
+ .then(() => {
+ console.log(`trashed ${uri}`);
+ })
+ .catch(e => {
+ console.log('failed to trash, will try permanent delete');
+ trash(uri);
+ });
}
}
});
From 9c10103acd7cdd3a5811fed6d79e47965bf3d6f6 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Sun, 16 Jun 2019 20:42:58 +0000
Subject: [PATCH 103/371] Bump jest-expo from 32.0.1 to 33.0.2
Bumps [jest-expo](https://github.com/expo/jest-expo) from 32.0.1 to 33.0.2.
- [Release notes](https://github.com/expo/jest-expo/releases)
- [Commits](https://github.com/expo/jest-expo/commits)
Signed-off-by: dependabot-preview[bot]
---
.../crna-kitchen-sink/package.json | 2 +-
yarn.lock | 521 +-----------------
2 files changed, 31 insertions(+), 492 deletions(-)
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 6f9371f2654e..47d0403452f7 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -37,7 +37,7 @@
"babel-preset-expo": "^5.1.1",
"core-js": "^3.0.1",
"expo-cli": "^2.17.1",
- "jest-expo": "^32.0.0",
+ "jest-expo": "^33.0.2",
"react-test-renderer": "16.5.1",
"schedule": "^0.5.0"
},
diff --git a/yarn.lock b/yarn.lock
index 0db46921ec2f..14a418ab504b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -195,7 +195,7 @@
optionalDependencies:
chokidar "^2.0.4"
-"@babel/code-frame@7.0.0", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.0.0-beta.44":
+"@babel/code-frame@7.0.0", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.44":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
@@ -4696,13 +4696,6 @@ app-root-path@^2.2.1:
resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.2.1.tgz#d0df4a682ee408273583d43f6f79e9892624bc9a"
integrity sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==
-append-transform@^0.4.0:
- version "0.4.0"
- resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
- integrity sha1-126/jKlNJ24keja61EpLdKthGZE=
- dependencies:
- default-require-extensions "^1.0.0"
-
aproba@^1.0.3, aproba@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -5163,7 +5156,7 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
esutils "^2.0.2"
js-tokens "^3.0.2"
-babel-core@6, babel-core@^6.0.0, babel-core@^6.26.0, babel-core@^6.7.2:
+babel-core@6, babel-core@^6.26.0, babel-core@^6.7.2:
version "6.26.3"
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
@@ -5400,14 +5393,6 @@ babel-helpers@^6.24.1:
babel-runtime "^6.22.0"
babel-template "^6.24.1"
-babel-jest@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-23.6.0.tgz#a644232366557a2240a0c083da6b25786185a2f1"
- integrity sha512-lqKGG6LYXYu+DQh/slrQ8nxXQkEkhugdXsU6St7GmhVS7Ilc/22ArwqXNJrf0QaOBjZB0360qZMwXqDYQHXaew==
- dependencies:
- babel-plugin-istanbul "^4.1.6"
- babel-preset-jest "^23.2.0"
-
babel-jest@^24.7.1, babel-jest@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.8.0.tgz#5c15ff2b28e20b0f45df43fe6b7f2aae93dba589"
@@ -5551,16 +5536,6 @@ babel-plugin-htmlbars-inline-precompile@^1.0.0:
resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-1.0.0.tgz#a9d2f6eaad8a3f3d361602de593a8cbef8179c22"
integrity sha512-4jvKEHR1bAX03hBDZ94IXsYCj3bwk9vYsn6ux6JZNL2U5pvzCWjqyrGahfsGNrhERyxw8IqcirOi9Q6WCo3dkQ==
-babel-plugin-istanbul@^4.1.6:
- version "4.1.6"
- resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
- integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
- dependencies:
- babel-plugin-syntax-object-rest-spread "^6.13.0"
- find-up "^2.1.0"
- istanbul-lib-instrument "^1.10.1"
- test-exclude "^4.2.1"
-
babel-plugin-istanbul@^5.1.0:
version "5.1.4"
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz#841d16b9a58eeb407a0ddce622ba02fe87a752ba"
@@ -5570,11 +5545,6 @@ babel-plugin-istanbul@^5.1.0:
istanbul-lib-instrument "^3.3.0"
test-exclude "^5.2.3"
-babel-plugin-jest-hoist@^23.2.0:
- version "23.2.0"
- resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
- integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=
-
babel-plugin-jest-hoist@^24.6.0:
version "24.6.0"
resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.6.0.tgz#f7f7f7ad150ee96d7a5e8e2c5da8319579e78019"
@@ -5746,7 +5716,7 @@ babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.8.0:
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
@@ -6256,14 +6226,6 @@ babel-preset-flow@^6.23.0:
dependencies:
babel-plugin-transform-flow-strip-types "^6.22.0"
-babel-preset-jest@^23.2.0:
- version "23.2.0"
- resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46"
- integrity sha1-jsegOhOPABoaj7HoETZSvxpV2kY=
- dependencies:
- babel-plugin-jest-hoist "^23.2.0"
- babel-plugin-syntax-object-rest-spread "^6.13.0"
-
babel-preset-jest@^24.6.0:
version "24.6.0"
resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz#66f06136eefce87797539c0d63f1769cc3915984"
@@ -6384,7 +6346,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
babylon "^6.18.0"
lodash "^4.17.4"
-babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.19.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.18.0, babel-traverse@^6.19.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
@@ -6399,7 +6361,7 @@ babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.19.0, babel-tra
invariant "^2.2.2"
lodash "^4.17.4"
-babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
@@ -9629,13 +9591,6 @@ default-gateway@^4.2.0:
execa "^1.0.0"
ip-regex "^2.1.0"
-default-require-extensions@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
- integrity sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=
- dependencies:
- strip-bom "^2.0.0"
-
defaults@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
@@ -11443,18 +11398,6 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
dependencies:
homedir-polyfill "^1.0.1"
-expect@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/expect/-/expect-23.6.0.tgz#1e0c8d3ba9a581c87bd71fb9bc8862d443425f98"
- integrity sha512-dgSoOHgmtn/aDGRVFWclQyPDKl2CQRq0hmIEoUAuQs/2rn2NcvCWcSCovm6BLeuB/7EZuLGu2QfnR+qRt5OM4w==
- dependencies:
- ansi-styles "^3.2.0"
- jest-diff "^23.6.0"
- jest-get-type "^22.1.0"
- jest-matcher-utils "^23.6.0"
- jest-message-util "^23.4.0"
- jest-regex-util "^23.3.0"
-
expect@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/expect/-/expect-24.8.0.tgz#471f8ec256b7b6129ca2524b2a62f030df38718d"
@@ -12342,14 +12285,6 @@ filename-regex@^2.0.0:
resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
-fileset@^2.0.2:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
- integrity sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=
- dependencies:
- glob "^7.0.3"
- minimatch "^3.0.3"
-
filesize@3.6.1, filesize@^3.6.1:
version "3.6.1"
resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
@@ -13578,7 +13513,7 @@ handle-thing@^2.0.0:
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
-handlebars@^4.0.11, handlebars@^4.0.3, handlebars@^4.0.4, handlebars@^4.1.0, handlebars@^4.1.2:
+handlebars@^4.0.11, handlebars@^4.0.4, handlebars@^4.1.0, handlebars@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
integrity sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==
@@ -13626,11 +13561,6 @@ has-cors@1.1.0:
resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
-has-flag@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
- integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
-
has-flag@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
@@ -14829,11 +14759,6 @@ is-function@^1.0.1:
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
-is-generator-fn@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
- integrity sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=
-
is-generator-fn@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -15218,23 +15143,6 @@ isstream@~0.1.2:
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-istanbul-api@^1.3.1:
- version "1.3.7"
- resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
- integrity sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==
- dependencies:
- async "^2.1.4"
- fileset "^2.0.2"
- istanbul-lib-coverage "^1.2.1"
- istanbul-lib-hook "^1.2.2"
- istanbul-lib-instrument "^1.10.2"
- istanbul-lib-report "^1.1.5"
- istanbul-lib-source-maps "^1.2.6"
- istanbul-reports "^1.5.1"
- js-yaml "^3.7.0"
- mkdirp "^0.5.1"
- once "^1.4.0"
-
istanbul-instrumenter-loader@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz#9957bd59252b373fae5c52b7b5188e6fde2a0949"
@@ -15245,7 +15153,7 @@ istanbul-instrumenter-loader@3.0.1:
loader-utils "^1.1.0"
schema-utils "^0.3.0"
-istanbul-lib-coverage@^1.2.0, istanbul-lib-coverage@^1.2.1:
+istanbul-lib-coverage@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
@@ -15255,14 +15163,7 @@ istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
-istanbul-lib-hook@^1.2.2:
- version "1.2.2"
- resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
- integrity sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==
- dependencies:
- append-transform "^0.4.0"
-
-istanbul-lib-instrument@^1.10.1, istanbul-lib-instrument@^1.10.2, istanbul-lib-instrument@^1.7.3:
+istanbul-lib-instrument@^1.7.3:
version "1.10.2"
resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
@@ -15288,16 +15189,6 @@ istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
istanbul-lib-coverage "^2.0.5"
semver "^6.0.0"
-istanbul-lib-report@^1.1.5:
- version "1.1.5"
- resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
- integrity sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==
- dependencies:
- istanbul-lib-coverage "^1.2.1"
- mkdirp "^0.5.1"
- path-parse "^1.0.5"
- supports-color "^3.1.2"
-
istanbul-lib-report@^2.0.4:
version "2.0.8"
resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
@@ -15307,17 +15198,6 @@ istanbul-lib-report@^2.0.4:
make-dir "^2.1.0"
supports-color "^6.1.0"
-istanbul-lib-source-maps@^1.2.4, istanbul-lib-source-maps@^1.2.6:
- version "1.2.6"
- resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
- integrity sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==
- dependencies:
- debug "^3.1.0"
- istanbul-lib-coverage "^1.2.1"
- mkdirp "^0.5.1"
- rimraf "^2.6.1"
- source-map "^0.5.3"
-
istanbul-lib-source-maps@^3.0.1:
version "3.0.6"
resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
@@ -15329,13 +15209,6 @@ istanbul-lib-source-maps@^3.0.1:
rimraf "^2.6.3"
source-map "^0.6.1"
-istanbul-reports@^1.5.1:
- version "1.5.1"
- resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
- integrity sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==
- dependencies:
- handlebars "^4.0.3"
-
istanbul-reports@^2.1.1:
version "2.2.6"
resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
@@ -15401,13 +15274,6 @@ java-properties@^0.2.9:
resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
integrity sha512-CpKJh9VRNhS+XqZtg1UMejETGEiqwCGDC/uwPEEQwc2nfdbSm73SIE29TplG2gLYuBOOTNDqxzG6A9NtEPLt0w==
-jest-changed-files@^23.4.2:
- version "23.4.2"
- resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-23.4.2.tgz#1eed688370cd5eebafe4ae93d34bb3b64968fe83"
- integrity sha512-EyNhTAUWEfwnK0Is/09LxoqNDOn7mU7S3EHskG52djOFS/z+IT0jT3h3Ql61+dklcG7bJJitIWEMB4Sp1piHmA==
- dependencies:
- throat "^4.0.0"
-
jest-changed-files@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.8.0.tgz#7e7eb21cf687587a85e50f3d249d1327e15b157b"
@@ -15417,48 +15283,6 @@ jest-changed-files@^24.8.0:
execa "^1.0.0"
throat "^4.0.0"
-jest-cli@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-23.6.0.tgz#61ab917744338f443ef2baa282ddffdd658a5da4"
- integrity sha512-hgeD1zRUp1E1zsiyOXjEn4LzRLWdJBV//ukAHGlx6s5mfCNJTbhbHjgxnDUXA8fsKWN/HqFFF6X5XcCwC/IvYQ==
- dependencies:
- ansi-escapes "^3.0.0"
- chalk "^2.0.1"
- exit "^0.1.2"
- glob "^7.1.2"
- graceful-fs "^4.1.11"
- import-local "^1.0.0"
- is-ci "^1.0.10"
- istanbul-api "^1.3.1"
- istanbul-lib-coverage "^1.2.0"
- istanbul-lib-instrument "^1.10.1"
- istanbul-lib-source-maps "^1.2.4"
- jest-changed-files "^23.4.2"
- jest-config "^23.6.0"
- jest-environment-jsdom "^23.4.0"
- jest-get-type "^22.1.0"
- jest-haste-map "^23.6.0"
- jest-message-util "^23.4.0"
- jest-regex-util "^23.3.0"
- jest-resolve-dependencies "^23.6.0"
- jest-runner "^23.6.0"
- jest-runtime "^23.6.0"
- jest-snapshot "^23.6.0"
- jest-util "^23.4.0"
- jest-validate "^23.6.0"
- jest-watcher "^23.4.0"
- jest-worker "^23.2.0"
- micromatch "^2.3.11"
- node-notifier "^5.2.1"
- prompts "^0.1.9"
- realpath-native "^1.0.0"
- rimraf "^2.5.4"
- slash "^1.0.0"
- string-length "^2.0.0"
- strip-ansi "^4.0.0"
- which "^1.2.12"
- yargs "^11.0.0"
-
jest-cli@^24.7.1, jest-cli@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.8.0.tgz#b075ac914492ed114fa338ade7362a301693e989"
@@ -15478,26 +15302,6 @@ jest-cli@^24.7.1, jest-cli@^24.8.0:
realpath-native "^1.1.0"
yargs "^12.0.2"
-jest-config@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-23.6.0.tgz#f82546a90ade2d8c7026fbf6ac5207fc22f8eb1d"
- integrity sha512-i8V7z9BeDXab1+VNo78WM0AtWpBRXJLnkT+lyT+Slx/cbP5sZJ0+NDuLcmBE5hXAoK0aUp7vI+MOxR+R4d8SRQ==
- dependencies:
- babel-core "^6.0.0"
- babel-jest "^23.6.0"
- chalk "^2.0.1"
- glob "^7.1.1"
- jest-environment-jsdom "^23.4.0"
- jest-environment-node "^23.4.0"
- jest-get-type "^22.1.0"
- jest-jasmine2 "^23.6.0"
- jest-regex-util "^23.3.0"
- jest-resolve "^23.6.0"
- jest-util "^23.4.0"
- jest-validate "^23.6.0"
- micromatch "^2.3.11"
- pretty-format "^23.6.0"
-
jest-config@^24.0.0, jest-config@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.8.0.tgz#77db3d265a6f726294687cbbccc36f8a76ee0f4f"
@@ -15521,16 +15325,6 @@ jest-config@^24.0.0, jest-config@^24.8.0:
pretty-format "^24.8.0"
realpath-native "^1.1.0"
-jest-diff@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
- integrity sha512-Gz9l5Ov+X3aL5L37IT+8hoCUsof1CVYBb2QEkOupK64XyRR3h+uRpYIm97K7sY8diFxowR8pIGEdyfMKTixo3g==
- dependencies:
- chalk "^2.0.1"
- diff "^3.2.0"
- jest-get-type "^22.1.0"
- pretty-format "^23.6.0"
-
jest-diff@^24.7.0, jest-diff@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.8.0.tgz#146435e7d1e3ffdf293d53ff97e193f1d1546172"
@@ -15555,14 +15349,6 @@ jest-docblock@^24.3.0:
dependencies:
detect-newline "^2.1.0"
-jest-each@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-23.6.0.tgz#ba0c3a82a8054387016139c733a05242d3d71575"
- integrity sha512-x7V6M/WGJo6/kLoissORuvLIeAoyo2YqLOoCDkohgJ4XOXSqOtyvr8FbInlAWS77ojBsZrafbozWoKVRdtxFCg==
- dependencies:
- chalk "^2.0.1"
- pretty-format "^23.6.0"
-
jest-each@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.8.0.tgz#a05fd2bf94ddc0b1da66c6d13ec2457f35e52775"
@@ -15609,15 +15395,6 @@ jest-environment-jsdom-thirteen@^1.0.0, jest-environment-jsdom-thirteen@^1.0.1:
jest-util "^24.0.0"
jsdom "^13.0.0"
-jest-environment-jsdom@^23.4.0:
- version "23.4.0"
- resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz#056a7952b3fea513ac62a140a2c368c79d9e6023"
- integrity sha1-BWp5UrP+pROsYqFAosNox52eYCM=
- dependencies:
- jest-mock "^23.2.0"
- jest-util "^23.4.0"
- jsdom "^11.5.1"
-
jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.7.1, jest-environment-jsdom@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.8.0.tgz#300f6949a146cabe1c9357ad9e9ecf9f43f38857"
@@ -15630,14 +15407,6 @@ jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.7.1, jest-environment
jest-util "^24.8.0"
jsdom "^11.5.1"
-jest-environment-node@^23.4.0:
- version "23.4.0"
- resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-23.4.0.tgz#57e80ed0841dea303167cce8cd79521debafde10"
- integrity sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=
- dependencies:
- jest-mock "^23.2.0"
- jest-util "^23.4.0"
-
jest-environment-node@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.8.0.tgz#d3f726ba8bc53087a60e7a84ca08883a4c892231"
@@ -15658,22 +15427,17 @@ jest-enzyme@^7.0.2:
enzyme-to-json "^3.3.0"
jest-environment-enzyme "^7.0.2"
-jest-expo@^32.0.0:
- version "32.0.1"
- resolved "https://registry.yarnpkg.com/jest-expo/-/jest-expo-32.0.1.tgz#83bb16cba0d14d75bc635b8fb078bc33e82b99ad"
- integrity sha512-FnqfaQ0LuzOgG3/qJh6G+pard5SnWnTfJ7Ad+NFl6CEyZhLp/sCu01fl+CGpal2LFSPODChheIaLYebgw69d+g==
+jest-expo@^33.0.2:
+ version "33.0.2"
+ resolved "https://registry.yarnpkg.com/jest-expo/-/jest-expo-33.0.2.tgz#6e4c595162047eca2bbb9fcf214a067af3f21b0e"
+ integrity sha512-OSk8hVm9D8YSw8R7vOOjoERQIqlsAwNgQzqpFdNQROy2/TNzntGBy+8hLsic7y8h2CDXmKVsxvBtiKD4CTOZRg==
dependencies:
- "@babel/core" "^7.1.0"
- babel-core "^7.0.0-bridge.0"
- babel-jest "^23.6.0"
- jest "^23.6.0"
+ babel-jest "^24.7.1"
+ jest "^24.7.1"
json5 "^2.1.0"
- react-test-renderer "^16.5.0"
-
-jest-get-type@^22.1.0:
- version "22.4.3"
- resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
- integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
+ lodash "^4.5.0"
+ react-test-renderer "^16.8.6"
+ whatwg-fetch "^3.0.0"
jest-get-type@^24.8.0:
version "24.8.0"
@@ -15694,20 +15458,6 @@ jest-haste-map@23.5.0:
micromatch "^2.3.11"
sane "^2.0.0"
-jest-haste-map@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-23.6.0.tgz#2e3eb997814ca696d62afdb3f2529f5bbc935e16"
- integrity sha512-uyNhMyl6dr6HaXGHp8VF7cK6KpC6G9z9LiMNsst+rJIZ8l7wY0tk8qwjPmEghczojZ2/ZhtEdIabZ0OQRJSGGg==
- dependencies:
- fb-watchman "^2.0.0"
- graceful-fs "^4.1.11"
- invariant "^2.2.4"
- jest-docblock "^23.2.0"
- jest-serializer "^23.0.1"
- jest-worker "^23.2.0"
- micromatch "^2.3.11"
- sane "^2.0.0"
-
jest-haste-map@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.8.0.tgz#51794182d877b3ddfd6e6d23920e3fe72f305800"
@@ -15740,24 +15490,6 @@ jest-image-snapshot@^2.8.2:
pngjs "^3.3.3"
rimraf "^2.6.2"
-jest-jasmine2@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-23.6.0.tgz#840e937f848a6c8638df24360ab869cc718592e0"
- integrity sha512-pe2Ytgs1nyCs8IvsEJRiRTPC0eVYd8L/dXJGU08GFuBwZ4sYH/lmFDdOL3ZmvJR8QKqV9MFuwlsAi/EWkFUbsQ==
- dependencies:
- babel-traverse "^6.0.0"
- chalk "^2.0.1"
- co "^4.6.0"
- expect "^23.6.0"
- is-generator-fn "^1.0.0"
- jest-diff "^23.6.0"
- jest-each "^23.6.0"
- jest-matcher-utils "^23.6.0"
- jest-message-util "^23.4.0"
- jest-snapshot "^23.6.0"
- jest-util "^23.4.0"
- pretty-format "^23.6.0"
-
jest-jasmine2@^24.7.1, jest-jasmine2@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.8.0.tgz#a9c7e14c83dd77d8b15e820549ce8987cc8cd898"
@@ -15780,13 +15512,6 @@ jest-jasmine2@^24.7.1, jest-jasmine2@^24.8.0:
pretty-format "^24.8.0"
throat "^4.0.0"
-jest-leak-detector@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-23.6.0.tgz#e4230fd42cf381a1a1971237ad56897de7e171de"
- integrity sha512-f/8zA04rsl1Nzj10HIyEsXvYlMpMPcy0QkQilVZDFOaPbv2ur71X5u2+C4ZQJGyV/xvVXtCCZ3wQ99IgQxftCg==
- dependencies:
- pretty-format "^23.6.0"
-
jest-leak-detector@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.8.0.tgz#c0086384e1f650c2d8348095df769f29b48e6980"
@@ -15794,15 +15519,6 @@ jest-leak-detector@^24.8.0:
dependencies:
pretty-format "^24.8.0"
-jest-matcher-utils@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz#726bcea0c5294261a7417afb6da3186b4b8cac80"
- integrity sha512-rosyCHQfBcol4NsckTn01cdelzWLU9Cq7aaigDf8VwwpIRvWE/9zLgX2bON+FkEW69/0UuYslUe22SOdEf2nog==
- dependencies:
- chalk "^2.0.1"
- jest-get-type "^22.1.0"
- pretty-format "^23.6.0"
-
jest-matcher-utils@^24.7.0, jest-matcher-utils@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.8.0.tgz#2bce42204c9af12bde46f83dc839efe8be832495"
@@ -15813,17 +15529,6 @@ jest-matcher-utils@^24.7.0, jest-matcher-utils@^24.8.0:
jest-get-type "^24.8.0"
pretty-format "^24.8.0"
-jest-message-util@^23.4.0:
- version "23.4.0"
- resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.4.0.tgz#17610c50942349508d01a3d1e0bda2c079086a9f"
- integrity sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=
- dependencies:
- "@babel/code-frame" "^7.0.0-beta.35"
- chalk "^2.0.1"
- micromatch "^2.3.11"
- slash "^1.0.0"
- stack-utils "^1.0.1"
-
jest-message-util@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.8.0.tgz#0d6891e72a4beacc0292b638685df42e28d6218b"
@@ -15838,11 +15543,6 @@ jest-message-util@^24.8.0:
slash "^2.0.0"
stack-utils "^1.0.1"
-jest-mock@^23.2.0:
- version "23.2.0"
- resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-23.2.0.tgz#ad1c60f29e8719d47c26e1138098b6d18b261134"
- integrity sha1-rRxg8p6HGdR8JuETgJi20YsmETQ=
-
jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.8.0.tgz#2f9d14d37699e863f1febf4e4d5a33b7fdbbde56"
@@ -15878,24 +15578,11 @@ jest-raw-loader@^1.0.1:
resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
integrity sha1-zp9W1UZQ8VfEp9FtIkul1hO81iY=
-jest-regex-util@^23.3.0:
- version "23.3.0"
- resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-23.3.0.tgz#5f86729547c2785c4002ceaa8f849fe8ca471bc5"
- integrity sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=
-
jest-regex-util@^24.3.0:
version "24.3.0"
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
-jest-resolve-dependencies@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-23.6.0.tgz#b4526af24c8540d9a3fab102c15081cf509b723d"
- integrity sha512-EkQWkFWjGKwRtRyIwRwI6rtPAEyPWlUC2MpzHissYnzJeHcyCn1Hc8j7Nn1xUVrS5C6W5+ZL37XTem4D4pLZdA==
- dependencies:
- jest-regex-util "^23.3.0"
- jest-snapshot "^23.6.0"
-
jest-resolve-dependencies@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.8.0.tgz#19eec3241f2045d3f990dba331d0d7526acff8e0"
@@ -15916,15 +15603,6 @@ jest-resolve@24.7.1:
jest-pnp-resolver "^1.2.1"
realpath-native "^1.1.0"
-jest-resolve@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.6.0.tgz#cf1d1a24ce7ee7b23d661c33ba2150f3aebfa0ae"
- integrity sha512-XyoRxNtO7YGpQDmtQCmZjum1MljDqUCob7XlZ6jy9gsMugHdN2hY4+Acz9Qvjz2mSsOnPSH7skBmDYCHXVZqkA==
- dependencies:
- browser-resolve "^1.11.3"
- chalk "^2.0.1"
- realpath-native "^1.0.0"
-
jest-resolve@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.8.0.tgz#84b8e5408c1f6a11539793e2b5feb1b6e722439f"
@@ -15936,25 +15614,6 @@ jest-resolve@^24.8.0:
jest-pnp-resolver "^1.2.1"
realpath-native "^1.1.0"
-jest-runner@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-23.6.0.tgz#3894bd219ffc3f3cb94dc48a4170a2e6f23a5a38"
- integrity sha512-kw0+uj710dzSJKU6ygri851CObtCD9cN8aNkg8jWJf4ewFyEa6kwmiH/r/M1Ec5IL/6VFa0wnAk6w+gzUtjJzA==
- dependencies:
- exit "^0.1.2"
- graceful-fs "^4.1.11"
- jest-config "^23.6.0"
- jest-docblock "^23.2.0"
- jest-haste-map "^23.6.0"
- jest-jasmine2 "^23.6.0"
- jest-leak-detector "^23.6.0"
- jest-message-util "^23.4.0"
- jest-runtime "^23.6.0"
- jest-util "^23.4.0"
- jest-worker "^23.2.0"
- source-map-support "^0.5.6"
- throat "^4.0.0"
-
jest-runner@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.8.0.tgz#4f9ae07b767db27b740d7deffad0cf67ccb4c5bb"
@@ -15980,33 +15639,6 @@ jest-runner@^24.8.0:
source-map-support "^0.5.6"
throat "^4.0.0"
-jest-runtime@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-23.6.0.tgz#059e58c8ab445917cd0e0d84ac2ba68de8f23082"
- integrity sha512-ycnLTNPT2Gv+TRhnAYAQ0B3SryEXhhRj1kA6hBPSeZaNQkJ7GbZsxOLUkwg6YmvWGdX3BB3PYKFLDQCAE1zNOw==
- dependencies:
- babel-core "^6.0.0"
- babel-plugin-istanbul "^4.1.6"
- chalk "^2.0.1"
- convert-source-map "^1.4.0"
- exit "^0.1.2"
- fast-json-stable-stringify "^2.0.0"
- graceful-fs "^4.1.11"
- jest-config "^23.6.0"
- jest-haste-map "^23.6.0"
- jest-message-util "^23.4.0"
- jest-regex-util "^23.3.0"
- jest-resolve "^23.6.0"
- jest-snapshot "^23.6.0"
- jest-util "^23.4.0"
- jest-validate "^23.6.0"
- micromatch "^2.3.11"
- realpath-native "^1.0.0"
- slash "^1.0.0"
- strip-bom "3.0.0"
- write-file-atomic "^2.1.0"
- yargs "^11.0.0"
-
jest-runtime@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.8.0.tgz#05f94d5b05c21f6dc54e427cd2e4980923350620"
@@ -16046,22 +15678,6 @@ jest-serializer@^24.4.0:
resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
-jest-snapshot@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a"
- integrity sha512-tM7/Bprftun6Cvj2Awh/ikS7zV3pVwjRYU2qNYS51VZHgaAMBs5l4o/69AiDHhQrj5+LA2Lq4VIvK7zYk/bswg==
- dependencies:
- babel-types "^6.0.0"
- chalk "^2.0.1"
- jest-diff "^23.6.0"
- jest-matcher-utils "^23.6.0"
- jest-message-util "^23.4.0"
- jest-resolve "^23.6.0"
- mkdirp "^0.5.1"
- natural-compare "^1.4.0"
- pretty-format "^23.6.0"
- semver "^5.5.0"
-
jest-snapshot@^24.1.0, jest-snapshot@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.8.0.tgz#3bec6a59da2ff7bc7d097a853fb67f9d415cb7c6"
@@ -16087,20 +15703,6 @@ jest-specific-snapshot@^2.0.0:
dependencies:
jest-snapshot "^24.1.0"
-jest-util@^23.4.0:
- version "23.4.0"
- resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.4.0.tgz#4d063cb927baf0a23831ff61bec2cbbf49793561"
- integrity sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=
- dependencies:
- callsites "^2.0.0"
- chalk "^2.0.1"
- graceful-fs "^4.1.11"
- is-ci "^1.0.10"
- jest-message-util "^23.4.0"
- mkdirp "^0.5.1"
- slash "^1.0.0"
- source-map "^0.6.0"
-
jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.8.0.tgz#41f0e945da11df44cc76d64ffb915d0716f46cd1"
@@ -16119,16 +15721,6 @@ jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.8.0:
slash "^2.0.0"
source-map "^0.6.0"
-jest-validate@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-23.6.0.tgz#36761f99d1ed33fcd425b4e4c5595d62b6597474"
- integrity sha512-OFKapYxe72yz7agrDAWi8v2WL8GIfVqcbKRCLbRG9PAxtzF9b1SEDdTpytNDN12z2fJynoBwpMpvj2R39plI2A==
- dependencies:
- chalk "^2.0.1"
- jest-get-type "^22.1.0"
- leven "^2.1.0"
- pretty-format "^23.6.0"
-
jest-validate@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.8.0.tgz#624c41533e6dfe356ffadc6e2423a35c2d3b4849"
@@ -16175,15 +15767,6 @@ jest-watch-typeahead@^0.3.0:
string-length "^2.0.0"
strip-ansi "^5.0.0"
-jest-watcher@^23.4.0:
- version "23.4.0"
- resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-23.4.0.tgz#d2e28ce74f8dad6c6afc922b92cabef6ed05c91c"
- integrity sha1-0uKM50+NrWxq/JIrksq+9u0FyRw=
- dependencies:
- ansi-escapes "^3.0.0"
- chalk "^2.0.1"
- string-length "^2.0.0"
-
jest-watcher@^24.3.0, jest-watcher@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.8.0.tgz#58d49915ceddd2de85e238f6213cef1c93715de4"
@@ -16225,14 +15808,6 @@ jest@24.7.1:
import-local "^2.0.0"
jest-cli "^24.7.1"
-jest@^23.6.0:
- version "23.6.0"
- resolved "https://registry.yarnpkg.com/jest/-/jest-23.6.0.tgz#ad5835e923ebf6e19e7a1d7529a432edfee7813d"
- integrity sha512-lWzcd+HSiqeuxyhG+EnZds6iO3Y3ZEnMrfZq/OTGvF/C+Z4fPMCdhWTGSAiO2Oym9rbEXfwddHhh6jqrTF3+Lw==
- dependencies:
- import-local "^1.0.0"
- jest-cli "^23.6.0"
-
jest@^24.7.1:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest/-/jest-24.8.0.tgz#d5dff1984d0d1002196e9b7f12f75af1b2809081"
@@ -16310,7 +15885,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-js-yaml@^3.10.0, js-yaml@^3.12.1, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.7.0, js-yaml@^3.9.0:
+js-yaml@^3.10.0, js-yaml@^3.12.1, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.9.0:
version "3.13.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -16725,11 +16300,6 @@ klaw@^1.0.0:
optionalDependencies:
graceful-fs "^4.1.9"
-kleur@^2.0.1:
- version "2.0.2"
- resolved "https://registry.yarnpkg.com/kleur/-/kleur-2.0.2.tgz#b704f4944d95e255d038f0cb05fb8a602c55a300"
- integrity sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==
-
kleur@^3.0.2:
version "3.0.3"
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -17839,7 +17409,7 @@ lodash@4.17.5:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
integrity sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==
-lodash@4.x, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@~4.17.10:
+lodash@4.x, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.1, lodash@~4.17.10:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -19008,7 +18578,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -20712,7 +20282,7 @@ path-key@^2.0.0, path-key@^2.0.1:
resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-path-parse@^1.0.5, path-parse@^1.0.6:
+path-parse@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
@@ -21951,14 +21521,6 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prompts@^0.1.9:
- version "0.1.14"
- resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
- integrity sha512-rxkyiE9YH6zAz/rZpywySLKkpaj0NMVyNw1qhsubdbjjSgcayjTShDreZGlFMcGSu5sab3bAKPfFk78PB90+8w==
- dependencies:
- kleur "^2.0.1"
- sisteransi "^0.1.1"
-
prompts@^2.0.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.1.0.tgz#bf90bc71f6065d255ea2bdc0fe6520485c1b45db"
@@ -23265,7 +22827,7 @@ react-test-renderer@16.5.1:
react-is "^16.5.1"
schedule "^0.4.0"
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.5.0, react-test-renderer@^16.8.3:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.3, react-test-renderer@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
@@ -23558,7 +23120,7 @@ readline-sync@^1.4.9:
resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.9.tgz#3eda8e65f23cd2a17e61301b1f0003396af5ecda"
integrity sha1-PtqOZfI80qF+YTAbHwADOWr17No=
-realpath-native@^1.0.0, realpath-native@^1.1.0:
+realpath-native@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
@@ -25212,11 +24774,6 @@ simplebar@^4.0.0:
resize-observer-polyfill "^1.5.1"
scrollbarwidth "^0.1.3"
-sisteransi@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-0.1.1.tgz#5431447d5f7d1675aac667ccd0b865a4994cb3ce"
- integrity sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g==
-
sisteransi@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.0.tgz#77d9622ff909080f1c19e5f4a1df0c1b0a27b88c"
@@ -26036,11 +25593,6 @@ strip-ansi@^4.0.0:
dependencies:
ansi-regex "^3.0.0"
-strip-bom@3.0.0, strip-bom@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
- integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
strip-bom@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -26048,6 +25600,11 @@ strip-bom@^2.0.0:
dependencies:
is-utf8 "^0.2.0"
+strip-bom@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+ integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
strip-color@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b"
@@ -26214,13 +25771,6 @@ supports-color@^2.0.0:
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-supports-color@^3.1.2:
- version "3.2.3"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
- integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
- dependencies:
- has-flag "^1.0.0"
-
supports-color@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
@@ -26545,17 +26095,6 @@ terser@^3.16.1, terser@^3.17.0, terser@^3.7.5:
source-map "~0.6.1"
source-map-support "~0.5.10"
-test-exclude@^4.2.1:
- version "4.2.3"
- resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
- integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
- dependencies:
- arrify "^1.0.1"
- micromatch "^2.3.11"
- object-assign "^4.1.0"
- read-pkg-up "^1.0.1"
- require-main-filename "^1.0.1"
-
test-exclude@^5.2.3:
version "5.2.3"
resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
@@ -28739,7 +28278,7 @@ which-pm-runs@^1.0.0:
resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
-which@1, which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.8, which@^1.2.9, which@^1.3.0, which@^1.3.1:
+which@1, which@^1.2.10, which@^1.2.14, which@^1.2.8, which@^1.2.9, which@^1.3.0, which@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -29116,7 +28655,7 @@ write-file-atomic@^1.2.0:
imurmurhash "^0.1.4"
slide "^1.1.5"
-write-file-atomic@^2.0.0, write-file-atomic@^2.1.0, write-file-atomic@^2.3.0:
+write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
version "2.4.2"
resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.2.tgz#a7181706dfba17855d221140a9c06e15fcdd87b9"
integrity sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==
From 23cc5a7ea6ac93c0373c8a14f20e11eac5891353 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Sun, 16 Jun 2019 23:28:48 +0200
Subject: [PATCH 104/371] FIX snapshots
---
.../info/src/__snapshots__/index.test.js.snap | 18358 ++++++++--------
.../addon-info.stories.storyshot | 11192 ++--------
2 files changed, 11058 insertions(+), 18492 deletions(-)
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index 4ac4d39e4cd6..64aa1bba1d58 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -33,1220 +33,101 @@ exports[`addon Info should render and external markdown 1`] = `
showSource={true}
styles={[Function]}
>
-
-
-
- It's a
- story:
-
-
-
- x => x + 1
-
-
- [object Object]
-
-
- 1,2,3
-
-
- 7
-
-
- seven
-
-
- true
-
-
- undefined
-
-
- test
-
-
- storiesOf
-
-
-
-
-
-
-
- Show Info
-
-
+
+ It's a
+ story:
+
-
- ×
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
-
-
-
- Prop Types
-
-
-
- "
- TestComponent
- " Component
-
-
-
-
- No propTypes defined!
-
-
-
-
-
+ test
+
+
+ storiesOf
+
+
-
+
+
+ Show Info
+
`;
@@ -1286,1302 +167,101 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
showSource={true}
styles={[Function]}
>
-
-
-
- It's a
- story:
-
-
-
- x => x + 1
-
-
- [object Object]
-
-
- 1,2,3
-
-
- 7
-
-
- seven
-
-
- true
-
-
- undefined
-
-
- test
-
-
- storiesOf
-
-
-
-
-
-
-
- Show Info
-
-
+
+ It's a
+ story:
+
-
- ×
-
-
-
-
-
-
-
-
-
-
- Story Source
-
-
-
-
-
- It's a
- story:
-
-
- }
- >
-
-
-
- <
- div
-
-
- It's a
- story:
-
-
- }
- singleLine={false}
- >
-
-
-
- >
-
-
-
-
-
- It's a
-
-
-
-
-
-
-
-
-
-
-
- story:
-
-
-
-
- }
- >
-
-
- <
- TestComponent
-
-
- }
- singleLine={true}
- >
-
-
-
-
-
-
-
- func
-
-
- =
-
- {
-
-
- func
-
-
- }
-
-
-
-
-
-
-
-
-
- obj
-
-
- =
-
- {
-
-
-
- {
-
-
- a
-
-
- :
-
-
- 'a'
-
-
- ,
-
-
- b
-
-
- :
-
-
- 'b'
-
-
- }
-
-
-
- }
-
-
-
-
-
-
-
-
-
- array
-
-
- =
-
- {
-
-
-
- [
-
-
-
- 1
-
-
-
- ,
-
-
-
- 2
-
-
-
- ,
-
-
-
- 3
-
-
-
- ]
-
-
-
- }
-
-
-
-
-
-
-
-
-
- number
-
-
- =
-
- {
-
-
- 7
-
-
- }
-
-
-
-
-
-
-
-
-
- string
-
-
- =
-
- "
-
-
- seven
-
-
- "
-
-
-
-
-
-
-
-
-
- bool
-
-
-
-
-
-
- />
-
-
-
-
-
- </
- div
- >
-
-
-
-
-
-
-
- Copy
-
-
-
-
-
-
-
- Prop Types
-
-
-
- "
- TestComponent
- " Component
-
-
-
-
- No propTypes defined!
-
-
-
-
-
+ test
+
+
+ storiesOf
+
+
-
+
+
+ Show Info
+
`;
@@ -2619,1155 +299,101 @@ exports[`addon Info should render for memoized component 1`] = `
showSource={true}
styles={[Function]}
>
-
-
-
- It's a
- story:
-
-
-
- x => x + 1
-
-
- [object Object]
-
-
- 1,2,3
-
-
- 7
-
-
- seven
-
-
- true
-
-
- undefined
-
-
- test
-
-
- storiesOf
-
-
-
-
-
-
-
- Show Info
-
-
+
+ It's a
+ story:
+
-
- ×
-
-
-
-
+
+ x => x + 1
+
+
+ [object Object]
+
+
+ 1,2,3
+
+
+ 7
+
+
+ seven
+
+
+ true
+
+
+ undefined
+
+
-
-
-
-
-
- Story Source
-
-
-
-
-
- It's a
- story:
-
-
- }
- >
-
-
-
- <
- div
-
-
- It's a
- story:
-
-
- }
- singleLine={false}
- >
-
-
-
- >
-
-
-
-
-
- It's a
-
-
-
-
-
-
-
-
-
-
-
- story:
-
-
-
-
- }
- >
-
-
- <
- TestComponent
-
-
- }
- singleLine={true}
- >
-
-
-
-
-
-
-
- func
-
-
- =
-
- {
-
-
- func
-
-
- }
-
-
-
-
-
-
-
-
-
- obj
-
-
- =
-
- {
-
-
-
- {
-
-
- a
-
-
- :
-
-
- 'a'
-
-
- ,
-
-
- b
-
-
- :
-
-
- 'b'
-
-
- }
-
-
-
- }
-
-
-
-
-
-
-
-
-
- array
-
-
- =
-
- {
-
-
-
- [
-
-
-
- 1
-
-
-
- ,
-
-
-
- 2
-
-
-
- ,
-
-
-
- 3
-
-
-
- ]
-
-
-
- }
-
-
-
-
-
-
-
-
-
- number
-
-
- =
-
- {
-
-
- 7
-
-
- }
-
-
-
-
-
-
-
-
-
- string
-
-
- =
-
- "
-
-
- seven
-
-
- "
-
-
-
-
-
-
-
-
-
- bool
-
-
-
-
-
-
- />
-
-
-
-
-
- </
- div
- >
-
-
-
-
-
-
-
- Copy
-
-
-
-
-
+ test
+
+
+ storiesOf
+
+
-
+
+
+ Show Info
+
`;
@@ -4202,310 +828,296 @@ exports[`addon Info should render component description if story kind matches co
styles={[Function]}
>
-
+
-
-
- TestComponent
-
-
- Basic test
-
-
-
-
-
-
- It's a
- Basic test
- story:
-
+
-
-
- x => x + 1
-
-
- [object Object]
-
-
- 1,2,3
-
-
- 7
-
-
- seven
-
-
- true
-
-
- undefined
-
-
- test
-
-
- storiesOf
-
-
-
-
+ Basic test
+
+
+
+
+
+
+
+ Awesome test component description
+
+
+
+
+ with markdown support
+
+
+
+
+
-
-
- bold
-
-
-
- cursive
-
-
-
-
+
+
-
+
+
+
+
+
+
-
-
-
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ,
- "ctr": 82,
- "isSpeedy": false,
- "key": "css",
- "nonce": undefined,
- "tags": Array [
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ],
- },
- }
- }
- serialized={
- Object {
- "map": undefined,
- "name": "nh5djz",
- "next": undefined,
- "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
- }
- }
- />
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ "ctr": 82,
+ "isSpeedy": false,
+ "key": "css",
+ "nonce": undefined,
+ "tags": Array [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ],
+ },
+ }
+ }
+ serialized={
+ Object {
+ "map": undefined,
+ "name": "nh5djz",
+ "next": undefined,
+ "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
+ }
+ }
+ />
+
+
+
+
+
-
-
-
-
-
- number
-
-
- =
-
- {
-
-
- 7
-
-
- }
-
-
-
-
-
-
-
-
-
- string
-
-
- =
-
+
+
- "
-
-
+
- seven
-
-
- "
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ a
+
+ ;
+
+
+
+
+
+
+
+
+
+
+
+
+
- bool
-
-
-
-
-
-
- />
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
- </
- div
- >
-
+
+ Copy
+
+
-
-
+
+
-
+
+
+
+
+ Story Source
+
+
+ "
+ format={false}
+ language="jsx"
+ >
+
+
+
+
-
- Copy
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`addon Info should render component description if story name matches component 1`] = `
-.emotion-10 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-5 {
- position: relative;
-}
-
-.emotion-5 code {
- padding-right: 10px;
-}
-
-.emotion-5 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
-
-.emotion-5 * .token.comment {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-5 * .token.prolog {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-5 * .token.doctype {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-5 * .token.cdata {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-5 * .token.string {
- color: #A31515;
-}
-
-.emotion-5 * .token.punctuation {
- color: #393A34;
-}
-
-.emotion-5 * .token.operator {
- color: #393A34;
-}
-
-.emotion-5 * .token.url {
- color: #36acaa;
-}
-
-.emotion-5 * .token.symbol {
- color: #36acaa;
-}
-
-.emotion-5 * .token.number {
- color: #36acaa;
-}
-
-.emotion-5 * .token.boolean {
- color: #36acaa;
-}
-
-.emotion-5 * .token.variable {
- color: #36acaa;
-}
-
-.emotion-5 * .token.constant {
- color: #36acaa;
-}
-
-.emotion-5 * .token.inserted {
- color: #36acaa;
-}
-
-.emotion-5 * .token.atrule {
- color: #0000ff;
-}
-
-.emotion-5 * .token.keyword {
- color: #0000ff;
-}
-
-.emotion-5 * .token.attr-value {
- color: #0000ff;
-}
-
-.emotion-5 * .token.function {
- color: #393A34;
-}
-
-.emotion-5 * .token.deleted {
- color: #9a050f;
-}
-
-.emotion-5 * .token.important {
- font-weight: bold;
-}
-
-.emotion-5 * .token.bold {
- font-weight: bold;
-}
-
-.emotion-5 * .token.italic {
- font-style: italic;
-}
-
-.emotion-5 * .token.class-name {
- color: #2B91AF;
-}
-
-.emotion-5 * .token.tag {
- color: #800000;
-}
-
-.emotion-5 * .token.selector {
- color: #800000;
-}
-
-.emotion-5 * .token.attr-name {
- color: #ff0000;
-}
-
-.emotion-5 * .token.property {
- color: #ff0000;
-}
-
-.emotion-5 * .token.regex {
- color: #ff0000;
-}
-
-.emotion-5 * .token.entity {
- color: #ff0000;
-}
-
-.emotion-5 * .token.directive.tag .tag {
- background: #ffff00;
- color: #393A34;
-}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ "ctr": 82,
+ "isSpeedy": false,
+ "key": "css",
+ "nonce": undefined,
+ "tags": Array [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ],
+ },
+ }
+ }
+ serialized={
+ Object {
+ "map": undefined,
+ "name": "nh5djz",
+ "next": undefined,
+ "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
+ }
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+ div
+
+
+ >
+
+
+
+
+ It's a Basic test story:
+
+
+
+
+
+ <
+
+
+ TestComponent
+
+
+
+
+
+ array
+
+
+
+ =
+
+
+ {
+
+
+ [
+
+
+
+
+ 1
+
+
+ ,
+
+
+
+
+ 2
+
+
+ ,
+
+
+
+
+ 3
+
+
+
+
+ ]
+
+
+ }
+
+
+
+
+
+ bool
+
+
+
+
+ func
+
+
+
+ =
+
+
+ {
+
+
+ function
+
+
+
+ noRefCheck
+
+
+ (
+
+
+ )
+
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ number
+
+
+
+ =
+
+
+ {
+
+
+ 7
+
+
+ }
+
+
+
+
+
+ obj
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ a
+
+ :
+
+
+
+ 'a'
+
+
+ ,
+
+
+ b
+
+ :
+
+
+
+ 'b'
+
+
+
+
+ }
+
+
+ }
+
+
+
+
+
+ string
+
+
+
+ =
+
+
+ "
+
+ seven
+
+ "
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+ div
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`addon Info should render component description if story name matches component 1`] = `
+.emotion-10 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ position: relative;
+}
+
+.emotion-5 code {
+ padding-right: 10px;
+}
+
+.emotion-5 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-5 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-5 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-5 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-5 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-5 * .token.string {
+ color: #A31515;
+}
+
+.emotion-5 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-5 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-5 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-5 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-5 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-5 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-5 * .token.function {
+ color: #393A34;
+}
+
+.emotion-5 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-5 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-5 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-5 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-5 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-5 * .token.tag {
+ color: #800000;
+}
+
+.emotion-5 * .token.selector {
+ color: #800000;
+}
+
+.emotion-5 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-5 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-5 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-5 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-5 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
.emotion-5 * .language-json .token.boolean {
color: #0000ff;
}
@@ -7451,2933 +5385,4583 @@ exports[`addon Info should render component description if story name matches co
styles={[Function]}
>
-
+
-
-
- Test Components
-
-
- TestComponent
-
-
-
-
-
-
- It's a
- TestComponent
- story:
-
+
-
-
- x => x + 1
-
-
- [object Object]
-
-
- 1,2,3
-
-
- 7
-
-
- seven
-
-
- true
-
-
- undefined
-
-
- test
-
-
- storiesOf
-
-
-
-
+ TestComponent
+
+
+
+
+
+
+
+ Awesome test component description
+
+
+
+
+ with markdown support
+
+
+
+
+
-
-
- bold
-
-
-
- cursive
-
-
-
-
+
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ,
- "ctr": 82,
- "isSpeedy": false,
- "key": "css",
- "nonce": undefined,
- "tags": Array [
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
- ],
- },
- }
- }
- serialized={
- Object {
- "map": undefined,
- "name": "nh5djz",
- "next": undefined,
- "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
- }
- }
- />
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ "ctr": 82,
+ "isSpeedy": false,
+ "key": "css",
+ "nonce": undefined,
+ "tags": Array [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ],
+ },
+ }
+ }
+ serialized={
+ Object {
+ "map": undefined,
+ "name": "nh5djz",
+ "next": undefined,
+ "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
+ }
+ }
+ />
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+ a
+
+ ;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Story Source
+
+
+
"
+ format={false}
+ language="jsx"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ "ctr": 82,
+ "isSpeedy": false,
+ "key": "css",
+ "nonce": undefined,
+ "tags": Array [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ],
+ },
}
- }
- >
- <
- TestComponent
-
-
- }
- singleLine={true}
- >
-
-
-
-
-
-
-
- func
-
-
- =
-
- {
-
-
- func
-
-
- }
-
-
-
-
-
-
-
-
-
- obj
-
-
- =
-
- {
-
-
-
- {
-
-
- a
-
-
- :
-
-
- 'a'
-
-
- ,
-
-
- b
-
-
- :
-
-
- 'b'
-
-
- }
-
-
-
- }
-
-
-
-
+
+
+
+
+
-
-
-
-
-
- array
-
-
- =
-
+
+
+
- {
-
-
+
-
- [
-
-
-
- 1
-
-
-
- ,
-
-
-
- 2
-
-
-
- ,
-
-
+
-
- 3
-
-
-
- ]
-
-
-
- }
-
-
-
-
-
-
-
-
-
- number
-
-
- =
-
- {
-
-
- 7
-
-
- }
-
-
-
-
-
-
-
-
-
+
+
+
+
+ <
+
+ div
+
+
+ >
+
+
+
+
+ It's a TestComponent story:
+
+
+
+
+
+ <
+
+
+ TestComponent
+
+
+
+
+
+ array
+
+
+
+ =
+
+
+ {
+
+
+ [
+
+
+
+
+ 1
+
+
+ ,
+
+
+
+
+ 2
+
+
+ ,
+
+
+
+
+ 3
+
+
+
+
+ ]
+
+
+ }
+
+
+
+
+
+ bool
+
+
+
+
+ func
+
+
+
+ =
+
+
+ {
+
+
+ function
+
+
+
+ noRefCheck
+
+
+ (
+
+
+ )
+
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ number
+
+
+
+ =
+
+
+ {
+
+
+ 7
+
+
+ }
+
+
+
+
+
+ obj
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ a
+
+ :
+
+
+
+ 'a'
+
+
+ ,
+
+
+ b
+
+ :
+
+
+
+ 'b'
+
+
+
+
+ }
+
+
+ }
+
+
+
+
+
+ string
+
+
+
+ =
+
+
+ "
+
+ seven
+
+ "
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+ div
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- string
-
-
- =
-
- "
-
-
- seven
-
-
- "
-
-
-
-
-
-
-
-
-
+
+
- bool
-
-
-
-
-
-
- />
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
- </
- div
- >
-
+
+ Copy
+
+
-
-
+
+
-
-
- Copy
-
-
-
-
-
-
+
+
+
+
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index c820d2d184e5..a1d1992bd3a5 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
-
+Array [
@@ -10,243 +10,19 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
>
Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Decorator
-
-
- Use Info as story decorator
-
-
-
-
- Info can take options via the global or local decorator as well.
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = `
-
+Array [
@@ -255,437 +31,19 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor
>
Forwarded Ref Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/ForwardRef
-
-
- Displays forwarded ref components correctly
-
-
-
-
- Story Source
-
-
-
-
-
-
- <ForwardRef
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Forwarded Ref Button
-
- "
-
-
-
-
-
- >
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Forwarded Ref Button
-
- "
-
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- onClick
-
- }
-
-
-
-
-
-
- style
-
-
- =
-
- {
-
- {}
-
- }
-
-
-
-
-
-
- />
-
-
-
-
- </ForwardRef>
-
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
- "Unknown" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
exports[`Storyshots Addons|Info/ForwardRef Uses forwardRef displayName if available 1`] = `
-
+Array [
@@ -694,356 +52,19 @@ exports[`Storyshots Addons|Info/ForwardRef Uses forwardRef displayName if availa
>
Forwarded Ref Button w/ Display Name
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/ForwardRef
-
-
- Uses forwardRef displayName if available
-
-
-
-
- Story Source
-
-
-
-
-
- <ButtonDisplayName
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Forwarded Ref Button w/ Display Name
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
- "ButtonDisplayName" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
-
+Array [
@@ -1053,162 +74,40 @@ exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
/>
-
+ ,
Show Info
-
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
+Array [
- ×
+ Button
-
-
-
-
- Addons|Info/GitHub issues
-
-
- #1814
-
-
-
-
- Allow Duplicate DisplayNames for HOC #1814
-
-
-
-
- Story Source
-
-
-
-
-
-
- <div
-
-
-
- >
-
-
-
-
- <Unknown
-
-
-
- />
-
-
-
-
- <Unknown
-
-
-
- />
-
-
-
-
- </div>
-
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "Unknown" Component
-
-
- No propTypes defined!
-
-
-
-
- "Unknown" Component
-
-
- No propTypes defined!
-
-
-
-
-
-
-
+ ,
+
+ Show Info
+ ,
+]
`;
-exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
-
+exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `
+Array [
@@ -1217,277 +116,154 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
>
Button
-
+
,
Show Info
-
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
+Array [
- ×
+ Button
-
+
,
+
+ Show Info
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component for the table 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = `
+Array [
+
+
-
-
- Addons|Info/JSX
-
-
- Displays JSX in description
-
-
-
+
-
-
- This is a JSX info section
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero nulla.
-
-
-
- This is a link
-
-
-
-
-
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
+ Inlines component inside story
+
-
-
-`;
-
-exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `
-.emotion-5 {
+ ,
+
+
+ Button
+
+
,
+ .emotion-5 {
position: relative;
overflow: hidden;
color: #333333;
@@ -1725,419 +501,398 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
}
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
+
+ Component should be inlined between description and PropType table
+
+
+ Story Source
+
-
- Addons|Info/Markdown
-
-
- Displays Markdown in description
-
-
-
-
- You can use markdown in your withInfo description.
-
-
- Sometimes you might want to manually include some
-
- code
-
- examples:
-
+
+
-
-
-
-
-
- const
+ <
-
- Button
+ BaseButton
-
+
+
+
+
+ disabled
+
+
=
-
- (
+ {
+
+
+ false
- )
+ }
+
+
+
+
+
+ label
+
+
+
+ =
+
+
+ "
+
+ Button
+
+ "
+
+
+
+
+
+ onClick
+
+
+
+ =
+
+
+ {
-
- =>
+ function
- <
+ noRefCheck
- button
- /
+ (
- >
+ )
+
- ;
+ {
-
-
-
-
-
-
-
-
-
-
-
+
+ }
+
+
+ }
+
+
+
+
+
+ style
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ />
+
+
+
+
+
+
-
- Copy
-
-
+ class="simplebar-placeholder"
+ />
- Maybe include a
-
- link
-
- to your project as well.
+
-
-
+
+
+
-
+
+ Prop Types
+
+
+
+ "BaseButton" Component
+
+
+
+
+
+ property
+
+
+ propType
+
+
+ required
+
+
+ default
+
+
+ description
+
+
+
+
+
+
-
- <BaseButton
+ disabled
+
+
+
+ bool
+
+
+ -
+
+
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
+ false
+
+
+
+
+
+
+ label
+
+
+
+ string
+
+
+
+ yes
+
+
+ -
+
+
+
+
+
+ onClick
+
+
+
+ func
-
- />
+
+
+ -
+
+
+
+ onClick
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
+
+
+
+
+
+ style
+
+
+
+ other
+
+
+
+ -
+
+
+
+ {}
+
+
+
+
+
+
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
-
+exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = `
+Array [
@@ -2146,261 +901,47 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
>
Button
-
+
,
Show Info
-
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from prop tables 1`] = `
+Array [
-
- ×
-
-
-
-
- Addons|Info/Markdown
-
-
- From external Markdown file
-
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
+ Button
+
+
+ Flow Typed Button
+
-
-
+ ,
+
+ Show Info
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
-
+exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source 1`] = `
+Array [
@@ -2409,273 +950,19 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
>
Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Markdown
-
-
- From internal Markdown file
-
-
-
-
- internal
-
-
- markdown
-
-
- file
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component for the table 1`] = `
-
+exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = `
+Array [
@@ -2684,180 +971,19 @@ exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component fo
>
Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.TableComponent
-
-
- Use a custom component for the table
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- name
-
-
- type
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- false
-
-
-
-
-
- label
-
- *
-
-
-
-
-
-
-
-
- onClick
-
-
-
-
-
-
-
- style
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = `
-
+exports[`Storyshots Addons|Info/Options.styles Full control over styles using a function 1`] = `
+Array [
@@ -2866,222 +992,27 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha
>
Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.excludedPropTypes
-
-
- Excludes propTypes that are in the excludedPropTypes array
-
-
-
-
- Label propType should be excluded
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = `
-
+exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = `
+
+ Button
+
+`;
+
+exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = `
+Array [
@@ -3090,249 +1021,39 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header
>
Button
-
+
,
Show Info
-
-
-
- ×
-
-
-
-
-
- The Info Addon header should be hidden
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = `
-
+exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = `
+Array [
- Addons|Info/Options.inline
+ Addons|Info/Parameters
- Inlines component inside story
+ Overwrite the text parameter with markdown inline
-
+
,
@@ -3341,1540 +1062,31 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`
>
Button
-
-
-
-
-
- Component should be inlined between description and PropType table
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-`;
+ ,
+ .emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+}
-exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.propTables
-
-
- Shows additional component prop tables
-
-
-
-
- There should be a prop table added for a component not included in the story
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
- "FlowTypeButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- unknown
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- onClick
-
-
-
- unknown
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from prop tables 1`] = `
-
-
-
-
- Button
-
-
- Flow Typed Button
-
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.propTablesExclude
-
-
- Exclude component from prop tables
-
-
-
-
- This can exclude extraneous components from being displayed in prop tables.
-
-
-
-
- Story Source
-
-
-
-
-
-
- <div
-
-
-
- >
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- <FlowTypeButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Flow Typed Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- </div>
-
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+.emotion-2 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
-exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.source
-
-
- Shows or hides Info Addon source
-
-
-
-
- The Info Addon source section should be hidden
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+.emotion-2 code {
+ padding-right: 10px;
+}
-exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.styles
-
-
- Extend info styles with an object
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Options.styles Full control over styles using a function 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Options.styles
-
-
- Full control over styles using a function
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = `
-
- Button
-
-`;
-
-exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = `
-.emotion-5 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-2 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
- position: relative;
-}
-
-.emotion-2 code {
- padding-right: 10px;
-}
-
-.emotion-2 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
+.emotion-2 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
.emotion-2 * .token.comment {
color: #008000;
@@ -5089,419 +1301,526 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
}
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
+
+ description or documentation about my component, supports markdown
+
-
+
+
+
+
+
+
+
+
+ <
+
+ Button
+
+ >
+
+ Click Here
+
+ <
+
+
+ /
+
+ Button
+
+ >
+
+
+
+
+
+
+
+
+
+
- Addons|Info/Parameters
-
-
+
+
- Overwrite the parameters with markdown variable
-
+
+
-
- You can use markdown in your withInfo description.
-
-
- Sometimes you might want to manually include some
-
- code
-
- examples:
-
+ Copy
+
+
+
+
+ Story Source
+
+
+
+
-
-
-
-
-
- const
+ <
-
- Button
+ BaseButton
-
+
+
+
+
+ disabled
+
+
=
-
- (
+ {
+
+
+ false
- )
+ }
+
+
+
+
+
+ label
+
+
+
+ =
+
+
+ "
+
+ Button
+
+ "
+
+
+
+
+
+ onClick
+
+
+
+ =
+
+
+ {
-
- =>
+ function
- <
+ noRefCheck
- button
- /
+ (
- >
+ )
+
- ;
+ {
-
-
-
-
-
+
+ }
+
+
+ }
+
+
+
+
+
+ style
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ />
+
+
+
+
+
-
-
-
-
-
- Copy
-
-
+ class="simplebar-placeholder"
+ />
- Maybe include a
-
- link
-
- to your project as well.
+
-
-
+
+
+
-
+
+ Prop Types
+
+
+
+ "BaseButton" Component
+
+
+
+
+
+ property
+
+
+ propType
+
+
+ required
+
+
+ default
+
+
+ description
+
+
+
+
+
+
-
- <BaseButton
+ disabled
+
+
+
+ bool
+
+
+ -
+
+
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
+ false
+
+
+
+
+
+
+ label
+
+
+
+ string
+
+
+
+ yes
+
+
+ -
+
+
+
+
+
+ onClick
+
+
+
+ func
-
- />
+
+
+ -
+
+
+
+ onClick
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
+
+
+
+
+
+ style
+
+
+
+ other
+
+
+
+ -
+
+
+
+ {}
+
+
+
+
+
+
-
-
+ ,
+]
`;
-exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = `
-.emotion-5 {
+exports[`Storyshots Addons|Info/Parameters Overwriting and extending the parameters and options set stories-wise 1`] = `
+Array [
+
+
+
+
+ Addons|Info/Parameters
+
+
+ Overwriting and extending the parameters and options set stories-wise
+
+
+
+
,
+
+
+ Button
+
+
,
+ .emotion-5 {
position: relative;
overflow: hidden;
color: #333333;
@@ -5735,4019 +2054,411 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
.emotion-3:focus {
box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
-
-
- Addons|Info/Parameters
-
-
- Overwrite the text parameter with markdown inline
-
-
-
-
-
-
- Button
-
-
-
-
-
-
- description or documentation about my component, supports markdown
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
- Button
-
- >
-
- Click Here
-
- <
-
-
- /
-
- Button
-
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Parameters Overwriting and extending the parameters and options set stories-wise 1`] = `
-
-
-
-
-
- Addons|Info/Parameters
-
-
- Overwriting and extending the parameters and options set stories-wise
-
-
-
-
-
-
- Button
-
-
-
-
-
-
- Label propType should be excluded
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = `
-
-
-
-
-
- Addons|Info/Parameters
-
-
- Using paramaters across all stories
-
-
-
-
-
-
- Button
-
-
-
-
-
-
- This text should be displayed on every story and the component should be inlined between description and PropType table
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = `
-
-
-
- Flow Typed Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/React Docgen
-
-
- Comments from Flow declarations
-
-
-
-
- Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
-
-
-
-
- Story Source
-
-
-
-
-
- <FlowTypeButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Flow Typed Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "FlowTypeButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- unknown
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- onClick
-
-
-
- unknown
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = `
-
-
-
- Docgen Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/React Docgen
-
-
- Comments from PropType declarations
-
-
-
-
- Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table
-
-
-
-
- Story Source
-
-
-
-
-
- <DocgenButton
-
-
-
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Docgen Button
-
- "
-
-
-
-
-
-
-
-
-
- one
-
-
- =
-
- {
-
- {
-
-
- key
-
-
- :
-
- 1
-
- }
-
- }
-
-
-
-
-
-
-
-
-
- shape
-
-
- =
-
- {
-
- {
-
-
-
-
-
-
- id
-
-
- :
-
- 3
-
- ,
-
-
-
-
-
-
- arr
-
-
- :
-
- []
-
- ,
-
-
-
-
-
-
- shape
-
-
- :
-
- {
-
-
- shape
-
-
- :
-
- {
-
-
- foo
-
-
- :
-
- 'bar'
-
- }
-
- }
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- }
-
- }
-
-
-
-
-
-
-
-
-
- arrayOf
-
-
- =
-
- {
-
- [
-
-
- 1
-
-
- ,
-
-
- 2
-
-
- ,
-
-
- 3
-
-
- ]
-
- }
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "DocgenButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- one
-
-
-
- other
-
-
-
- -
-
-
-
- {
-
-
- key
-
-
- :
-
- 1
-
- }
-
-
-
-
-
-
- two
-
-
-
- other
-
-
-
- -
-
-
-
- {
-
-
- thing
-
-
- :
-
- {
-
-
- id
-
-
- :
-
- 2
-
- ,
-
-
- func
-
-
- :
-
- func
-
- ,
-
-
- arr
-
-
- :
-
- []
-
- }
-
- }
-
-
-
-
-
-
- obj
-
-
-
- object
-
-
-
- -
-
-
-
- {
-
-
- key
-
-
- :
-
- 'value'
-
- }
-
-
-
-
-
-
- shape
-
-
-
- other
-
-
-
- -
-
-
-
- {
-
-
-
-
-
-
- id
-
-
- :
-
- 3
-
- ,
-
-
-
-
-
-
- func
-
-
- :
-
- func
-
- ,
-
-
-
-
-
-
- arr
-
-
- :
-
- []
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- }
-
-
-
-
-
-
- arrayOf
-
-
-
- other
-
-
-
- -
-
-
-
- [
-
-
- 1
-
-
- ,
-
-
- 2
-
-
- ,
-
-
- 3
-
-
- ]
-
-
-
-
-
-
- msg
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
- enm
-
-
-
- other
-
-
-
- -
-
-
-
- News
-
-
-
-
-
-
- enmEval
-
-
-
- other
-
-
-
- -
-
-
-
- Photos
-
-
-
-
-
-
- union
-
-
-
- other
-
-
-
- -
-
-
-
- hello
-
-
-
-
-
-
- optionalString
-
-
-
- string
-
-
-
- -
-
-
-
- Default String
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/React Docgen
-
-
- Comments from component declaration
-
-
-
-
- Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/React Docgen
-
-
- Comments from named export component declaration
-
-
-
-
- Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
-
-
-
-
- Story Source
-
-
-
-
-
- <NamedExportButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "NamedExportButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
-
-
-
-
-
-
- name
-
-
- type
-
-
- default
-
-
- description
-
-
-
-
-
-
- label
-
- *
-
-
-
- string
-
-
-
- Text to display inside button
-
-
-
-
- disabled
-
-
- boolean
-
-
- false
-
-
-
-
-
- onClick
-
- *
-
-
-
- function
-
-
-
- Callback for when button is clicked
-
-
-
-
- style
-
-
- object
-
-
- {}
-
-
- Styles to apply to button
-
-
-
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Story Source
-
-
- Array prop
-
-
-
-
- Story Source
-
-
-
-
-
- <TableComponent
-
-
-
-
-
- propDefinitions
-
-
- =
-
- {
-
- [
-
-
-
-
-
-
- {
-
-
-
-
-
-
- property
-
-
- :
-
- 'label'
-
- ,
-
-
-
-
-
-
- propType
-
-
- :
-
- {
-
-
- name
-
-
- :
-
- 'string'
-
- }
-
- ,
-
-
-
-
-
-
- required
-
-
- :
-
- true
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- }
-
-
- ,
-
-
-
-
-
-
- {
-
-
-
-
-
-
- property
-
-
- :
-
- 'disabled'
-
- ,
-
-
-
-
-
-
- propType
-
-
- :
-
- {
-
-
- name
-
-
- :
-
- 'boolean'
-
- }
-
- ,
-
-
-
-
-
-
- required
-
-
- :
-
- false
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- }
-
-
- ,
-
-
-
-
-
-
- {
-
-
-
-
-
-
- property
-
-
- :
-
- 'onClick'
-
- ,
-
-
-
-
-
-
- propType
-
-
- :
-
- {
-
-
- name
-
-
- :
-
- 'function'
-
- }
-
- ,
-
-
-
-
-
-
- description
-
-
- :
-
- 'Callback for when button is clicked'
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- }
-
-
- ,
-
-
-
-
-
- …
-
-
-
-
-
- ]
-
- }
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "TableComponent" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- propDefinitions
-
-
-
- other
-
-
-
- -
-
-
-
- []
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Story Source Children 1`] = `
-
-
-
-
- Here is my nice button:
-
-
- Button
-
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Story Source
-
-
- Children
-
-
-
-
- Story Source
-
-
-
-
-
-
- <div
-
-
-
- >
-
-
-
-
-
- <p
-
-
-
- >
-
-
-
-
- Here is my nice button:
-
-
-
-
- </p>
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- />
-
-
-
-
- </div>
-
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
-
- Addons|Info/Story Source
-
-
- Many props
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- disabled
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+ outline: 0 none;
+}
-exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
+
+ Label propType should be excluded
+
+
+ Story Source
+
-
- Addons|Info/Story Source
-
-
- Object prop
-
-
-
-
- Story Source
-
-
-
+
+
-
- <BaseButton
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- style
-
-
- =
-
- {
+
+
+
- {
-
-
-
-
+
+
+ <
+
+
+ BaseButton
+
+
+
+
+
+ disabled
+
+
+
+ =
+
+
+ {
+
+
+ false
- color
+ }
- :
+
+
- 'midnightblue'
+ label
- ,
-
-
-
-
+
+
+ =
+
+
+ "
+ Button
- backgroundColor
+ "
- :
+
+
- 'powderblue'
+ onClick
- ,
-
-
-
-
+
+
+ =
+
+
+ {
+
+
+ function
+
+
+
+ noRefCheck
+
+
+ (
+
+
+ )
+
+
+
+ {
+
+
+ }
- fontSize
+ }
- :
+
+
- '16px'
+ style
- ,
-
-
-
-
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ }
+
+
+ }
- …
-
-
-
+
+
+
+ />
- }
- }
-
-
-
-
-
-
- />
-
+
+
+
+
-
- Copy
-
-
-
-
-
+
+
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
+
+
+
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
-
-
-
- Button
-
-
-
- Show Info
-
-
-
- ×
-
-
-
-
- Addons|Info/Story Source
-
-
- One prop
-
+ Copy
+
-
-
- Story Source
-
-
-
-
+
+ Prop Types
+
+
+
+ "BaseButton" Component
+
+
+
+
+
+ property
+
+
+ propType
+
+
+ required
+
+
+ default
+
+
+ description
+
+
+
+
+
+
+ disabled
+
+
-
- <BaseButton
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
+ bool
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
+
+
+ -
+
+
+
+ false
+
+
+
+
+
+
+ onClick
+
+
+
+ func
+
+
+
+ -
+
+
+
+ onClick
+
+
+
+
+
+
+ style
+
+
+
+ other
+
+
+
+ -
+
+
+
+ {}
+
+
+
+
+
+
-
-
+
,
+]
`;
-exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = `
-.emotion-5 {
+exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = `
+Array [
+
+
+
+
+ Addons|Info/Parameters
+
+
+ Using paramaters across all stories
+
+
+
+
,
+
+
+ Button
+
+
,
+ .emotion-5 {
position: relative;
overflow: hidden;
color: #333333;
@@ -9905,86 +2616,728 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
color: #0000ff;
}
-.emotion-2 * .language-json .token.property {
- color: #2B91AF;
-}
+.emotion-2 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-2 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-0 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-4 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-3 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-3:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-3:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+
+
+
+ This text should be displayed on every story and the component should be inlined between description and PropType table
+
+
+ Story Source
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ BaseButton
+
+
+
+
+
+ disabled
+
+
+
+ =
+
+
+ {
+
+
+ false
+
+
+ }
+
+
+
+
+
+ label
+
+
+
+ =
+
+
+ "
+
+ Button
+
+ "
+
+
+
+
+
+ onClick
+
+
+
+ =
+
+
+ {
+
+
+ function
+
+
+
+ noRefCheck
+
+
+ (
+
+
+ )
+
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ style
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+
+ }
+
+
+ }
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+ Prop Types
+
+
+
+ "BaseButton" Component
+
+
+
+
+
+ property
+
+
+ propType
+
+
+ required
+
+
+ default
+
+
+ description
+
+
+
+
+
+
+ disabled
+
+
+
+ bool
+
+
+
+ -
+
+
+
+ false
+
+
+
+
+
+
+ label
+
+
+
+ string
+
+
+
+ yes
+
+
+ -
+
+
+
+
+
+ onClick
+
+
+
+ func
+
+
+
+ -
+
+
+
+ onClick
+
+
+
+
+
+
+ style
+
+
+
+ other
+
+
+
+ -
+
+
+
+ {}
+
+
+
+
+
+
+
+
+
,
+]
+`;
-.emotion-2 * .namespace {
- opacity: 0.7;
-}
+exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = `
+Array [
+
+
+ Flow Typed Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 0;
- padding: 10px;
-}
+exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = `
+Array [
+
+
+ Docgen Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-0 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding-right: 0;
- opacity: 1;
-}
+exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-4 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
+exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-3 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
+exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
+Array [
+
+
+
+
+
+ name
+
+
+ type
+
+
+ default
+
+
+ description
+
+
+
+
+
+
+ label
+
+ *
+
+
+
+ string
+
+
+
+ Text to display inside button
+
+
+
+
+ disabled
+
+
+ boolean
+
+
+ false
+
+
+
+
+
+ onClick
+
+ *
+
+
+
+ function
+
+
+
+ Callback for when button is clicked
+
+
+
+
+ style
+
+
+ object
+
+
+ {}
+
+
+ Styles to apply to button
+
+
+
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-3:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
+exports[`Storyshots Addons|Info/Story Source Children 1`] = `
+Array [
+
+
+
+ Here is my nice button:
+
+
+ Button
+
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-3 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
+exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-.emotion-3:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
+exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
+Array [
+
+
+ Button
+
+
,
+
+ Show Info
+ ,
+]
+`;
-
+exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
+Array [
@@ -9993,405 +3346,34 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
>
Button
-
+
,
Show Info
-
+ ,
+]
+`;
+
+exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = `
+Array [
- ×
+ Button
-
-
-
-
- Addons|Info/deprecated
-
-
- Displays Markdown in description
-
-
-
-
- You can use markdown in your withInfo description.
-
-
- Sometimes you might want to manually include some
-
- code
-
- examples:
-
-
-
-
-
-
-
-
-
-
-
-
- const
-
-
-
- Button
-
-
-
- =
-
-
-
- (
-
-
- )
-
-
-
- =>
-
-
-
- <
-
- button
-
- /
-
-
- >
-
-
- ;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Maybe include a
-
- link
-
- to your project as well.
-
-
-
-
- Story Source
-
-
-
-
-
- <BaseButton
-
-
-
-
-
- onClick
-
-
- =
-
- {
-
- actionHandler
-
- }
-
-
-
-
-
-
- label
-
-
- =
-
- "
-
- Button
-
- "
-
-
-
-
-
-
- />
-
-
-
-
- Copy
-
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
-
+
,
+
+ Show Info
+ ,
+]
`;
From 7aef76769783b53a905a8c936634c857b040c4dc Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 10:39:20 +0800
Subject: [PATCH 105/371] Fix JSON babel config error reporting
---
lib/core/src/server/utils/load-custom-babel-config.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core/src/server/utils/load-custom-babel-config.js b/lib/core/src/server/utils/load-custom-babel-config.js
index 7a271713c08c..051d8ea1f62f 100644
--- a/lib/core/src/server/utils/load-custom-babel-config.js
+++ b/lib/core/src/server/utils/load-custom-babel-config.js
@@ -41,7 +41,7 @@ function loadFromPath(babelConfigPath) {
We tried both loading as JS & JSON, neither worked.
Maybe there's a syntax error in the file?`);
logger.error(`=> From JS loading we got: ${error.js.message}`);
- logger.error(`=> From JSON loading we got: ${error.js.message}`);
+ logger.error(`=> From JSON loading we got: ${error.json && error.json.message}`);
throw error.js;
}
From f5a1ec01dbf4d1cb83c7af0160b8b1018dab7d88 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 10:57:29 +0800
Subject: [PATCH 106/371] Fix race condition on about page
---
lib/ui/src/settings/about.js | 3 ++-
lib/ui/src/settings/about.stories.js | 3 +++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/lib/ui/src/settings/about.js b/lib/ui/src/settings/about.js
index 6cf0327aed15..ea37e090ca35 100644
--- a/lib/ui/src/settings/about.js
+++ b/lib/ui/src/settings/about.js
@@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
+import semver from 'semver';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import { GlobalHotKeys } from 'react-hotkeys';
@@ -93,7 +94,7 @@ const Container = styled.div({
});
const AboutScreen = ({ latest, current, onClose }) => {
- const canUpdate = latest && latest.version !== current.version;
+ const canUpdate = latest && semver.gt(latest.version, current.version);
let updateMessage;
if (latest) {
diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js
index 6b9fdf9b0f4e..a2d70c73d108 100644
--- a/lib/ui/src/settings/about.stories.js
+++ b/lib/ui/src/settings/about.stories.js
@@ -24,6 +24,9 @@ storiesOf('UI|Settings/AboutScreen', module)
.add('up to date', () => (
))
+ .add('old version race condition', () => (
+
+ ))
.add('new version required', () => (
))
From 751f7baa2366bd2b75258278d32412e12028f1fc Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 13:10:50 +0800
Subject: [PATCH 107/371] Update about.stories.storyshot
---
.../__snapshots__/about.stories.storyshot | 1089 +++++++++++++++++
1 file changed, 1089 insertions(+)
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 2a58323dd789..6c72a075a064 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -2058,6 +2058,1095 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
`;
+exports[`Storyshots UI|Settings/AboutScreen old version race condition 1`] = `
+.emotion-28 {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.emotion-8 {
+ overflow-y: hidden;
+ overflow-x: auto;
+ width: 100%;
+ color: #999999;
+ width: 100%;
+ height: 40px;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
+ background: #FFFFFF;
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ position: relative;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ height: 40px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ white-space: nowrap;
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+}
+
+.emotion-2 > * {
+ margin-left: 15px;
+}
+
+.emotion-1 {
+ overflow: hidden;
+}
+
+.emotion-1:first-of-type {
+ margin-left: 0;
+}
+
+.emotion-0 {
+ white-space: normal;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ overflow: hidden;
+ vertical-align: top;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ padding: 0 15px;
+ text-transform: capitalize;
+ -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+ transition: color 0.2s linear,border-bottom-color 0.2s linear;
+ height: 40px;
+ line-height: 12px;
+ cursor: pointer;
+ background: transparent;
+ border: 0 solid transparent;
+ border-top: 3px solid transparent;
+ border-bottom: 3px solid transparent;
+ font-weight: bold;
+ font-size: 13px;
+ color: #1EA7FD;
+ border-bottom-color: #1EA7FD;
+}
+
+.emotion-0:empty {
+ display: none;
+}
+
+.emotion-0:focus {
+ outline: 0 none;
+ border-bottom-color: #1EA7FD;
+}
+
+.emotion-6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ white-space: nowrap;
+ -webkit-flex-basis: auto;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ margin-left: 30px;
+}
+
+.emotion-6 > * {
+ margin-right: 15px;
+}
+
+.emotion-4 {
+ shape-rendering: inherit;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ display: block;
+}
+
+.emotion-3 {
+ fill: currentColor;
+}
+
+.emotion-27 {
+ display: block;
+ position: relative;
+ font-size: 13px;
+ height: calc(100% - 40px);
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 40px;
+ overflow: auto;
+}
+
+.emotion-27 > *:first-child {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ height: 100%;
+ overflow: auto;
+}
+
+.emotion-5 {
+ height: 40px;
+ background: none;
+ color: inherit;
+ padding: 0;
+ cursor: pointer;
+ border: 0 solid transparent;
+ border-top: 3px solid transparent;
+ border-bottom: 3px solid transparent;
+ -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+ transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+ outline: 0 none;
+ color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+ width: 15px;
+}
+
+.emotion-24 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ padding-top: 20px;
+ margin-top: 20px;
+ border-top: 1px solid rgba(0,0,0,.1);
+ font-weight: 700;
+}
+
+.emotion-24 > * + * {
+ margin-left: 20px;
+}
+
+.emotion-19 {
+ display: inline-block;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: #1EA7FD;
+ color: #999999;
+}
+
+.emotion-19 svg path {
+ fill: #1EA7FD;
+}
+
+.emotion-19:hover,
+.emotion-19:focus {
+ cursor: pointer;
+ color: #0297f5;
+}
+
+.emotion-19:hover svg path,
+.emotion-19:focus svg path {
+ fill: #0297f5;
+}
+
+.emotion-19:active {
+ color: #028ee6;
+}
+
+.emotion-19:active svg path {
+ fill: #028ee6;
+}
+
+.emotion-19 svg {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+ vertical-align: text-top;
+ position: relative;
+ bottom: -0.125em;
+ margin-right: 0.4em;
+}
+
+.emotion-19 svg path {
+ fill: #999999;
+}
+
+.emotion-19:hover {
+ color: #666666;
+}
+
+.emotion-19:hover svg path {
+ fill: #666666;
+}
+
+.emotion-19:active {
+ color: #444444;
+}
+
+.emotion-19:active svg path {
+ fill: #444444;
+}
+
+.emotion-26 {
+ display: block;
+}
+
+.emotion-25 {
+ padding: 3rem 20px;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.emotion-9 {
+ margin-bottom: 20px;
+ font-size: 28px;
+ font-weight: 900;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.emotion-9 > svg {
+ height: 32px;
+ width: auto;
+ margin-right: 8px;
+}
+
+.emotion-10 {
+ background: #EAF3FC;
+ color: #333333;
+ font-weight: 700;
+ font-size: 14px;
+ padding: 10px 20px;
+ margin-bottom: 24px;
+ border-radius: 4px;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: center;
+}
+
+.emotion-16 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: .75rem;
+}
+
+.emotion-11 {
+ -webkit-letter-spacing: 0.35em;
+ -moz-letter-spacing: 0.35em;
+ -ms-letter-spacing: 0.35em;
+ letter-spacing: 0.35em;
+ text-transform: uppercase;
+ font-weight: 900;
+ font-size: 13px;
+ line-height: 24px;
+ color: #999999;
+}
+
+.emotion-15 {
+ display: inline-block;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: #1EA7FD;
+ color: #999999;
+ font-size: 12px;
+}
+
+.emotion-15 svg path {
+ fill: #1EA7FD;
+}
+
+.emotion-15:hover,
+.emotion-15:focus {
+ cursor: pointer;
+ color: #0297f5;
+}
+
+.emotion-15:hover svg path,
+.emotion-15:focus svg path {
+ fill: #0297f5;
+}
+
+.emotion-15:active {
+ color: #028ee6;
+}
+
+.emotion-15:active svg path {
+ fill: #028ee6;
+}
+
+.emotion-15 svg {
+ display: inline-block;
+ height: 1em;
+ width: 1em;
+ vertical-align: text-top;
+ position: relative;
+ bottom: -0.125em;
+ margin-right: 0.4em;
+}
+
+.emotion-15 svg path {
+ fill: #999999;
+}
+
+.emotion-15:hover {
+ color: #666666;
+}
+
+.emotion-15:hover svg path {
+ fill: #666666;
+}
+
+.emotion-15:active {
+ color: #444444;
+}
+
+.emotion-15:active svg path {
+ fill: #444444;
+}
+
+.emotion-14 > svg:last-of-type {
+ height: 0.7em;
+ width: 0.7em;
+ margin-right: 0;
+ margin-left: 0.25em;
+ bottom: auto;
+ vertical-align: inherit;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+
+
+
+
+
+
+
+
+
+ Storybook icon
+
+
+
+
+
+
+
+ Storybook 5.0.3
+
+
+ Looking good! You're up to date.
+
+
+
+
+
+ upgrade webpack & babel to latest
+
+
+ new addParameters and third argument to .add to pass data to addons
+
+
+ added the ability to theme storybook
+
+
+ improved ui for mobile devices
+
+
+ improved performance of addon-knobs
+
+
+
+
+
+
+
+
+
+`;
+
exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
.emotion-28 {
width: 100%;
From cdcbe5a1d17d94155d8b448820848996ce4d0e40 Mon Sep 17 00:00:00 2001
From: Jakub Werner
Date: Mon, 17 Jun 2019 09:18:02 +0200
Subject: [PATCH 108/371] adding isArray check
---
addons/contexts/src/manager/components/ToolBarControl.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/addons/contexts/src/manager/components/ToolBarControl.tsx b/addons/contexts/src/manager/components/ToolBarControl.tsx
index 20de51e25559..42c315ef470e 100644
--- a/addons/contexts/src/manager/components/ToolBarControl.tsx
+++ b/addons/contexts/src/manager/components/ToolBarControl.tsx
@@ -47,5 +47,7 @@ export const ToolBarControl: ToolBarControl = ({
},
};
- return list.length && !options.disable ? : null;
+ return Array.isArray(list) && list.length && !options.disable ? (
+
+ ) : null;
};
From 326a1d2e3e4771016f65c9dd8a0feab13da6b315 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 18:06:38 +0800
Subject: [PATCH 109/371] Addon-docs viewMode skeleton
---
addons/docs/README.md | 3 +
addons/docs/package.json | 39 +++++++++
addons/docs/register.js | 1 +
addons/docs/src/public_api.ts | 0
addons/docs/src/register.ts | 12 +++
addons/docs/src/shared.ts | 3 +
addons/docs/tsconfig.json | 9 +++
examples/official-storybook/addons.js | 1 +
examples/official-storybook/package.json | 1 +
.../stories/addon-docs.stories.js | 8 ++
lib/client-api/src/story_store.js | 21 +----
lib/core/src/client/preview/start.js | 81 +++++++++++--------
lib/core/src/client/preview/url.js | 12 ++-
lib/ui/src/app.js | 2 +-
lib/ui/src/components/layout/container.js | 2 +-
lib/ui/src/components/layout/desktop.js | 2 +-
lib/ui/src/components/layout/mobile.js | 2 +-
lib/ui/src/components/preview/preview.js | 22 ++---
18 files changed, 151 insertions(+), 70 deletions(-)
create mode 100644 addons/docs/README.md
create mode 100644 addons/docs/package.json
create mode 100644 addons/docs/register.js
create mode 100644 addons/docs/src/public_api.ts
create mode 100644 addons/docs/src/register.ts
create mode 100644 addons/docs/src/shared.ts
create mode 100644 addons/docs/tsconfig.json
create mode 100644 examples/official-storybook/stories/addon-docs.stories.js
diff --git a/addons/docs/README.md b/addons/docs/README.md
new file mode 100644
index 000000000000..5946e6cc71d3
--- /dev/null
+++ b/addons/docs/README.md
@@ -0,0 +1,3 @@
+# Storybook Docs
+
+Living documentation for your components.
diff --git a/addons/docs/package.json b/addons/docs/package.json
new file mode 100644
index 000000000000..9ad9a19606b3
--- /dev/null
+++ b/addons/docs/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "@storybook/addon-docs",
+ "version": "5.2.0-alpha.23",
+ "description": "Superior documentation for your components",
+ "keywords": [
+ "addon",
+ "notes",
+ "storybook"
+ ],
+ "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
+ "bugs": {
+ "url": "https://github.com/storybookjs/storybook/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storybookjs/storybook.git",
+ "directory": "addons/docs"
+ },
+ "license": "MIT",
+ "main": "dist/public_api.js",
+ "types": "dist/public_api.d.ts",
+ "scripts": {
+ "prepare": "node ../../scripts/prepare.js"
+ },
+ "dependencies": {
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23"
+ },
+ "devDependencies": {
+ "@types/util-deprecate": "^1.0.0",
+ "@types/webpack-env": "^1.13.7"
+ },
+ "peerDependencies": {
+ "react": "*"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/addons/docs/register.js b/addons/docs/register.js
new file mode 100644
index 000000000000..18cdafda57c4
--- /dev/null
+++ b/addons/docs/register.js
@@ -0,0 +1 @@
+require('./dist/register.js');
diff --git a/addons/docs/src/public_api.ts b/addons/docs/src/public_api.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/addons/docs/src/register.ts b/addons/docs/src/register.ts
new file mode 100644
index 000000000000..e241774a707c
--- /dev/null
+++ b/addons/docs/src/register.ts
@@ -0,0 +1,12 @@
+import addons, { types } from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from './shared';
+
+addons.register(ADDON_ID, api => {
+ addons.add(PANEL_ID, {
+ type: types.TAB,
+ title: 'Docs',
+ route: ({ storyId }) => `/docs/${storyId}`,
+ match: ({ viewMode }) => viewMode === 'docs',
+ render: () => null,
+ });
+});
diff --git a/addons/docs/src/shared.ts b/addons/docs/src/shared.ts
new file mode 100644
index 000000000000..215736fd9e5b
--- /dev/null
+++ b/addons/docs/src/shared.ts
@@ -0,0 +1,3 @@
+export const ADDON_ID = 'storybook/docs';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = `docs`;
diff --git a/addons/docs/tsconfig.json b/addons/docs/tsconfig.json
new file mode 100644
index 000000000000..57971af0bc3e
--- /dev/null
+++ b/addons/docs/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "types": ["webpack-env"]
+ },
+ "include": ["src/**/*"],
+ "exclude": ["src/**.test.ts"]
+}
diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
index 0d1821cf55e2..00d972b21850 100644
--- a/examples/official-storybook/addons.js
+++ b/examples/official-storybook/addons.js
@@ -1,5 +1,6 @@
import '@storybook/addon-storysource/register';
import '@storybook/addon-design-assets/register';
+import '@storybook/addon-docs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-events/register';
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index bea9479e0714..68da05717790 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -22,6 +22,7 @@
"@storybook/addon-contexts": "5.2.0-alpha.23",
"@storybook/addon-cssresources": "5.2.0-alpha.23",
"@storybook/addon-design-assets": "5.2.0-alpha.23",
+ "@storybook/addon-docs": "5.2.0-alpha.23",
"@storybook/addon-events": "5.2.0-alpha.23",
"@storybook/addon-graphql": "5.2.0-alpha.23",
"@storybook/addon-info": "5.2.0-alpha.23",
diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js
new file mode 100644
index 000000000000..5571d08c30cd
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs.stories.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Addons|Docs', module)
+ .addParameters({
+ docs: () => Hello docs
,
+ })
+ .add('default', () => Click the docs tab to see the docs
);
diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.js
index b048c662ba31..6c1c91a8e896 100644
--- a/lib/client-api/src/story_store.js
+++ b/lib/client-api/src/story_store.js
@@ -6,10 +6,6 @@ import { stripIndents } from 'common-tags';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
-// import { toId } from '@storybook/router/utils';
-
-// import pathToId from './pathToId';
-// import { getQueryParams } from './queryparams';
// TODO: these are copies from components/nav/lib
// refactor to DRY
@@ -46,19 +42,6 @@ export default class StoryStore extends EventEmitter {
this._revision = 0;
this._selection = {};
this._channel = params.channel;
-
- // this.on(Events.STORY_INIT, () => {
- // let storyId = this.getIdOnPath();
- // if (!storyId) {
- // const query = getQueryParams();
- // storyId = getIdFromLegacyQuery(query);
- // if (storyId) {
- // const { path, selectedKind, selectedStory, ...rest } = query;
- // this.setPath(storyId, rest);
- // }
- // }
- // this.setSelection(this.fromId(storyId));
- // });
}
setChannel = channel => {
@@ -100,8 +83,8 @@ export default class StoryStore extends EventEmitter {
);
}
- setSelection = ({ storyId }) => {
- this._selection = { storyId };
+ setSelection = ({ storyId, viewMode }) => {
+ this._selection = { storyId, viewMode };
setTimeout(() => this.emit(Events.STORY_RENDER), 1);
};
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 08dfca5f98b1..0f67ccef3992 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -1,3 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import addons from '@storybook/addons';
import { navigator, window, document } from 'global';
import createChannel from '@storybook/channel-postmessage';
@@ -119,52 +122,64 @@ export default function start(render, { decorateStory } = {}) {
let previousKind = '';
let previousStory = '';
let previousRevision = -1;
+ let previousViewMode = '';
const renderMain = forceRender => {
const revision = storyStore.getRevision();
- const { storyId } = storyStore.getSelection();
-
+ const { storyId, viewMode } = storyStore.getSelection();
const data = storyStore.fromId(storyId);
-
- const { kind, name, getDecorated, id } = data || {};
+ const { kind, name, getDecorated, id, parameters } = data || {};
const renderContext = {
...context,
...data,
selectedKind: kind,
selectedStory: name,
+ parameters,
forceRender,
};
- if (getDecorated) {
- // Render story only if selectedKind or selectedStory have changed.
- // However, we DO want the story to re-render if the store itself has changed
- // (which happens at the moment when HMR occurs)
- if (
- !forceRender &&
- revision === previousRevision &&
- kind === previousKind &&
- previousStory === name
- ) {
- addons.getChannel().emit(Events.STORY_UNCHANGED, id);
- return;
- }
+ // Render story only if selectedKind or selectedStory have changed.
+ // However, we DO want the story to re-render if the store itself has changed
+ // (which happens at the moment when HMR occurs)
+ if (
+ !forceRender &&
+ revision === previousRevision &&
+ viewMode === previousViewMode &&
+ kind === previousKind &&
+ name === previousStory
+ ) {
+ addons.getChannel().emit(Events.STORY_UNCHANGED, id);
+ return;
+ }
- if (!forceRender && previousKind && previousStory) {
- addons.getChannel().emit(Events.STORY_CHANGED, id);
- }
+ if (!forceRender && previousKind && previousStory) {
+ addons.getChannel().emit(Events.STORY_CHANGED, id);
+ }
- previousRevision = revision;
- previousKind = kind;
- previousStory = name;
+ if (!forceRender && previousKind && previousStory) {
+ addons.getChannel().emit(Events.STORY_CHANGED, id);
+ }
- render(renderContext);
- addons.getChannel().emit(Events.STORY_RENDERED, id);
- } else {
- showNopreview();
- addons.getChannel().emit(Events.STORY_MISSING, id);
+ if (viewMode === 'docs') {
+ const NoDocs = () => No docs found
;
+ const StoryDocs = (parameters && parameters.docs) || NoDocs;
+ ReactDOM.render( , document.getElementById('root'));
+ } else if (!viewMode || viewMode === 'story') {
+ if (getDecorated) {
+ render(renderContext);
+ addons.getChannel().emit(Events.STORY_RENDERED, id);
+ } else {
+ showNopreview();
+ addons.getChannel().emit(Events.STORY_MISSING, id);
+ }
}
+ previousRevision = revision;
+ previousKind = kind;
+ previousStory = name;
+ previousViewMode = viewMode;
+
if (!forceRender) {
document.documentElement.scrollTop = 0;
}
@@ -191,7 +206,7 @@ export default function start(render, { decorateStory } = {}) {
);
channel.on(Events.FORCE_RE_RENDER, forceReRender);
- channel.on(Events.SET_CURRENT_STORY, ({ storyId: inputStoryId, name, kind }) => {
+ channel.on(Events.SET_CURRENT_STORY, ({ storyId: inputStoryId, name, kind, viewMode }) => {
let storyId = inputStoryId;
// For backwards compatibility
if (!storyId) {
@@ -201,8 +216,8 @@ export default function start(render, { decorateStory } = {}) {
storyId = deprecatedToId(kind, name);
}
- storyStore.setSelection({ storyId });
- setPath({ storyId });
+ storyStore.setSelection({ storyId, viewMode });
+ setPath({ storyId, viewMode });
});
// Handle keyboard shortcuts
@@ -218,8 +233,8 @@ export default function start(render, { decorateStory } = {}) {
}
storyStore.on(Events.STORY_INIT, () => {
- const { storyId } = initializePath();
- storyStore.setSelection({ storyId });
+ const { storyId, viewMode } = initializePath();
+ storyStore.setSelection({ storyId, viewMode });
});
storyStore.on(Events.STORY_RENDER, renderUI);
diff --git a/lib/core/src/client/preview/url.js b/lib/core/src/client/preview/url.js
index 12c1c18bb75b..d0ecddb4deb8 100644
--- a/lib/core/src/client/preview/url.js
+++ b/lib/core/src/client/preview/url.js
@@ -10,11 +10,15 @@ export function pathToId(path) {
return match[1];
}
-export const setPath = ({ storyId }) => {
+export const setPath = ({ storyId, viewMode }) => {
const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
ignoreQueryPrefix: true,
});
- const newPath = `${document.location.pathname}?${qs.stringify({ ...rest, id: storyId })}`;
+ const newPath = `${document.location.pathname}?${qs.stringify({
+ ...rest,
+ id: storyId,
+ viewMode,
+ })}`;
history.replaceState({}, '', newPath);
};
@@ -28,11 +32,11 @@ export const parseQueryParameters = search => {
export const initializePath = () => {
const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
- let { id: storyId } = query;
+ let { id: storyId, viewMode } = query; // eslint-disable-line prefer-const
if (!storyId) {
storyId = getIdFromLegacyQuery(query);
if (storyId) {
- setPath({ storyId });
+ setPath({ storyId, viewMode });
}
}
return { storyId };
diff --git a/lib/ui/src/app.js b/lib/ui/src/app.js
index d91cb47b805c..d1288657d369 100644
--- a/lib/ui/src/app.js
+++ b/lib/ui/src/app.js
@@ -66,7 +66,7 @@ const App = React.memo(({ viewMode, layout, size: { width, height } }) => {
);
});
App.propTypes = {
- viewMode: PropTypes.oneOf(['story', 'info']),
+ viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
layout: PropTypes.shape({}).isRequired,
size: PropTypes.shape({
width: PropTypes.number,
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index b3237770ec23..cf5f338ad773 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -546,7 +546,7 @@ Layout.propTypes = {
showPanel: PropTypes.bool.isRequired,
panelPosition: PropTypes.string.isRequired,
}).isRequired,
- viewMode: PropTypes.oneOf(['story', 'info']),
+ viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
theme: PropTypes.shape({}).isRequired,
};
Layout.defaultProps = {
diff --git a/lib/ui/src/components/layout/desktop.js b/lib/ui/src/components/layout/desktop.js
index 1cec26e81a46..de0b7346ed6b 100644
--- a/lib/ui/src/components/layout/desktop.js
+++ b/lib/ui/src/components/layout/desktop.js
@@ -65,7 +65,7 @@ Desktop.propTypes = {
panelPosition: PropTypes.string.isRequired,
isToolshown: PropTypes.bool.isRequired,
}).isRequired,
- viewMode: PropTypes.oneOf(['story', 'info']),
+ viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
};
Desktop.defaultProps = {
viewMode: undefined,
diff --git a/lib/ui/src/components/layout/mobile.js b/lib/ui/src/components/layout/mobile.js
index d2ea289d92e8..ab9d8d3b5181 100644
--- a/lib/ui/src/components/layout/mobile.js
+++ b/lib/ui/src/components/layout/mobile.js
@@ -201,7 +201,7 @@ Mobile.propTypes = {
render: PropTypes.func.isRequired,
})
).isRequired,
- viewMode: PropTypes.oneOf(['story', 'info']),
+ viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
options: PropTypes.shape({
initialActive: PropTypes.number,
}).isRequired,
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index 2c57f489581a..5f98896f528d 100644
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@@ -31,12 +31,12 @@ const stringifyQueryParams = queryParams =>
return `${acc}&${k}=${v}`;
}, '');
-const renderIframe = (storyId, id, baseUrl, scale, queryParams) => (
+const renderIframe = (storyId, viewMode, id, baseUrl, scale, queryParams) => (
@@ -46,6 +46,7 @@ const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.val
const ActualPreview = ({
wrappers,
+ viewMode,
id,
storyId,
active,
@@ -54,7 +55,7 @@ const ActualPreview = ({
queryParams,
customCanvas,
}) => {
- const data = [storyId, id, baseUrl, scale, queryParams];
+ const data = [storyId, viewMode, id, baseUrl, scale, queryParams];
const base = customCanvas ? customCanvas(...data) : renderIframe(...data);
return wrappers.reduceRight(
@@ -89,7 +90,7 @@ const getTools = memoize(10)(
{panels.map((t, index) => {
const to = t.route({ storyId, viewMode, path, location });
- const isActive = t.match({ storyId, viewMode, path, location });
+ const isActive = path === to;
return (
{t.title}
@@ -221,10 +222,10 @@ class Preview extends Component {
}
componentDidUpdate(prevProps) {
- const { api, storyId } = this.props;
- const { storyId: prevStoryId } = prevProps;
- if (storyId && storyId !== prevStoryId) {
- api.emit(SET_CURRENT_STORY, { storyId });
+ const { api, storyId, viewMode } = this.props;
+ const { storyId: prevStoryId, viewMode: prevViewMode } = prevProps;
+ if ((storyId && storyId !== prevStoryId) || (viewMode && viewMode !== prevViewMode)) {
+ api.emit(SET_CURRENT_STORY, { storyId, viewMode });
}
}
@@ -250,11 +251,12 @@ class Preview extends Component {
const panels = getElementList(getElements, types.TAB, [
{
route: p => `/story/${p.storyId}`,
- match: p => p.viewMode === 'story',
+ match: p => p.viewMode && p.viewMode.match(/^(story|docs)$/),
render: p => (
{({ value }) => {
const props = {
+ viewMode,
active: p.active,
wrappers,
id,
@@ -324,7 +326,7 @@ Preview.propTypes = {
}).isRequired,
storyId: PropTypes.string,
path: PropTypes.string,
- viewMode: PropTypes.oneOf(['story', 'info']),
+ viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
location: PropTypes.shape({}).isRequired,
getElements: PropTypes.func.isRequired,
queryParams: PropTypes.shape({}).isRequired,
From 1e81ea4fb4aafb5942e4a663e26f750c4defe65e Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 18:07:42 +0800
Subject: [PATCH 110/371] Clean up comments
---
lib/client-api/src/story_store.js | 17 -----------------
1 file changed, 17 deletions(-)
diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.js
index b048c662ba31..9a7edd006358 100644
--- a/lib/client-api/src/story_store.js
+++ b/lib/client-api/src/story_store.js
@@ -6,10 +6,6 @@ import { stripIndents } from 'common-tags';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
-// import { toId } from '@storybook/router/utils';
-
-// import pathToId from './pathToId';
-// import { getQueryParams } from './queryparams';
// TODO: these are copies from components/nav/lib
// refactor to DRY
@@ -46,19 +42,6 @@ export default class StoryStore extends EventEmitter {
this._revision = 0;
this._selection = {};
this._channel = params.channel;
-
- // this.on(Events.STORY_INIT, () => {
- // let storyId = this.getIdOnPath();
- // if (!storyId) {
- // const query = getQueryParams();
- // storyId = getIdFromLegacyQuery(query);
- // if (storyId) {
- // const { path, selectedKind, selectedStory, ...rest } = query;
- // this.setPath(storyId, rest);
- // }
- // }
- // this.setSelection(this.fromId(storyId));
- // });
}
setChannel = channel => {
From 711c8397f03e3c8a61e459952c53a99db319a013 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 19:04:51 +0800
Subject: [PATCH 111/371] Module story format & framework param
---
app/angular/src/client/index.js | 1 +
app/angular/src/client/preview/index.js | 6 +-
app/ember/src/client/index.js | 1 +
app/ember/src/client/preview/index.js | 7 ++-
app/html/src/client/index.js | 1 +
app/html/src/client/preview/index.js | 7 ++-
app/marko/src/client/index.js | 1 +
app/marko/src/client/preview/index.js | 7 ++-
app/mithril/src/client/index.js | 1 +
app/mithril/src/client/preview/index.js | 7 ++-
app/polymer/src/client/index.js | 1 +
app/polymer/src/client/preview/index.js | 7 ++-
app/preact/src/client/index.js | 1 +
app/preact/src/client/preview/index.js | 7 ++-
app/react-native/src/index.ts | 5 +-
app/react/src/client/index.js | 1 +
app/react/src/client/preview/index.js | 7 ++-
app/riot/src/client/index.js | 1 +
app/riot/src/client/preview/index.js | 7 ++-
app/svelte/src/client/index.js | 1 +
app/svelte/src/client/preview/index.js | 7 ++-
app/vue/src/client/index.js | 1 +
app/vue/src/client/preview/index.js | 7 ++-
examples/official-storybook/config.js | 77 ++-----------------------
lib/core/src/client/preview/start.js | 59 ++++++++++++++++++-
25 files changed, 132 insertions(+), 96 deletions(-)
diff --git a/app/angular/src/client/index.js b/app/angular/src/client/index.js
index ae0b8377b4d0..69d18178d225 100644
--- a/app/angular/src/client/index.js
+++ b/app/angular/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
export { moduleMetadata } from './preview/angular/decorators';
diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.js
index 877b04bca126..d54e0eec0170 100644
--- a/app/angular/src/client/preview/index.js
+++ b/app/angular/src/client/preview/index.js
@@ -6,14 +6,18 @@ import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
clearDecorators,
getStorybook,
raw,
+ load: coreLoad,
} = clientApi;
+const framework = 'angular';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/ember/src/client/index.js b/app/ember/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/ember/src/client/index.js
+++ b/app/ember/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/ember/src/client/preview/index.js b/app/ember/src/client/preview/index.js
index 877b04bca126..0f1db6ca1d4b 100644
--- a/app/ember/src/client/preview/index.js
+++ b/app/ember/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'ember';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/html/src/client/index.js b/app/html/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/html/src/client/index.js
+++ b/app/html/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/html/src/client/preview/index.js b/app/html/src/client/preview/index.js
index 877b04bca126..c1ac22948c0a 100644
--- a/app/html/src/client/preview/index.js
+++ b/app/html/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'html';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/marko/src/client/index.js b/app/marko/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/marko/src/client/index.js
+++ b/app/marko/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/marko/src/client/preview/index.js b/app/marko/src/client/preview/index.js
index 877b04bca126..120337969ee0 100644
--- a/app/marko/src/client/preview/index.js
+++ b/app/marko/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'marko';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/mithril/src/client/index.js b/app/mithril/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/mithril/src/client/index.js
+++ b/app/mithril/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/mithril/src/client/preview/index.js b/app/mithril/src/client/preview/index.js
index 877b04bca126..3a7260766303 100644
--- a/app/mithril/src/client/preview/index.js
+++ b/app/mithril/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'mithril';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/polymer/src/client/index.js b/app/polymer/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/polymer/src/client/index.js
+++ b/app/polymer/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/polymer/src/client/preview/index.js b/app/polymer/src/client/preview/index.js
index 877b04bca126..f0eecfaa929b 100644
--- a/app/polymer/src/client/preview/index.js
+++ b/app/polymer/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'polymer';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/preact/src/client/index.js b/app/preact/src/client/index.js
index 21d3f4bf39c9..17b16c61bc58 100644
--- a/app/preact/src/client/index.js
+++ b/app/preact/src/client/index.js
@@ -7,4 +7,5 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
diff --git a/app/preact/src/client/preview/index.js b/app/preact/src/client/preview/index.js
index 877b04bca126..24ed7d776326 100644
--- a/app/preact/src/client/preview/index.js
+++ b/app/preact/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'preact';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
index 5ab573d3f77e..98b2a8d5c06e 100644
--- a/app/react-native/src/index.ts
+++ b/app/react-native/src/index.ts
@@ -2,7 +2,7 @@ import Preview from './preview';
const preview = new Preview();
-export const storiesOf = preview.api().storiesOf.bind(preview);
+const rawStoriesOf = preview.api().storiesOf.bind(preview);
export const setAddon = preview.api().setAddon.bind(preview);
export const addDecorator = preview.api().addDecorator.bind(preview);
export const addParameters = preview.api().addParameters.bind(preview);
@@ -11,3 +11,6 @@ export const configure = preview.configure;
export const getStorybook = preview.api().getStorybook.bind(preview);
export const getStorybookUI = preview.getStorybookUI;
export const raw = preview.api().raw.bind(preview);
+
+export const storiesOf = (...args: any[]) =>
+ rawStoriesOf(...args).addParameters({ framework: 'react-native' });
diff --git a/app/react/src/client/index.js b/app/react/src/client/index.js
index 57c4a7e7381e..fd2728055bb7 100644
--- a/app/react/src/client/index.js
+++ b/app/react/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
raw,
forceReRender,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.js
index 877b04bca126..43a5688e3f7c 100644
--- a/app/react/src/client/preview/index.js
+++ b/app/react/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'react';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/riot/src/client/index.js b/app/riot/src/client/index.js
index 63cdd10a4d13..f85aa98cd81e 100644
--- a/app/riot/src/client/index.js
+++ b/app/riot/src/client/index.js
@@ -12,6 +12,7 @@ export {
compileNow,
asCompiledCode,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/riot/src/client/preview/index.js b/app/riot/src/client/preview/index.js
index 0c26e0ec9ec8..e88be225239a 100644
--- a/app/riot/src/client/preview/index.js
+++ b/app/riot/src/client/preview/index.js
@@ -5,10 +5,9 @@ import riot, { tag2, mount as vendorMount } from 'riot';
import render from './render';
import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -17,6 +16,10 @@ export const {
raw,
} = clientApi;
+const framework = 'riot';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
const mount = vendorMount.bind(riot, '#root');
const compileNow = unboundCompileNow.bind(null, tag2);
diff --git a/app/svelte/src/client/index.js b/app/svelte/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/svelte/src/client/index.js
+++ b/app/svelte/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/svelte/src/client/preview/index.js b/app/svelte/src/client/preview/index.js
index 877b04bca126..abfe16ee830a 100644
--- a/app/svelte/src/client/preview/index.js
+++ b/app/svelte/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
+const framework = 'svelte';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/app/vue/src/client/index.js b/app/vue/src/client/index.js
index 8034a9d6433d..c3f87077b852 100644
--- a/app/vue/src/client/index.js
+++ b/app/vue/src/client/index.js
@@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
+ load,
} from './preview';
if (module && module.hot && module.hot.decline) {
diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js
index fcce19ac10d7..71d6fbe03b74 100644
--- a/app/vue/src/client/preview/index.js
+++ b/app/vue/src/client/preview/index.js
@@ -70,10 +70,9 @@ function decorateStory(getStory, decorators) {
);
}
-const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
export const {
- storiesOf,
setAddon,
addDecorator,
addParameters,
@@ -82,5 +81,9 @@ export const {
raw,
} = clientApi;
+const framework = 'vue';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
export const { configure } = configApi;
export { forceReRender };
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index a8c0cc7cba6f..2e996bd8c0ca 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
+import { load, addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
import { withCssResources } from '@storybook/addon-cssresources';
@@ -58,75 +58,6 @@ addParameters({
],
});
-let previousExports = {};
-if (module && module.hot && module.hot.dispose) {
- ({ previousExports = {} } = module.hot.data || {});
-
- module.hot.dispose(data => {
- // eslint-disable-next-line no-param-reassign
- data.previousExports = previousExports;
- });
-}
-
-// The simplest version of examples would just export this function for users to use
-function importAll(context) {
- const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle
-
- context.keys().forEach(filename => {
- const fileExports = context(filename);
-
- // A old-style story file
- if (!fileExports.default) {
- return;
- }
-
- const { default: component, ...examples } = fileExports;
- let componentOptions = component;
- if (component.prototype && component.prototype.isReactComponent) {
- componentOptions = { component };
- }
- const kindName = componentOptions.title || componentOptions.component.displayName;
-
- if (previousExports[filename]) {
- if (previousExports[filename] === fileExports) {
- return;
- }
-
- // Otherwise clear this kind
- storyStore.removeStoryKind(kindName);
- storyStore.incrementRevision();
- }
-
- // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
- const kind = storiesOf(kindName, true);
-
- (componentOptions.decorators || []).forEach(decorator => {
- kind.addDecorator(decorator);
- });
- if (componentOptions.parameters) {
- kind.addParameters(componentOptions.parameters);
- }
-
- Object.keys(examples).forEach(key => {
- const example = examples[key];
- const { title = key, parameters } = example;
- kind.add(title, example, parameters);
- });
-
- previousExports[filename] = fileExports;
- });
-}
-
-function loadStories() {
- let req;
- req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
- importAll(req);
-
- req = require.context('../../lib/components/src', true, /\.stories\.tsx?$/);
- importAll(req);
-
- req = require.context('./stories', true, /\.stories\.js$/);
- importAll(req);
-}
-
-configure(loadStories, module);
+load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);
+load(require.context('../../lib/components/src', true, /\.stories\.tsx?$/), module);
+load(require.context('./stories', true, /\.stories\.js$/), module);
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index ffb269892bdb..a9d67eb854eb 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -219,5 +219,62 @@ export default function start(render, { decorateStory } = {}) {
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
- return { context, clientApi, configApi, forceReRender };
+ let previousExports = {};
+ const loadStories = (req, framework) => () => {
+ req.keys().forEach(filename => {
+ const fileExports = req(filename);
+
+ // An old-style story file
+ if (!(fileExports.default && fileExports.default.title)) {
+ return;
+ }
+
+ const { default: meta, ...examples } = fileExports;
+
+ const kindName = meta.title || meta.displayName;
+
+ if (previousExports[filename]) {
+ if (previousExports[filename] === fileExports) {
+ return;
+ }
+
+ // Otherwise clear this kind
+ storyStore.removeStoryKind(kindName);
+ storyStore.incrementRevision();
+ }
+
+ // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
+ const kind = clientApi.storiesOf(kindName, true);
+ kind.addParameters({ framework });
+
+ (meta.decorators || []).forEach(decorator => {
+ kind.addDecorator(decorator);
+ });
+ if (meta.parameters) {
+ kind.addParameters(meta.parameters);
+ }
+
+ Object.keys(examples).forEach(key => {
+ const example = examples[key];
+ const { title = example.title || key, parameters } = example;
+ kind.add(title, example, parameters);
+ });
+
+ previousExports[filename] = fileExports;
+ });
+ };
+
+ const load = (req, m, framework) => {
+ if (m && m.hot && m.hot.dispose) {
+ ({ previousExports = {} } = m.hot.data || {});
+
+ m.hot.dispose(data => {
+ // eslint-disable-next-line no-param-reassign
+ data.previousExports = previousExports;
+ });
+ }
+ configApi.configure(loadStories(req, framework), m);
+ };
+
+ return { load, context, clientApi, configApi, forceReRender };
}
From 2ae208e066df0ff51577c504f194bdc434c63f23 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 17 Jun 2019 22:21:27 +0800
Subject: [PATCH 112/371] Fix typo
---
app/angular/src/client/preview/index.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.js
index d54e0eec0170..ceef96e9559b 100644
--- a/app/angular/src/client/preview/index.js
+++ b/app/angular/src/client/preview/index.js
@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
setAddon,
@@ -12,7 +12,6 @@ export const {
clearDecorators,
getStorybook,
raw,
- load: coreLoad,
} = clientApi;
const framework = 'angular';
From da3da7ac8660aed0fd9be06b24cedb858a6f41c7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Mon, 17 Jun 2019 16:38:57 +0200
Subject: [PATCH 113/371] REMOVE the storyshots test for react examples
---
.../cra-kitchen-sink/src/storyshots.test.js | 16 ---------------
.../tests/storyshots.test.js | 20 -------------------
2 files changed, 36 deletions(-)
delete mode 100644 examples/cra-kitchen-sink/src/storyshots.test.js
delete mode 100644 examples/official-storybook/tests/storyshots.test.js
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
deleted file mode 100644
index 18c32e65d22a..000000000000
--- a/examples/cra-kitchen-sink/src/storyshots.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import path from 'path';
-import { render as renderer } from 'enzyme';
-import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
-import { createSerializer as emotionSerializer } from 'jest-emotion';
-
-import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-
-initStoryshots({
- framework: 'react',
- configPath: path.join(__dirname, '..', '.storybook'),
- integrityOptions: { cwd: path.join(__dirname, 'stories') },
- test: multiSnapshotWithOptions({
- renderer,
- }),
- snapshotSerializers: [enzymeSerializer(), emotionSerializer()],
-});
diff --git a/examples/official-storybook/tests/storyshots.test.js b/examples/official-storybook/tests/storyshots.test.js
deleted file mode 100644
index aeb20d151f22..000000000000
--- a/examples/official-storybook/tests/storyshots.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import path from 'path';
-import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-import { render as renderer } from 'enzyme';
-import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
-import { createSerializer as emotionSerializer } from 'jest-emotion';
-
-jest.mock('react-dom', () => ({
- createPortal: node => node,
-}));
-
-// HTML Snapshots
-initStoryshots({
- framework: 'react',
- configPath: path.join(__dirname, '../'),
- integrityOptions: { cwd: path.join(__dirname, '..', 'stories') },
- test: multiSnapshotWithOptions({
- renderer,
- }),
- snapshotSerializers: [enzymeSerializer(), emotionSerializer()],
-});
From 4d4e59f91e4032a2472e2989bb59f1db26694faa Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Mon, 17 Jun 2019 16:43:12 +0200
Subject: [PATCH 114/371] REMOVE snapshots
---
.../addon-a11y.stories.storyshot | 396 -
.../addon-actions.stories.storyshot | 2902 ---
.../addon-backgrounds.stories.storyshot | 41 -
.../addon-centered.stories.storyshot | 17 -
.../addon-contexts.stories.storyshot | 17 -
.../addon-cssresources.stories.storyshot | 18 -
.../addon-design-assets.stories.storyshot | 37 -
.../addon-events.stories.storyshot | 43 -
.../addon-graphql.stories.storyshot | 7 -
.../addon-info.stories.storyshot | 3379 ---
.../addon-jest.stories.storyshot | 7 -
.../addon-knobs.stories.storyshot | 183 -
.../addon-links.stories.storyshot | 112 -
.../addon-notes.stories.storyshot | 41 -
.../addon-options.stories.storyshot | 13 -
.../addon-queryparams.stories.storyshot | 13 -
.../addon-storyshots.stories.storyshot | 14 -
.../addon-viewport.stories.storyshot | 41 -
.../app-acceptance.stories.storyshot | 89 -
.../other-demo.stories.storyshot | 114 -
.../other-dirname.stories.storyshot | 17 -
.../__snapshots__/storyshots.test.js.snap | 17908 ----------------
22 files changed, 25409 deletions(-)
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-contexts.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-design-assets.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-options.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-storyshots.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
delete mode 100644 examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot
delete mode 100644 examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
deleted file mode 100644
index 4923d4cca68b..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ /dev/null
@@ -1,396 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|A11y/BaseButton Default 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/BaseButton Disabled 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/BaseButton Invalid contrast 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/BaseButton Label 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/BaseButton delayed render 1`] = `
`;
-
-exports[`Storyshots Addons|A11y/Button Content 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/Button Default 1`] = `
-
- null
-
-`;
-
-exports[`Storyshots Addons|A11y/Button Disabled 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/Button Invalid contrast 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|A11y/Button Label 1`] = `
-
- null
-
-`;
-
-exports[`Storyshots Addons|A11y/Form With label 1`] = `
-.emotion-2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- border-bottom: 1px solid rgba(0,0,0,.1);
- margin: 0 15px;
- padding: 8px 0;
-}
-
-.emotion-2:last-child {
- margin-bottom: 3rem;
-}
-
-.emotion-0 {
- min-width: 100px;
- font-weight: 700;
- margin-right: 15px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- line-height: 16px;
-}
-
-.emotion-1 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- box-sizing: inherit;
- display: block;
- margin: 0;
- background: #FFFFFF;
- padding: .42em 1em;
- font-size: 13px;
- position: relative;
- -webkit-transition: all 200ms ease-out;
- transition: all 200ms ease-out;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- line-height: 20px;
- display: inline;
- text-align: left;
- min-height: 32px;
-}
-
-.emotion-1:focus {
- box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-1[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.emotion-1:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-1::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-1::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-1:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-1::placeholder {
- color: #999999;
-}
-
-
-
-
- Testing the a11y addon
-
-
-
-
-`;
-
-exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- border-bottom: 1px solid rgba(0,0,0,.1);
- margin: 0 15px;
- padding: 8px 0;
-}
-
-.emotion-1:last-child {
- margin-bottom: 3rem;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- box-sizing: inherit;
- display: block;
- margin: 0;
- background: #FFFFFF;
- padding: .42em 1em;
- font-size: 13px;
- position: relative;
- -webkit-transition: all 200ms ease-out;
- transition: all 200ms ease-out;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- line-height: 20px;
- display: inline;
- text-align: left;
- min-height: 32px;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-
-
-
-`;
-
-exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- border-bottom: 1px solid rgba(0,0,0,.1);
- margin: 0 15px;
- padding: 8px 0;
-}
-
-.emotion-1:last-child {
- margin-bottom: 3rem;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- box-sizing: inherit;
- display: block;
- margin: 0;
- background: #FFFFFF;
- padding: .42em 1em;
- font-size: 13px;
- position: relative;
- -webkit-transition: all 200ms ease-out;
- transition: all 200ms ease-out;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- line-height: 20px;
- display: inline;
- text-align: left;
- min-height: 32px;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-
-
-
-`;
-
-exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/Image With alt 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/Image Without alt 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/Image Without alt but unchecked 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/Typography Correct 1`] = `
-Array [
-
- Testing the a11y addon
- ,
-
- Testing the a11y addon
-
,
-
- Testing the a11y addon...
- ,
-]
-`;
-
-exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = ` `;
-
-exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = `
-
-`;
-
-exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `
`;
-
-exports[`Storyshots Addons|A11y/Typography Link without href 1`] = `
-
- Testing the a11y addon...
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index 8b7cfba5f64d..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,2902 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions All types 1`] = `
-Array [
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Array
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Boolean
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Empty Object
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- File
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Function A
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Bound Function B
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Infinity
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- -Infinity
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- NaN
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- null
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Number
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Multiple
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Plain Object
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Object (depth: 2)
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- RegExp
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- String
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Symbol
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- SyntheticEvent
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- undefined
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Window
- ,
-]
-`;
-
-exports[`Storyshots Addons|Actions Basic example 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Circular Payload 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Circular Payload
-
-`;
-
-exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Moving away from this story will persist the action logger
-
-`;
-
-exports[`Storyshots Addons|Actions Decorated action 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Native Event
-
-`;
-
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Moving away from this story will persist the action logger
-
-`;
-
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Native Event
-
-`;
-
-exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
-Array [
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- False
- ,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- True
- ,
-]
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Moving away from this story will persist the action logger
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Moving away from this story will persist the action logger
-
-`;
-
-exports[`Storyshots Addons|Actions Persisting the action logger 1`] = `
-Array [
-
- Moving away from this story will persist the action logger
-
,
- .emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Object (configured clearOnStoryChange: false)
- ,
-]
-`;
-
-exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Delete
-
-`;
-
-exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Object (configured depth: 2)
-
-`;
-
-exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0:hover {
- background: #f2f2f2;
-}
-
-.emotion-0:active {
- background: #FFFFFF;
-}
-
-.emotion-0:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
- Native Event
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 0f1820349510..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Backgrounds disabled via [] 1`] = `
-
- This one should not use backgrounds
-
-`;
-
-exports[`Storyshots Addons|Backgrounds overriden 1`] = `
-
- This one should have different backgrounds
-
-`;
-
-exports[`Storyshots Addons|Backgrounds skipped via disable:true 1`] = `
-
- This one should not use backgrounds either
-
-`;
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
-
- You should be able to switch backgrounds for this story
-
-`;
-
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
-
- This one too!
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index e3f36b7bdf72..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Centered story 1 1`] = `
-
-
-
- This story should be centered
-
-
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-contexts.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-contexts.stories.storyshot
deleted file mode 100644
index 83b82b182ce7..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-contexts.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Contexts Languages 1`] = `
-
- Your locale is "unknown", so I say "NULL"!
-
-`;
-
-exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
-
- I'm a children of the injected 'div' (where provides a theming context).
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
deleted file mode 100644
index 77298e639d48..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Cssresources Camera Icon 1`] = `
-
- Camera Icon
-
-`;
-
-exports[`Storyshots Addons|Cssresources Primary Large Button 1`] = `
-
- Primary Large Button
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-design-assets.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-design-assets.stories.storyshot
deleted file mode 100644
index 3b760249d6ec..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-design-assets.stories.storyshot
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Design assets multiple images 1`] = `
-
- This story should a multiple images in the assets panel
-
-`;
-
-exports[`Storyshots Addons|Design assets named assets 1`] = `
-
- This story should a single image in the assets panel
-
-`;
-
-exports[`Storyshots Addons|Design assets single image 1`] = `
-
- This story should a single image in the assets panel
-
-`;
-
-exports[`Storyshots Addons|Design assets single webpage 1`] = `
-
- This story should a single image in the assets panel
-
-`;
-
-exports[`Storyshots Addons|Design assets url replacement 1`] = `
-
- This story should have a webpge, with within it's url the storyId
-
-`;
-
-exports[`Storyshots Addons|Design assets youtube video 1`] = `
-
- This story should a single image in the assets panel
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
deleted file mode 100644
index 6c777c6dbac4..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Events Logger 1`] = `
-.emotion-1 {
- padding: 20px;
-}
-
-.emotion-0 {
- margin: 0;
-}
-
-
-`;
-
-exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
-.emotion-1 {
- padding: 20px;
-}
-
-.emotion-0 {
- margin: 0;
-}
-
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot
deleted file mode 100644
index acf18796ca81..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-graphql.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|GraphQL get Pickachu 1`] = `
-
- hello
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
deleted file mode 100644
index a1d1992bd3a5..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ /dev/null
@@ -1,3379 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = `
-Array [
-
-
- Forwarded Ref Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/ForwardRef Uses forwardRef displayName if available 1`] = `
-Array [
-
-
- Forwarded Ref Button w/ Display Name
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = `
-Array [
- ,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component for the table 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = `
-Array [
-
-
-
-
- Addons|Info/Options.inline
-
-
- Inlines component inside story
-
-
-
-
,
-
-
- Button
-
-
,
- .emotion-5 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-2 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
- position: relative;
-}
-
-.emotion-2 code {
- padding-right: 10px;
-}
-
-.emotion-2 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.string {
- color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
- color: #393A34;
-}
-
-.emotion-2 * .token.operator {
- color: #393A34;
-}
-
-.emotion-2 * .token.url {
- color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
- color: #36acaa;
-}
-
-.emotion-2 * .token.number {
- color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
- color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
- color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
- color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
- color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
- color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
- color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
- color: #0000ff;
-}
-
-.emotion-2 * .token.function {
- color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
- color: #9a050f;
-}
-
-.emotion-2 * .token.important {
- font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
- font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
- font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
- color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
- color: #800000;
-}
-
-.emotion-2 * .token.selector {
- color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
- color: #ff0000;
-}
-
-.emotion-2 * .token.property {
- color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
- color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
- color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
- background: #ffff00;
- color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
- color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
- opacity: 0.7;
-}
-
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 0;
- padding: 10px;
-}
-
-.emotion-0 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding-right: 0;
- opacity: 1;
-}
-
-.emotion-4 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-3 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-3:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
- Component should be inlined between description and PropType table
-
-
- Story Source
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
-
- BaseButton
-
-
-
-
-
- disabled
-
-
-
- =
-
-
- {
-
-
- false
-
-
- }
-
-
-
-
-
- label
-
-
-
- =
-
-
- "
-
- Button
-
- "
-
-
-
-
-
- onClick
-
-
-
- =
-
-
- {
-
-
- function
-
-
-
- noRefCheck
-
-
- (
-
-
- )
-
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- style
-
-
-
- =
-
-
- {
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.propTablesExclude Exclude component from prop tables 1`] = `
-Array [
-
-
-
- Button
-
-
- Flow Typed Button
-
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Options.styles Full control over styles using a function 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = `
-
- Button
-
-`;
-
-exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = `
-Array [
-
-
-
-
- Addons|Info/Parameters
-
-
- Overwrite the text parameter with markdown inline
-
-
-
-
,
-
-
- Button
-
-
,
- .emotion-5 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-2 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
- position: relative;
-}
-
-.emotion-2 code {
- padding-right: 10px;
-}
-
-.emotion-2 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.string {
- color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
- color: #393A34;
-}
-
-.emotion-2 * .token.operator {
- color: #393A34;
-}
-
-.emotion-2 * .token.url {
- color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
- color: #36acaa;
-}
-
-.emotion-2 * .token.number {
- color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
- color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
- color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
- color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
- color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
- color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
- color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
- color: #0000ff;
-}
-
-.emotion-2 * .token.function {
- color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
- color: #9a050f;
-}
-
-.emotion-2 * .token.important {
- font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
- font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
- font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
- color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
- color: #800000;
-}
-
-.emotion-2 * .token.selector {
- color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
- color: #ff0000;
-}
-
-.emotion-2 * .token.property {
- color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
- color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
- color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
- background: #ffff00;
- color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
- color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
- opacity: 0.7;
-}
-
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 0;
- padding: 10px;
-}
-
-.emotion-0 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding-right: 0;
- opacity: 1;
-}
-
-.emotion-4 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-3 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-3:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
- description or documentation about my component, supports markdown
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
- Button
-
- >
-
- Click Here
-
- <
-
-
- /
-
- Button
-
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Story Source
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
-
- BaseButton
-
-
-
-
-
- disabled
-
-
-
- =
-
-
- {
-
-
- false
-
-
- }
-
-
-
-
-
- label
-
-
-
- =
-
-
- "
-
- Button
-
- "
-
-
-
-
-
- onClick
-
-
-
- =
-
-
- {
-
-
- function
-
-
-
- noRefCheck
-
-
- (
-
-
- )
-
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- style
-
-
-
- =
-
-
- {
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
,
-]
-`;
-
-exports[`Storyshots Addons|Info/Parameters Overwriting and extending the parameters and options set stories-wise 1`] = `
-Array [
-
-
-
-
- Addons|Info/Parameters
-
-
- Overwriting and extending the parameters and options set stories-wise
-
-
-
-
,
-
-
- Button
-
-
,
- .emotion-5 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-2 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
- position: relative;
-}
-
-.emotion-2 code {
- padding-right: 10px;
-}
-
-.emotion-2 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.string {
- color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
- color: #393A34;
-}
-
-.emotion-2 * .token.operator {
- color: #393A34;
-}
-
-.emotion-2 * .token.url {
- color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
- color: #36acaa;
-}
-
-.emotion-2 * .token.number {
- color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
- color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
- color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
- color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
- color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
- color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
- color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
- color: #0000ff;
-}
-
-.emotion-2 * .token.function {
- color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
- color: #9a050f;
-}
-
-.emotion-2 * .token.important {
- font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
- font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
- font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
- color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
- color: #800000;
-}
-
-.emotion-2 * .token.selector {
- color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
- color: #ff0000;
-}
-
-.emotion-2 * .token.property {
- color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
- color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
- color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
- background: #ffff00;
- color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
- color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
- opacity: 0.7;
-}
-
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 0;
- padding: 10px;
-}
-
-.emotion-0 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding-right: 0;
- opacity: 1;
-}
-
-.emotion-4 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-3 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-3:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
- Label propType should be excluded
-
-
- Story Source
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
-
- BaseButton
-
-
-
-
-
- disabled
-
-
-
- =
-
-
- {
-
-
- false
-
-
- }
-
-
-
-
-
- label
-
-
-
- =
-
-
- "
-
- Button
-
- "
-
-
-
-
-
- onClick
-
-
-
- =
-
-
- {
-
-
- function
-
-
-
- noRefCheck
-
-
- (
-
-
- )
-
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- style
-
-
-
- =
-
-
- {
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
,
-]
-`;
-
-exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = `
-Array [
-
-
-
-
- Addons|Info/Parameters
-
-
- Using paramaters across all stories
-
-
-
-
,
-
-
- Button
-
-
,
- .emotion-5 {
- position: relative;
- overflow: hidden;
- color: #333333;
- border: 1px solid rgba(0,0,0,.1);
- background: #FFFFFF;
-}
-
-.emotion-2 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
- position: relative;
-}
-
-.emotion-2 code {
- padding-right: 10px;
-}
-
-.emotion-2 * .token {
- font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
- -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
- color: #008000;
- font-style: italic;
-}
-
-.emotion-2 * .token.string {
- color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
- color: #393A34;
-}
-
-.emotion-2 * .token.operator {
- color: #393A34;
-}
-
-.emotion-2 * .token.url {
- color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
- color: #36acaa;
-}
-
-.emotion-2 * .token.number {
- color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
- color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
- color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
- color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
- color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
- color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
- color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
- color: #0000ff;
-}
-
-.emotion-2 * .token.function {
- color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
- color: #9a050f;
-}
-
-.emotion-2 * .token.important {
- font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
- font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
- font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
- color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
- color: #800000;
-}
-
-.emotion-2 * .token.selector {
- color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
- color: #ff0000;
-}
-
-.emotion-2 * .token.property {
- color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
- color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
- color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
- background: #ffff00;
- color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
- color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
- color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
- opacity: 0.7;
-}
-
-.emotion-1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 0;
- padding: 10px;
-}
-
-.emotion-0 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- padding-right: 0;
- opacity: 1;
-}
-
-.emotion-4 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-3 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-3:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
- This text should be displayed on every story and the component should be inlined between description and PropType table
-
-
- Story Source
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <
-
-
- BaseButton
-
-
-
-
-
- disabled
-
-
-
- =
-
-
- {
-
-
- false
-
-
- }
-
-
-
-
-
- label
-
-
-
- =
-
-
- "
-
- Button
-
- "
-
-
-
-
-
- onClick
-
-
-
- =
-
-
- {
-
-
- function
-
-
-
- noRefCheck
-
-
- (
-
-
- )
-
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- style
-
-
-
- =
-
-
- {
-
-
- {
-
-
- }
-
-
- }
-
-
-
-
-
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Copy
-
-
-
-
- Prop Types
-
-
-
- "BaseButton" Component
-
-
-
-
-
- property
-
-
- propType
-
-
- required
-
-
- default
-
-
- description
-
-
-
-
-
-
- disabled
-
-
-
- bool
-
-
-
- -
-
-
-
- false
-
-
-
-
-
-
- label
-
-
-
- string
-
-
-
- yes
-
-
- -
-
-
-
-
-
- onClick
-
-
-
- func
-
-
-
- -
-
-
-
- onClick
-
-
-
-
-
-
- style
-
-
-
- other
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
,
-]
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = `
-Array [
-
-
- Flow Typed Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = `
-Array [
-
-
- Docgen Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Story Source Array prop 1`] = `
-Array [
-
-
-
-
-
- name
-
-
- type
-
-
- default
-
-
- description
-
-
-
-
-
-
- label
-
- *
-
-
-
- string
-
-
-
- Text to display inside button
-
-
-
-
- disabled
-
-
- boolean
-
-
- false
-
-
-
-
-
- onClick
-
- *
-
-
-
- function
-
-
-
- Callback for when button is clicked
-
-
-
-
- style
-
-
- object
-
-
- {}
-
-
- Styles to apply to button
-
-
-
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Story Source Children 1`] = `
-Array [
-
-
-
- Here is my nice button:
-
-
- Button
-
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Story Source Many props 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Story Source Object prop 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/Story Source One prop 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
-
-exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = `
-Array [
-
-
- Button
-
-
,
-
- Show Info
- ,
-]
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
deleted file mode 100644
index a7d01871f196..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Jest withTests 1`] = `
-
- Hello
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 51c97243f729..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,183 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Knobs.withKnobs XSS safety 1`] = `
-
- <img src="x" onerror="alert('XSS Attack')" >
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs accepts story parameters 1`] = `
-
- <h1>Hello</h1>
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = `
-
- the type of "string" = string
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = `
-Array [
-
- I must be here
-
,
-
- I can disappear
-
,
-]
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs optionsKnob 1`] = `
-
-
- Weekday: Tuesday
-
-
- Weekend: Saturday
-
-
- Month: January
-
-
- Fruit:
-
-
-
- Vegetables:
-
-
-
- Dairy:
-
-
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs triggers actions via button 1`] = `
-Array [
-
- Hit the knob button and it will toggle the items list into multiple states.
-
,
-
- No items loaded
-
,
-]
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
-
-
- My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. I also enjoy watermelon.
-
-
- My birthday is: January 20, 2017
-
-
- I live in NY for 9 years.
-
-
- My wallet contains: $12.50
-
-
- In my backpack, I have:
-
-
-
- Laptop
-
-
- Book
-
-
- Whiskey
-
-
-
- Nice to meet you!
-
-
- When I am happy I look like this:
-
-
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs tweaks static values organized in groups 1`] = `
-
-
- General Information
-
-
- Name: Storyteller
-
-
- Age: 70
-
-
- Birthday: January 20, 2017
-
-
- Account Balance: 12.5
-
-
- Years in NY: 9
-
-
-
- Favorites
-
-
- Catchphrase: Nice to meet you!
-
-
- Fruit: apple
-
-
- Other Fruit: watermelon
-
-
- Items:
-
-
-
- Laptop
-
-
- Book
-
-
- Whiskey
-
-
-
- When I'm by myself, I say: "Mumble"
-
-
-`;
-
-exports[`Storyshots Addons|Knobs.withKnobs using options accepts options 1`] = `
-
- <h1>Hello</h1>
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
deleted file mode 100644
index 61e43342a10c..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
+++ /dev/null
@@ -1,112 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Links.Button First 1`] = `
-
- Go to "Second"
-
-`;
-
-exports[`Storyshots Addons|Links.Button Second 1`] = `
-
- Go to "First"
-
-`;
-
-exports[`Storyshots Addons|Links.Href log 1`] = `
-
- See action logger
-
-`;
-
-exports[`Storyshots Addons|Links.Link First 1`] = `
-
- Go to Second
-
-`;
-
-exports[`Storyshots Addons|Links.Link Second 1`] = `
-
- Go to First
-
-`;
-
-exports[`Storyshots Addons|Links.Scroll position First 1`] = `
-Array [
-
- Scroll down to see the link
-
,
-
- Go to Second
- ,
-]
-`;
-
-exports[`Storyshots Addons|Links.Scroll position Second 1`] = `
-Array [
-
- Scroll down to see the link
-
,
-
- Go to First
- ,
-]
-`;
-
-exports[`Storyshots Addons|Links.Select First 1`] = `
-
- Go back
-
-`;
-
-exports[`Storyshots Addons|Links.Select Index 1`] = `
-
-
- Index
-
-
- First
-
-
- Second
-
-
- Third
-
-
-`;
-
-exports[`Storyshots Addons|Links.Select Second 1`] = `
-
- Go back
-
-`;
-
-exports[`Storyshots Addons|Links.Select Third 1`] = `
-
- Go back
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 99d54650d867..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Notes addon notes 1`] = `
-
- Button with notes - check the notes panel for details
-
-`;
-
-exports[`Storyshots Addons|Notes addon notes rendering imported markdown 1`] = `
-
- Button with notes - check the notes panel for details
-
-`;
-
-exports[`Storyshots Addons|Notes addon notes rendering inline, github-flavored markdown 1`] = `
-
- Button with notes - check the notes panel for details
-
-`;
-
-exports[`Storyshots Addons|Notes with a markdown giphy 1`] = `
-
- Button with notes - check the notes panel for details
-
-`;
-
-exports[`Storyshots Addons|Notes with a markdown table 1`] = `
-
- Button with notes - check the notes panel for details
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-options.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-options.stories.storyshot
deleted file mode 100644
index 27c08b204882..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-options.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Options hiding addon panel 1`] = `
-
- This story should have changed hidden the addons panel
-
-`;
-
-exports[`Storyshots Addons|Options setting name 1`] = `
-
- This story should have changed the name of the storybook
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
deleted file mode 100644
index 954331075904..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-queryparams.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|QueryParams mock is 4 1`] = `
-
- This story should have an extra url query param: ?mock=4
-
-`;
-
-exports[`Storyshots Addons|QueryParams mock is true 1`] = `
-
- This story should have an extra url query param: ?mock=truehttp://localhost/
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-storyshots.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-storyshots.stories.storyshot
deleted file mode 100644
index 1a85e4b92d4f..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-storyshots.stories.storyshot
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Storyshots block 1`] = `
-.emotion-0 {
- display: inline-block;
- height: 400px;
- width: 400px;
- background: hotpink;
-}
-
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
deleted file mode 100644
index 9fcc118a9b63..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Viewport default 1`] = `
-
- I don't have problems being rendered using the default viewport.
-
-`;
-
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Disabled 1`] = `
-
- There should be no viewport selector in the toolbar
-
-`;
-
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
-
- I've inherited
-
- Kindle Fire 2
-
- viewport from my parent.
-
-`;
-
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
-
- I respect my parents but I should be looking good on
-
- iPad
-
- .
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
deleted file mode 100644
index 223c183efad9..000000000000
--- a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
+++ /dev/null
@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots App|acceptance angular-cli 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance cra-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance cra-react15 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance cra-ts-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance html-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance mithril-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance polymer-cli 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance preact-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance riot-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance svelte-kitchen-sink 1`] = `
-
-`;
-
-exports[`Storyshots App|acceptance vue-kitchen-sink 1`] = `
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
deleted file mode 100644
index 49f1a87f0fc4..000000000000
--- a/examples/official-storybook/stories/__snapshots__/other-demo.stories.storyshot
+++ /dev/null
@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Other|Demo/Button with some emoji 1`] = `
-
-
- 😀 😎 👍 💯
-
-
-`;
-
-exports[`Storyshots Other|Demo/Button with text 1`] = `
-
- Hello Button
-
-`;
-
-exports[`Storyshots Other|Demo/Welcome to Storybook 1`] = `
-
-
- Welcome to storybook
-
-
- This is a UI component dev environment for your app.
-
-
- We've added some basic stories inside the
-
- src/stories
-
- directory.
-
- A story is a single state of one or more UI components. You can have as many stories as you want.
-
- (Basically a story is like a visual test case.)
-
-
- See these sample
-
- stories
-
- for a component called
-
- Button
-
- .
-
-
- Just like that, you can add your own components as stories.
-
- You can also edit those components and see changes right away.
-
- (Try editing the
-
- Button
-
- stories located at
-
- src/stories/index.js
-
- .)
-
-
- Usually we create stories with smaller UI components in the app.
-
- Have a look at the
-
- Writing Stories
-
- section in our documentation.
-
-
-
- NOTE:
-
-
- Have a look at the
-
- .storybook/webpack.config.js
-
- to add webpack loaders and plugins you are using in this project.
-
-
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot
deleted file mode 100644
index 337b291ac891..000000000000
--- a/examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Other|/stories//Dirname Example story 1 1`] = `
-
- Story 1
-
-`;
-
-exports[`Storyshots Other|/stories//Dirname Example story 2 1`] = `
-
- Story 2
-
-`;
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
deleted file mode 100644
index 55ea770a53a6..000000000000
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ /dev/null
@@ -1,17908 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|ActionBar manyItems 1`] = `
-.emotion-3 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-0 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-0:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-.emotion-3 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-0 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-0:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-
-
- Action string
-
-
-
- Action node
-
-
-
- Long action string
-
-
-
-`;
-
-exports[`Storyshots Basics|ActionBar singleItem 1`] = `
-.emotion-1 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-0 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-0:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-.emotion-1 {
- position: absolute;
- bottom: 0;
- right: 0;
- max-width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- background: #FFFFFF;
- z-index: 1;
-}
-
-.emotion-0 {
- border: 0 none;
- padding: 4px 10px;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- color: #333333;
- background: #FFFFFF;
- font-size: 12px;
- line-height: 16px;
- font-weight: 700;
- border-top: 1px solid rgba(0,0,0,.1);
- border-left: 1px solid rgba(0,0,0,.1);
- margin-left: -1px;
- border-radius: 4px 0 0 0;
-}
-
-.emotion-0:not(:last-child) {
- border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 + * {
- border-left: 1px solid rgba(0,0,0,.1);
- border-radius: 0;
-}
-
-.emotion-0:focus {
- box-shadow: #1EA7FD 0 -3px 0 0 inset;
- outline: 0 none;
-}
-
-
-`;
-
-exports[`Storyshots Basics|Brand/StorybookLogo normal 1`] = `
-
-
- Storybook logo
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Basics|DocumentFormatting withDOM 1`] = `
-.emotion-0 {
- font-size: 14px;
- line-height: 1.6;
-}
-
-.emotion-0 h1 {
- font-size: 32px;
- font-weight: 900;
-}
-
-.emotion-0 h2 {
- font-size: 24px;
- border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 h3 {
- font-size: 20px;
-}
-
-.emotion-0 h4 {
- font-size: 16px;
-}
-
-.emotion-0 h5 {
- font-size: 14px;
-}
-
-.emotion-0 h6 {
- font-size: 14px;
- color: #666666;
-}
-
-.emotion-0 pre:not(.hljs) {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
- margin: 0;
-}
-
-.emotion-0 pre pre,
-.emotion-0 pre.hljs {
- padding: 15px;
- margin: 0;
- white-space: pre-wrap;
- color: inherit;
- font-size: 13px;
- line-height: 19px;
-}
-
-.emotion-0 pre pre code,
-.emotion-0 pre.hljs code {
- color: inherit;
- font-size: inherit;
-}
-
-.emotion-0 pre code {
- margin: 0;
- padding: 0;
- white-space: pre;
- border: none;
- background: transparent;
-}
-
-.emotion-0 pre code,
-.emotion-0 pre tt {
- background-color: transparent;
- border: none;
-}
-
-.emotion-0 body > *:first-of-type {
- margin-top: 0 !important;
-}
-
-.emotion-0 body > *:last-child {
- margin-bottom: 0 !important;
-}
-
-.emotion-0 a {
- color: #1EA7FD;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 a.absent {
- color: #cc0000;
-}
-
-.emotion-0 a.anchor {
- display: block;
- padding-left: 30px;
- margin-left: -30px;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
-}
-
-.emotion-0 h1,
-.emotion-0 h2,
-.emotion-0 h3,
-.emotion-0 h4,
-.emotion-0 h5,
-.emotion-0 h6 {
- margin: 20px 0 10px;
- padding: 0;
- cursor: text;
- position: relative;
-}
-
-.emotion-0 h2:first-of-type,
-.emotion-0 h1:first-of-type,
-.emotion-0 h1:first-of-type + h2,
-.emotion-0 h3:first-of-type,
-.emotion-0 h4:first-of-type,
-.emotion-0 h5:first-of-type,
-.emotion-0 h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1:hover a.anchor,
-.emotion-0 h2:hover a.anchor,
-.emotion-0 h3:hover a.anchor,
-.emotion-0 h4:hover a.anchor,
-.emotion-0 h5:hover a.anchor,
-.emotion-0 h6:hover a.anchor {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 h1 tt,
-.emotion-0 h1 code {
- font-size: inherit;
-}
-
-.emotion-0 h2 tt,
-.emotion-0 h2 code {
- font-size: inherit;
-}
-
-.emotion-0 h3 tt,
-.emotion-0 h3 code {
- font-size: inherit;
-}
-
-.emotion-0 h4 tt,
-.emotion-0 h4 code {
- font-size: inherit;
-}
-
-.emotion-0 h5 tt,
-.emotion-0 h5 code {
- font-size: inherit;
-}
-
-.emotion-0 h6 tt,
-.emotion-0 h6 code {
- font-size: inherit;
-}
-
-.emotion-0 p,
-.emotion-0 blockquote,
-.emotion-0 ul,
-.emotion-0 ol,
-.emotion-0 dl,
-.emotion-0 li,
-.emotion-0 table,
-.emotion-0 pre {
- margin: 15px 0;
-}
-
-.emotion-0 hr {
- border: 0 none;
- color: rgba(0,0,0,.1);
- height: 4px;
- padding: 0;
-}
-
-.emotion-0 body > h2:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type + h2 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h3:first-of-type,
-.emotion-0 body > h4:first-of-type,
-.emotion-0 body > h5:first-of-type,
-.emotion-0 body > h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 a:first-of-type h1,
-.emotion-0 a:first-of-type h2,
-.emotion-0 a:first-of-type h3,
-.emotion-0 a:first-of-type h4,
-.emotion-0 a:first-of-type h5,
-.emotion-0 a:first-of-type h6 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1 p,
-.emotion-0 h2 p,
-.emotion-0 h3 p,
-.emotion-0 h4 p,
-.emotion-0 h5 p,
-.emotion-0 h6 p {
- margin-top: 0;
-}
-
-.emotion-0 li p.first {
- display: inline-block;
-}
-
-.emotion-0 ul,
-.emotion-0 ol {
- padding-left: 30px;
-}
-
-.emotion-0 ul :first-of-type,
-.emotion-0 ol :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 ul :last-child,
-.emotion-0 ol :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl {
- padding: 0;
-}
-
-.emotion-0 dl dt {
- font-size: 14px;
- font-weight: bold;
- font-style: italic;
- padding: 0;
- margin: 15px 0 5px;
-}
-
-.emotion-0 dl dt:first-of-type {
- padding: 0;
-}
-
-.emotion-0 dl dt > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dt > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl dd {
- margin: 0 0 15px;
- padding: 0 15px;
-}
-
-.emotion-0 dl dd > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dd > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 blockquote {
- border-left: 4px solid #DDDDDD;
- padding: 0 15px;
- color: #666666;
-}
-
-.emotion-0 blockquote > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 blockquote > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 table {
- padding: 0;
- border-collapse: collapse;
-}
-
-.emotion-0 table tr {
- border-top: 1px solid rgba(0,0,0,.1);
- background-color: white;
- margin: 0;
- padding: 0;
-}
-
-.emotion-0 table tr:nth-of-type(2n) {
- background-color: #F8F8F8;
-}
-
-.emotion-0 table tr th {
- font-weight: bold;
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr td {
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr th :first-of-type,
-.emotion-0 table tr td :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 table tr th :last-child,
-.emotion-0 table tr td :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 img {
- max-width: 100%;
-}
-
-.emotion-0 span.frame {
- display: block;
- overflow: hidden;
-}
-
-.emotion-0 span.frame > span {
- border: 1px solid #DDDDDD;
- display: block;
- float: left;
- overflow: hidden;
- margin: 13px 0 0;
- padding: 7px;
- width: auto;
-}
-
-.emotion-0 span.frame span img {
- display: block;
- float: left;
-}
-
-.emotion-0 span.frame span span {
- clear: both;
- color: #333333;
- display: block;
- padding: 5px 0 0;
-}
-
-.emotion-0 span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-center > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: center;
-}
-
-.emotion-0 span.align-center span img {
- margin: 0 auto;
- text-align: center;
-}
-
-.emotion-0 span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-right > span {
- display: block;
- overflow: hidden;
- margin: 13px 0 0;
- text-align: right;
-}
-
-.emotion-0 span.align-right span img {
- margin: 0;
- text-align: right;
-}
-
-.emotion-0 span.float-left {
- display: block;
- margin-right: 13px;
- overflow: hidden;
- float: left;
-}
-
-.emotion-0 span.float-left span {
- margin: 13px 0 0;
-}
-
-.emotion-0 span.float-right {
- display: block;
- margin-left: 13px;
- overflow: hidden;
- float: right;
-}
-
-.emotion-0 span.float-right > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: right;
-}
-
-.emotion-0 code,
-.emotion-0 tt {
- margin: 0 2px;
- padding: 0 5px;
- white-space: nowrap;
- border: 1px solid #EEEEEE;
- background-color: #F8F8F8;
- border-radius: 3px;
-}
-
-.emotion-0 {
- font-size: 14px;
- line-height: 1.6;
-}
-
-.emotion-0 h1 {
- font-size: 32px;
- font-weight: 900;
-}
-
-.emotion-0 h2 {
- font-size: 24px;
- border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 h3 {
- font-size: 20px;
-}
-
-.emotion-0 h4 {
- font-size: 16px;
-}
-
-.emotion-0 h5 {
- font-size: 14px;
-}
-
-.emotion-0 h6 {
- font-size: 14px;
- color: #666666;
-}
-
-.emotion-0 pre:not(.hljs) {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
- margin: 0;
-}
-
-.emotion-0 pre pre,
-.emotion-0 pre.hljs {
- padding: 15px;
- margin: 0;
- white-space: pre-wrap;
- color: inherit;
- font-size: 13px;
- line-height: 19px;
-}
-
-.emotion-0 pre pre code,
-.emotion-0 pre.hljs code {
- color: inherit;
- font-size: inherit;
-}
-
-.emotion-0 pre code {
- margin: 0;
- padding: 0;
- white-space: pre;
- border: none;
- background: transparent;
-}
-
-.emotion-0 pre code,
-.emotion-0 pre tt {
- background-color: transparent;
- border: none;
-}
-
-.emotion-0 body > *:first-of-type {
- margin-top: 0 !important;
-}
-
-.emotion-0 body > *:last-child {
- margin-bottom: 0 !important;
-}
-
-.emotion-0 a {
- color: #1EA7FD;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 a.absent {
- color: #cc0000;
-}
-
-.emotion-0 a.anchor {
- display: block;
- padding-left: 30px;
- margin-left: -30px;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
-}
-
-.emotion-0 h1,
-.emotion-0 h2,
-.emotion-0 h3,
-.emotion-0 h4,
-.emotion-0 h5,
-.emotion-0 h6 {
- margin: 20px 0 10px;
- padding: 0;
- cursor: text;
- position: relative;
-}
-
-.emotion-0 h2:first-of-type,
-.emotion-0 h1:first-of-type,
-.emotion-0 h1:first-of-type + h2,
-.emotion-0 h3:first-of-type,
-.emotion-0 h4:first-of-type,
-.emotion-0 h5:first-of-type,
-.emotion-0 h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1:hover a.anchor,
-.emotion-0 h2:hover a.anchor,
-.emotion-0 h3:hover a.anchor,
-.emotion-0 h4:hover a.anchor,
-.emotion-0 h5:hover a.anchor,
-.emotion-0 h6:hover a.anchor {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 h1 tt,
-.emotion-0 h1 code {
- font-size: inherit;
-}
-
-.emotion-0 h2 tt,
-.emotion-0 h2 code {
- font-size: inherit;
-}
-
-.emotion-0 h3 tt,
-.emotion-0 h3 code {
- font-size: inherit;
-}
-
-.emotion-0 h4 tt,
-.emotion-0 h4 code {
- font-size: inherit;
-}
-
-.emotion-0 h5 tt,
-.emotion-0 h5 code {
- font-size: inherit;
-}
-
-.emotion-0 h6 tt,
-.emotion-0 h6 code {
- font-size: inherit;
-}
-
-.emotion-0 p,
-.emotion-0 blockquote,
-.emotion-0 ul,
-.emotion-0 ol,
-.emotion-0 dl,
-.emotion-0 li,
-.emotion-0 table,
-.emotion-0 pre {
- margin: 15px 0;
-}
-
-.emotion-0 hr {
- border: 0 none;
- color: rgba(0,0,0,.1);
- height: 4px;
- padding: 0;
-}
-
-.emotion-0 body > h2:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type + h2 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h3:first-of-type,
-.emotion-0 body > h4:first-of-type,
-.emotion-0 body > h5:first-of-type,
-.emotion-0 body > h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 a:first-of-type h1,
-.emotion-0 a:first-of-type h2,
-.emotion-0 a:first-of-type h3,
-.emotion-0 a:first-of-type h4,
-.emotion-0 a:first-of-type h5,
-.emotion-0 a:first-of-type h6 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1 p,
-.emotion-0 h2 p,
-.emotion-0 h3 p,
-.emotion-0 h4 p,
-.emotion-0 h5 p,
-.emotion-0 h6 p {
- margin-top: 0;
-}
-
-.emotion-0 li p.first {
- display: inline-block;
-}
-
-.emotion-0 ul,
-.emotion-0 ol {
- padding-left: 30px;
-}
-
-.emotion-0 ul :first-of-type,
-.emotion-0 ol :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 ul :last-child,
-.emotion-0 ol :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl {
- padding: 0;
-}
-
-.emotion-0 dl dt {
- font-size: 14px;
- font-weight: bold;
- font-style: italic;
- padding: 0;
- margin: 15px 0 5px;
-}
-
-.emotion-0 dl dt:first-of-type {
- padding: 0;
-}
-
-.emotion-0 dl dt > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dt > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl dd {
- margin: 0 0 15px;
- padding: 0 15px;
-}
-
-.emotion-0 dl dd > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dd > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 blockquote {
- border-left: 4px solid #DDDDDD;
- padding: 0 15px;
- color: #666666;
-}
-
-.emotion-0 blockquote > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 blockquote > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 table {
- padding: 0;
- border-collapse: collapse;
-}
-
-.emotion-0 table tr {
- border-top: 1px solid rgba(0,0,0,.1);
- background-color: white;
- margin: 0;
- padding: 0;
-}
-
-.emotion-0 table tr:nth-of-type(2n) {
- background-color: #F8F8F8;
-}
-
-.emotion-0 table tr th {
- font-weight: bold;
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr td {
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr th :first-of-type,
-.emotion-0 table tr td :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 table tr th :last-child,
-.emotion-0 table tr td :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 img {
- max-width: 100%;
-}
-
-.emotion-0 span.frame {
- display: block;
- overflow: hidden;
-}
-
-.emotion-0 span.frame > span {
- border: 1px solid #DDDDDD;
- display: block;
- float: left;
- overflow: hidden;
- margin: 13px 0 0;
- padding: 7px;
- width: auto;
-}
-
-.emotion-0 span.frame span img {
- display: block;
- float: left;
-}
-
-.emotion-0 span.frame span span {
- clear: both;
- color: #333333;
- display: block;
- padding: 5px 0 0;
-}
-
-.emotion-0 span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-center > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: center;
-}
-
-.emotion-0 span.align-center span img {
- margin: 0 auto;
- text-align: center;
-}
-
-.emotion-0 span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-right > span {
- display: block;
- overflow: hidden;
- margin: 13px 0 0;
- text-align: right;
-}
-
-.emotion-0 span.align-right span img {
- margin: 0;
- text-align: right;
-}
-
-.emotion-0 span.float-left {
- display: block;
- margin-right: 13px;
- overflow: hidden;
- float: left;
-}
-
-.emotion-0 span.float-left span {
- margin: 13px 0 0;
-}
-
-.emotion-0 span.float-right {
- display: block;
- margin-left: 13px;
- overflow: hidden;
- float: right;
-}
-
-.emotion-0 span.float-right > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: right;
-}
-
-.emotion-0 code,
-.emotion-0 tt {
- margin: 0 2px;
- padding: 0 5px;
- white-space: nowrap;
- border: 1px solid #EEEEEE;
- background-color: #F8F8F8;
- border-radius: 3px;
-}
-
-
-
-
- h1 Heading
-
-
- h2 Heading
-
-
- h3 Heading
-
-
- h4 Heading
-
-
- h5 Heading
-
-
- h6 Heading
-
-
- Typographic replacements
-
-
- Enable typographer option to see result.
-
-
- © © ® ® ™ ™ § § ±
-
-
- test… test… test… test?.. test!..
-
-
- !!! ??? , – —
-
-
- “Smartypants, double quotes” and ‘single quotes’
-
-
- Emphasis
-
-
-
- This is bold text
-
-
-
-
- This is bold text
-
-
-
-
- This is italic text
-
-
-
-
- This is italic text
-
-
-
-
- Strikethrough
-
-
-
- Blockquotes
-
-
-
- Blockquotes can also be nested…
-
-
-
- …by using additional greater-than signs right next to each other…
-
-
-
- …or with spaces between arrows.
-
-
-
-
-
- Lists
-
-
- Unordered
-
-
-
- Create a list by starting a line with
-
- +
-
- ,
-
- -
-
- , or
-
- *
-
-
-
- Sub-lists are made by indenting 2 spaces:
-
-
- Marker character change forces new list start:
-
-
- Ac tristique libero volutpat at
-
-
-
-
- Facilisis in pretium nisl aliquet
-
-
-
-
- Nulla volutpat aliquam velit
-
-
-
-
-
-
- Very easy!
-
-
-
- Ordered
-
-
-
-
- Lorem ipsum dolor sit amet
-
-
-
-
- Consectetur adipiscing elit
-
-
-
-
- Integer molestie lorem at massa
-
-
-
-
- You can use sequential numbers…
-
-
-
-
- …or keep all the numbers as
-
- 1.
-
-
-
-
-
- Start numbering with offset:
-
-
-
- foo
-
-
- bar
-
-
-
- Tables
-
-
-
-
-
- Option
-
-
- Description
-
-
-
-
-
-
- data
-
-
- path to data files to supply the data that will be passed into templates.
-
-
-
-
- engine
-
-
- engine to be used for processing templates. Handlebars is the default.
-
-
-
-
- ext
-
-
- extension to be used for dest files.
-
-
-
-
-
- Right aligned columns
-
-
-
-
-
- Option
-
-
- Description
-
-
-
-
-
-
- data
-
-
- path to data files to supply the data that will be passed into templates.
-
-
-
-
- engine
-
-
- engine to be used for processing templates. Handlebars is the default.
-
-
-
-
- ext
-
-
- extension to be used for dest files.
-
-
-
-
-
- Links
-
-
-
- link text
-
-
-
-
- link with title
-
-
-
- Autoconverted link
-
- https://github.com/nodeca/pica
-
- (enable linkify to see)
-
-
- Images
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Basics|DocumentFormatting withMarkdown 1`] = `
-.emotion-0 {
- font-size: 14px;
- line-height: 1.6;
-}
-
-.emotion-0 h1 {
- font-size: 32px;
- font-weight: 900;
-}
-
-.emotion-0 h2 {
- font-size: 24px;
- border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 h3 {
- font-size: 20px;
-}
-
-.emotion-0 h4 {
- font-size: 16px;
-}
-
-.emotion-0 h5 {
- font-size: 14px;
-}
-
-.emotion-0 h6 {
- font-size: 14px;
- color: #666666;
-}
-
-.emotion-0 pre:not(.hljs) {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
- margin: 0;
-}
-
-.emotion-0 pre pre,
-.emotion-0 pre.hljs {
- padding: 15px;
- margin: 0;
- white-space: pre-wrap;
- color: inherit;
- font-size: 13px;
- line-height: 19px;
-}
-
-.emotion-0 pre pre code,
-.emotion-0 pre.hljs code {
- color: inherit;
- font-size: inherit;
-}
-
-.emotion-0 pre code {
- margin: 0;
- padding: 0;
- white-space: pre;
- border: none;
- background: transparent;
-}
-
-.emotion-0 pre code,
-.emotion-0 pre tt {
- background-color: transparent;
- border: none;
-}
-
-.emotion-0 body > *:first-of-type {
- margin-top: 0 !important;
-}
-
-.emotion-0 body > *:last-child {
- margin-bottom: 0 !important;
-}
-
-.emotion-0 a {
- color: #1EA7FD;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 a.absent {
- color: #cc0000;
-}
-
-.emotion-0 a.anchor {
- display: block;
- padding-left: 30px;
- margin-left: -30px;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
-}
-
-.emotion-0 h1,
-.emotion-0 h2,
-.emotion-0 h3,
-.emotion-0 h4,
-.emotion-0 h5,
-.emotion-0 h6 {
- margin: 20px 0 10px;
- padding: 0;
- cursor: text;
- position: relative;
-}
-
-.emotion-0 h2:first-of-type,
-.emotion-0 h1:first-of-type,
-.emotion-0 h1:first-of-type + h2,
-.emotion-0 h3:first-of-type,
-.emotion-0 h4:first-of-type,
-.emotion-0 h5:first-of-type,
-.emotion-0 h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1:hover a.anchor,
-.emotion-0 h2:hover a.anchor,
-.emotion-0 h3:hover a.anchor,
-.emotion-0 h4:hover a.anchor,
-.emotion-0 h5:hover a.anchor,
-.emotion-0 h6:hover a.anchor {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 h1 tt,
-.emotion-0 h1 code {
- font-size: inherit;
-}
-
-.emotion-0 h2 tt,
-.emotion-0 h2 code {
- font-size: inherit;
-}
-
-.emotion-0 h3 tt,
-.emotion-0 h3 code {
- font-size: inherit;
-}
-
-.emotion-0 h4 tt,
-.emotion-0 h4 code {
- font-size: inherit;
-}
-
-.emotion-0 h5 tt,
-.emotion-0 h5 code {
- font-size: inherit;
-}
-
-.emotion-0 h6 tt,
-.emotion-0 h6 code {
- font-size: inherit;
-}
-
-.emotion-0 p,
-.emotion-0 blockquote,
-.emotion-0 ul,
-.emotion-0 ol,
-.emotion-0 dl,
-.emotion-0 li,
-.emotion-0 table,
-.emotion-0 pre {
- margin: 15px 0;
-}
-
-.emotion-0 hr {
- border: 0 none;
- color: rgba(0,0,0,.1);
- height: 4px;
- padding: 0;
-}
-
-.emotion-0 body > h2:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type + h2 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h3:first-of-type,
-.emotion-0 body > h4:first-of-type,
-.emotion-0 body > h5:first-of-type,
-.emotion-0 body > h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 a:first-of-type h1,
-.emotion-0 a:first-of-type h2,
-.emotion-0 a:first-of-type h3,
-.emotion-0 a:first-of-type h4,
-.emotion-0 a:first-of-type h5,
-.emotion-0 a:first-of-type h6 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1 p,
-.emotion-0 h2 p,
-.emotion-0 h3 p,
-.emotion-0 h4 p,
-.emotion-0 h5 p,
-.emotion-0 h6 p {
- margin-top: 0;
-}
-
-.emotion-0 li p.first {
- display: inline-block;
-}
-
-.emotion-0 ul,
-.emotion-0 ol {
- padding-left: 30px;
-}
-
-.emotion-0 ul :first-of-type,
-.emotion-0 ol :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 ul :last-child,
-.emotion-0 ol :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl {
- padding: 0;
-}
-
-.emotion-0 dl dt {
- font-size: 14px;
- font-weight: bold;
- font-style: italic;
- padding: 0;
- margin: 15px 0 5px;
-}
-
-.emotion-0 dl dt:first-of-type {
- padding: 0;
-}
-
-.emotion-0 dl dt > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dt > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl dd {
- margin: 0 0 15px;
- padding: 0 15px;
-}
-
-.emotion-0 dl dd > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dd > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 blockquote {
- border-left: 4px solid #DDDDDD;
- padding: 0 15px;
- color: #666666;
-}
-
-.emotion-0 blockquote > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 blockquote > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 table {
- padding: 0;
- border-collapse: collapse;
-}
-
-.emotion-0 table tr {
- border-top: 1px solid rgba(0,0,0,.1);
- background-color: white;
- margin: 0;
- padding: 0;
-}
-
-.emotion-0 table tr:nth-of-type(2n) {
- background-color: #F8F8F8;
-}
-
-.emotion-0 table tr th {
- font-weight: bold;
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr td {
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr th :first-of-type,
-.emotion-0 table tr td :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 table tr th :last-child,
-.emotion-0 table tr td :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 img {
- max-width: 100%;
-}
-
-.emotion-0 span.frame {
- display: block;
- overflow: hidden;
-}
-
-.emotion-0 span.frame > span {
- border: 1px solid #DDDDDD;
- display: block;
- float: left;
- overflow: hidden;
- margin: 13px 0 0;
- padding: 7px;
- width: auto;
-}
-
-.emotion-0 span.frame span img {
- display: block;
- float: left;
-}
-
-.emotion-0 span.frame span span {
- clear: both;
- color: #333333;
- display: block;
- padding: 5px 0 0;
-}
-
-.emotion-0 span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-center > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: center;
-}
-
-.emotion-0 span.align-center span img {
- margin: 0 auto;
- text-align: center;
-}
-
-.emotion-0 span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-right > span {
- display: block;
- overflow: hidden;
- margin: 13px 0 0;
- text-align: right;
-}
-
-.emotion-0 span.align-right span img {
- margin: 0;
- text-align: right;
-}
-
-.emotion-0 span.float-left {
- display: block;
- margin-right: 13px;
- overflow: hidden;
- float: left;
-}
-
-.emotion-0 span.float-left span {
- margin: 13px 0 0;
-}
-
-.emotion-0 span.float-right {
- display: block;
- margin-left: 13px;
- overflow: hidden;
- float: right;
-}
-
-.emotion-0 span.float-right > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: right;
-}
-
-.emotion-0 code,
-.emotion-0 tt {
- margin: 0 2px;
- padding: 0 5px;
- white-space: nowrap;
- border: 1px solid #EEEEEE;
- background-color: #F8F8F8;
- border-radius: 3px;
-}
-
-.emotion-0 {
- font-size: 14px;
- line-height: 1.6;
-}
-
-.emotion-0 h1 {
- font-size: 32px;
- font-weight: 900;
-}
-
-.emotion-0 h2 {
- font-size: 24px;
- border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-0 h3 {
- font-size: 20px;
-}
-
-.emotion-0 h4 {
- font-size: 16px;
-}
-
-.emotion-0 h5 {
- font-size: 14px;
-}
-
-.emotion-0 h6 {
- font-size: 14px;
- color: #666666;
-}
-
-.emotion-0 pre:not(.hljs) {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
- margin: 0;
-}
-
-.emotion-0 pre pre,
-.emotion-0 pre.hljs {
- padding: 15px;
- margin: 0;
- white-space: pre-wrap;
- color: inherit;
- font-size: 13px;
- line-height: 19px;
-}
-
-.emotion-0 pre pre code,
-.emotion-0 pre.hljs code {
- color: inherit;
- font-size: inherit;
-}
-
-.emotion-0 pre code {
- margin: 0;
- padding: 0;
- white-space: pre;
- border: none;
- background: transparent;
-}
-
-.emotion-0 pre code,
-.emotion-0 pre tt {
- background-color: transparent;
- border: none;
-}
-
-.emotion-0 body > *:first-of-type {
- margin-top: 0 !important;
-}
-
-.emotion-0 body > *:last-child {
- margin-bottom: 0 !important;
-}
-
-.emotion-0 a {
- color: #1EA7FD;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 a.absent {
- color: #cc0000;
-}
-
-.emotion-0 a.anchor {
- display: block;
- padding-left: 30px;
- margin-left: -30px;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
-}
-
-.emotion-0 h1,
-.emotion-0 h2,
-.emotion-0 h3,
-.emotion-0 h4,
-.emotion-0 h5,
-.emotion-0 h6 {
- margin: 20px 0 10px;
- padding: 0;
- cursor: text;
- position: relative;
-}
-
-.emotion-0 h2:first-of-type,
-.emotion-0 h1:first-of-type,
-.emotion-0 h1:first-of-type + h2,
-.emotion-0 h3:first-of-type,
-.emotion-0 h4:first-of-type,
-.emotion-0 h5:first-of-type,
-.emotion-0 h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1:hover a.anchor,
-.emotion-0 h2:hover a.anchor,
-.emotion-0 h3:hover a.anchor,
-.emotion-0 h4:hover a.anchor,
-.emotion-0 h5:hover a.anchor,
-.emotion-0 h6:hover a.anchor {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 h1 tt,
-.emotion-0 h1 code {
- font-size: inherit;
-}
-
-.emotion-0 h2 tt,
-.emotion-0 h2 code {
- font-size: inherit;
-}
-
-.emotion-0 h3 tt,
-.emotion-0 h3 code {
- font-size: inherit;
-}
-
-.emotion-0 h4 tt,
-.emotion-0 h4 code {
- font-size: inherit;
-}
-
-.emotion-0 h5 tt,
-.emotion-0 h5 code {
- font-size: inherit;
-}
-
-.emotion-0 h6 tt,
-.emotion-0 h6 code {
- font-size: inherit;
-}
-
-.emotion-0 p,
-.emotion-0 blockquote,
-.emotion-0 ul,
-.emotion-0 ol,
-.emotion-0 dl,
-.emotion-0 li,
-.emotion-0 table,
-.emotion-0 pre {
- margin: 15px 0;
-}
-
-.emotion-0 hr {
- border: 0 none;
- color: rgba(0,0,0,.1);
- height: 4px;
- padding: 0;
-}
-
-.emotion-0 body > h2:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h1:first-of-type + h2 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 body > h3:first-of-type,
-.emotion-0 body > h4:first-of-type,
-.emotion-0 body > h5:first-of-type,
-.emotion-0 body > h6:first-of-type {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 a:first-of-type h1,
-.emotion-0 a:first-of-type h2,
-.emotion-0 a:first-of-type h3,
-.emotion-0 a:first-of-type h4,
-.emotion-0 a:first-of-type h5,
-.emotion-0 a:first-of-type h6 {
- margin-top: 0;
- padding-top: 0;
-}
-
-.emotion-0 h1 p,
-.emotion-0 h2 p,
-.emotion-0 h3 p,
-.emotion-0 h4 p,
-.emotion-0 h5 p,
-.emotion-0 h6 p {
- margin-top: 0;
-}
-
-.emotion-0 li p.first {
- display: inline-block;
-}
-
-.emotion-0 ul,
-.emotion-0 ol {
- padding-left: 30px;
-}
-
-.emotion-0 ul :first-of-type,
-.emotion-0 ol :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 ul :last-child,
-.emotion-0 ol :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl {
- padding: 0;
-}
-
-.emotion-0 dl dt {
- font-size: 14px;
- font-weight: bold;
- font-style: italic;
- padding: 0;
- margin: 15px 0 5px;
-}
-
-.emotion-0 dl dt:first-of-type {
- padding: 0;
-}
-
-.emotion-0 dl dt > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dt > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 dl dd {
- margin: 0 0 15px;
- padding: 0 15px;
-}
-
-.emotion-0 dl dd > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 dl dd > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 blockquote {
- border-left: 4px solid #DDDDDD;
- padding: 0 15px;
- color: #666666;
-}
-
-.emotion-0 blockquote > :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 blockquote > :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 table {
- padding: 0;
- border-collapse: collapse;
-}
-
-.emotion-0 table tr {
- border-top: 1px solid rgba(0,0,0,.1);
- background-color: white;
- margin: 0;
- padding: 0;
-}
-
-.emotion-0 table tr:nth-of-type(2n) {
- background-color: #F8F8F8;
-}
-
-.emotion-0 table tr th {
- font-weight: bold;
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr td {
- border: 1px solid rgba(0,0,0,.1);
- text-align: left;
- margin: 0;
- padding: 6px 13px;
-}
-
-.emotion-0 table tr th :first-of-type,
-.emotion-0 table tr td :first-of-type {
- margin-top: 0;
-}
-
-.emotion-0 table tr th :last-child,
-.emotion-0 table tr td :last-child {
- margin-bottom: 0;
-}
-
-.emotion-0 img {
- max-width: 100%;
-}
-
-.emotion-0 span.frame {
- display: block;
- overflow: hidden;
-}
-
-.emotion-0 span.frame > span {
- border: 1px solid #DDDDDD;
- display: block;
- float: left;
- overflow: hidden;
- margin: 13px 0 0;
- padding: 7px;
- width: auto;
-}
-
-.emotion-0 span.frame span img {
- display: block;
- float: left;
-}
-
-.emotion-0 span.frame span span {
- clear: both;
- color: #333333;
- display: block;
- padding: 5px 0 0;
-}
-
-.emotion-0 span.align-center {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-center > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: center;
-}
-
-.emotion-0 span.align-center span img {
- margin: 0 auto;
- text-align: center;
-}
-
-.emotion-0 span.align-right {
- display: block;
- overflow: hidden;
- clear: both;
-}
-
-.emotion-0 span.align-right > span {
- display: block;
- overflow: hidden;
- margin: 13px 0 0;
- text-align: right;
-}
-
-.emotion-0 span.align-right span img {
- margin: 0;
- text-align: right;
-}
-
-.emotion-0 span.float-left {
- display: block;
- margin-right: 13px;
- overflow: hidden;
- float: left;
-}
-
-.emotion-0 span.float-left span {
- margin: 13px 0 0;
-}
-
-.emotion-0 span.float-right {
- display: block;
- margin-left: 13px;
- overflow: hidden;
- float: right;
-}
-
-.emotion-0 span.float-right > span {
- display: block;
- overflow: hidden;
- margin: 13px auto 0;
- text-align: right;
-}
-
-.emotion-0 code,
-.emotion-0 tt {
- margin: 0 2px;
- padding: 0 5px;
- white-space: nowrap;
- border: 1px solid #EEEEEE;
- background-color: #F8F8F8;
- border-radius: 3px;
-}
-
-
-`;
-
-exports[`Storyshots Basics|Placeholder singleChild 1`] = `
-.emotion-1 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-.emotion-1 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-
-
- This is a placeholder with single child, it's bolded
-
-
-`;
-
-exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
-.emotion-4 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-.emotion-2 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-2 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-2:hover svg path,
-.emotion-2:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-2:active {
- color: #028ee6;
-}
-
-.emotion-2:active svg path {
- fill: #028ee6;
-}
-
-.emotion-2 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-2 svg path {
- fill: #999999;
-}
-
-.emotion-2:hover {
- color: #666666;
-}
-
-.emotion-2:hover svg path {
- fill: #666666;
-}
-
-.emotion-2:active {
- color: #444444;
-}
-
-.emotion-2:active svg path {
- fill: #444444;
-}
-
-.emotion-4 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-.emotion-2 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-2 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-2:hover svg path,
-.emotion-2:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-2:active {
- color: #028ee6;
-}
-
-.emotion-2:active svg path {
- fill: #028ee6;
-}
-
-.emotion-2 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-2 svg path {
- fill: #999999;
-}
-
-.emotion-2:hover {
- color: #666666;
-}
-
-.emotion-2:hover svg path {
- fill: #666666;
-}
-
-.emotion-2:active {
- color: #444444;
-}
-
-.emotion-2:active svg path {
- fill: #444444;
-}
-
-
-
- This has two children, the first bold
-
-
-
-`;
-
-exports[`Storyshots Basics|ScrollArea both 1`] = `
-.emotion-401 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-.emotion-400 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
-}
-
-.emotion-401 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-.emotion-400 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
-}
-
-
-
-
-
-
-
-
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
- 0
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
-
- 0
-
-
- 2
-
-
- 4
-
-
- 6
-
-
- 8
-
-
- 10
-
-
- 12
-
-
- 14
-
-
- 16
-
-
- 18
-
-
- 20
-
-
- 22
-
-
- 24
-
-
- 26
-
-
- 28
-
-
- 30
-
-
- 32
-
-
- 34
-
-
- 36
-
-
- 38
-
-
-
- 0
-
-
- 3
-
-
- 6
-
-
- 9
-
-
- 12
-
-
- 15
-
-
- 18
-
-
- 21
-
-
- 24
-
-
- 27
-
-
- 30
-
-
- 33
-
-
- 36
-
-
- 39
-
-
- 42
-
-
- 45
-
-
- 48
-
-
- 51
-
-
- 54
-
-
- 57
-
-
-
- 0
-
-
- 4
-
-
- 8
-
-
- 12
-
-
- 16
-
-
- 20
-
-
- 24
-
-
- 28
-
-
- 32
-
-
- 36
-
-
- 40
-
-
- 44
-
-
- 48
-
-
- 52
-
-
- 56
-
-
- 60
-
-
- 64
-
-
- 68
-
-
- 72
-
-
- 76
-
-
-
- 0
-
-
- 5
-
-
- 10
-
-
- 15
-
-
- 20
-
-
- 25
-
-
- 30
-
-
- 35
-
-
- 40
-
-
- 45
-
-
- 50
-
-
- 55
-
-
- 60
-
-
- 65
-
-
- 70
-
-
- 75
-
-
- 80
-
-
- 85
-
-
- 90
-
-
- 95
-
-
-
- 0
-
-
- 6
-
-
- 12
-
-
- 18
-
-
- 24
-
-
- 30
-
-
- 36
-
-
- 42
-
-
- 48
-
-
- 54
-
-
- 60
-
-
- 66
-
-
- 72
-
-
- 78
-
-
- 84
-
-
- 90
-
-
- 96
-
-
- 102
-
-
- 108
-
-
- 114
-
-
-
- 0
-
-
- 7
-
-
- 14
-
-
- 21
-
-
- 28
-
-
- 35
-
-
- 42
-
-
- 49
-
-
- 56
-
-
- 63
-
-
- 70
-
-
- 77
-
-
- 84
-
-
- 91
-
-
- 98
-
-
- 105
-
-
- 112
-
-
- 119
-
-
- 126
-
-
- 133
-
-
-
- 0
-
-
- 8
-
-
- 16
-
-
- 24
-
-
- 32
-
-
- 40
-
-
- 48
-
-
- 56
-
-
- 64
-
-
- 72
-
-
- 80
-
-
- 88
-
-
- 96
-
-
- 104
-
-
- 112
-
-
- 120
-
-
- 128
-
-
- 136
-
-
- 144
-
-
- 152
-
-
-
- 0
-
-
- 9
-
-
- 18
-
-
- 27
-
-
- 36
-
-
- 45
-
-
- 54
-
-
- 63
-
-
- 72
-
-
- 81
-
-
- 90
-
-
- 99
-
-
- 108
-
-
- 117
-
-
- 126
-
-
- 135
-
-
- 144
-
-
- 153
-
-
- 162
-
-
- 171
-
-
-
- 0
-
-
- 10
-
-
- 20
-
-
- 30
-
-
- 40
-
-
- 50
-
-
- 60
-
-
- 70
-
-
- 80
-
-
- 90
-
-
- 100
-
-
- 110
-
-
- 120
-
-
- 130
-
-
- 140
-
-
- 150
-
-
- 160
-
-
- 170
-
-
- 180
-
-
- 190
-
-
-
- 0
-
-
- 11
-
-
- 22
-
-
- 33
-
-
- 44
-
-
- 55
-
-
- 66
-
-
- 77
-
-
- 88
-
-
- 99
-
-
- 110
-
-
- 121
-
-
- 132
-
-
- 143
-
-
- 154
-
-
- 165
-
-
- 176
-
-
- 187
-
-
- 198
-
-
- 209
-
-
-
- 0
-
-
- 12
-
-
- 24
-
-
- 36
-
-
- 48
-
-
- 60
-
-
- 72
-
-
- 84
-
-
- 96
-
-
- 108
-
-
- 120
-
-
- 132
-
-
- 144
-
-
- 156
-
-
- 168
-
-
- 180
-
-
- 192
-
-
- 204
-
-
- 216
-
-
- 228
-
-
-
- 0
-
-
- 13
-
-
- 26
-
-
- 39
-
-
- 52
-
-
- 65
-
-
- 78
-
-
- 91
-
-
- 104
-
-
- 117
-
-
- 130
-
-
- 143
-
-
- 156
-
-
- 169
-
-
- 182
-
-
- 195
-
-
- 208
-
-
- 221
-
-
- 234
-
-
- 247
-
-
-
- 0
-
-
- 14
-
-
- 28
-
-
- 42
-
-
- 56
-
-
- 70
-
-
- 84
-
-
- 98
-
-
- 112
-
-
- 126
-
-
- 140
-
-
- 154
-
-
- 168
-
-
- 182
-
-
- 196
-
-
- 210
-
-
- 224
-
-
- 238
-
-
- 252
-
-
- 266
-
-
-
- 0
-
-
- 15
-
-
- 30
-
-
- 45
-
-
- 60
-
-
- 75
-
-
- 90
-
-
- 105
-
-
- 120
-
-
- 135
-
-
- 150
-
-
- 165
-
-
- 180
-
-
- 195
-
-
- 210
-
-
- 225
-
-
- 240
-
-
- 255
-
-
- 270
-
-
- 285
-
-
-
- 0
-
-
- 16
-
-
- 32
-
-
- 48
-
-
- 64
-
-
- 80
-
-
- 96
-
-
- 112
-
-
- 128
-
-
- 144
-
-
- 160
-
-
- 176
-
-
- 192
-
-
- 208
-
-
- 224
-
-
- 240
-
-
- 256
-
-
- 272
-
-
- 288
-
-
- 304
-
-
-
- 0
-
-
- 17
-
-
- 34
-
-
- 51
-
-
- 68
-
-
- 85
-
-
- 102
-
-
- 119
-
-
- 136
-
-
- 153
-
-
- 170
-
-
- 187
-
-
- 204
-
-
- 221
-
-
- 238
-
-
- 255
-
-
- 272
-
-
- 289
-
-
- 306
-
-
- 323
-
-
-
- 0
-
-
- 18
-
-
- 36
-
-
- 54
-
-
- 72
-
-
- 90
-
-
- 108
-
-
- 126
-
-
- 144
-
-
- 162
-
-
- 180
-
-
- 198
-
-
- 216
-
-
- 234
-
-
- 252
-
-
- 270
-
-
- 288
-
-
- 306
-
-
- 324
-
-
- 342
-
-
-
- 0
-
-
- 19
-
-
- 38
-
-
- 57
-
-
- 76
-
-
- 95
-
-
- 114
-
-
- 133
-
-
- 152
-
-
- 171
-
-
- 190
-
-
- 209
-
-
- 228
-
-
- 247
-
-
- 266
-
-
- 285
-
-
- 304
-
-
- 323
-
-
- 342
-
-
- 361
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
-.emotion-21 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-.emotion-20 {
- overflow-y: hidden;
- overflow-x: auto;
- width: 100%;
-}
-
-.emotion-21 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-.emotion-20 {
- overflow-y: hidden;
- overflow-x: auto;
- width: 100%;
-}
-
-
-
-
-
-
-
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Basics|ScrollArea vertical 1`] = `
-.emotion-21 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-20 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-.emotion-21 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-20 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-0 {
- display: inline-block;
- height: 40px;
- width: 40px;
- margin-top: 5px;
- margin-right: 5px;
- background: silver;
- line-height: 40px;
- text-align: center;
- font-size: 9px;
-}
-
-
-
-
-
-
-
-
-
-
- 0
-
-
-
- 1
-
-
-
- 2
-
-
-
- 3
-
-
-
- 4
-
-
-
- 5
-
-
-
- 6
-
-
-
- 7
-
-
-
- 8
-
-
-
- 9
-
-
-
- 10
-
-
-
- 11
-
-
-
- 12
-
-
-
- 13
-
-
-
- 14
-
-
-
- 15
-
-
-
- 16
-
-
-
- 17
-
-
-
- 18
-
-
-
- 19
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots Basics|ScrollArea withOuterBorder 1`] = `
-.emotion-1 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
-}
-
-.emotion-1 {
- white-space: nowrap;
- line-height: 0px;
- width: 500px;
- height: 500px;
- overflow: hidden;
-}
-
-.emotion-0 {
- overflow-y: auto;
- height: 100%;
- overflow-x: auto;
- width: 100%;
-}
-
-
-`;
-
-exports[`Storyshots Core|Decorators all 1`] = `
-Array [
-
- Global Decorator
-
,
-
- Kind Decorator
-
,
-
- Local Decorator
-
,
-
- Story
-
,
-]
-`;
-
-exports[`Storyshots Core|Events Force re-render 1`] = `
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 13px 20px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 13px;
- font-weight: 700;
- line-height: 1;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 16px;
- width: 16px;
- vertical-align: top;
- margin-right: 6px;
- margin-top: -2px;
- margin-bottom: -2px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-.emotion-0 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 13px 20px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 13px;
- font-weight: 700;
- line-height: 1;
-}
-
-.emotion-0 svg {
- display: inline-block;
- height: 16px;
- width: 16px;
- vertical-align: top;
- margin-right: 6px;
- margin-top: -2px;
- margin-bottom: -2px;
- pointer-events: none;
-}
-
-.emotion-0 svg path {
- fill: currentColor;
-}
-
-
- Clicked: 0
-
-`;
-
-exports[`Storyshots Core|Parameters passed to story 1`] = `
-
- Parameters are {
- "a11y": {
- "config": {},
- "options": {
- "checks": {
- "color-contrast": {
- "options": {
- "noScroll": true
- }
- }
- },
- "restoreScroll": true
- }
- },
- "backgrounds": [
- {
- "name": "storybook app",
- "value": "#F6F9FC",
- "default": true
- },
- {
- "name": "light",
- "value": "#eeeeee"
- },
- {
- "name": "dark",
- "value": "#222222"
- }
- ],
- "globalParameter": "globalParameter",
- "chapterParameter": "chapterParameter",
- "storyParameter": "storyParameter",
- "decoratorParameter": "decoratorParameter"
-}
-
-`;
-
-exports[`Storyshots Core|Scroll story with 100vh padding 1 1`] = `
-
-
- START, when switching stories, you should be able to read this at the top of the page
-
-
-
- END, this text should be below the scroll "fold" and therefore only be readable after scrolling
-
-
-`;
-
-exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
-
-
- START, when switching stories, you should be able to read this at the top of the page
-
-
-
- END, this text should be below the scroll "fold" and therefore only be readable after scrolling
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Item longText 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-
-
- 🎉 This is a long message that extends over two lines!
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Item simple 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-
-
- 🎉 Storybook is cool!
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Item withLink 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Notifications all 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-3 {
- z-index: 10;
- bottom: 0;
- left: 0;
- right: 0;
- position: fixed;
-}
-
-.emotion-3 > * + * {
- margin-top: 10px;
-}
-
-.emotion-3:empty {
- display: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-3 {
- z-index: 10;
- bottom: 0;
- left: 0;
- right: 0;
- position: fixed;
-}
-
-.emotion-3 > * + * {
- margin-top: 10px;
-}
-
-.emotion-3:empty {
- display: none;
-}
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Notifications placement 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-3 {
- z-index: 10;
- position: fixed;
- left: 20px;
- bottom: 20px;
-}
-
-.emotion-3 > * + * {
- margin-top: 10px;
-}
-
-.emotion-3:empty {
- display: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-3 {
- z-index: 10;
- position: fixed;
- left: 20px;
- bottom: 20px;
-}
-
-.emotion-3 > * + * {
- margin-top: 10px;
-}
-
-.emotion-3:empty {
- display: none;
-}
-
-
-`;
-
-exports[`Storyshots UI|Notifications/Notifications single 1`] = `
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-1 {
- z-index: 10;
- bottom: 0;
- left: 0;
- right: 0;
- position: fixed;
-}
-
-.emotion-1 > * + * {
- margin-top: 10px;
-}
-
-.emotion-1:empty {
- display: none;
-}
-
-.emotion-0 {
- display: block;
- padding: 16px 20px;
- border-radius: 10px;
- font-size: 12px;
- font-weight: 700;
- line-height: 16px;
- box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1),0 2px 5px 0 rgba(0,0,0,0.05);
- color: #FFFFFF;
- background-color: rgba(0,0,0,0.95);
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-1 {
- z-index: 10;
- bottom: 0;
- left: 0;
- right: 0;
- position: fixed;
-}
-
-.emotion-1 > * + * {
- margin-top: 10px;
-}
-
-.emotion-1:empty {
- display: none;
-}
-
-
-
-
- 🎉 Storybook is cool!
-
-
-
-`;
-
-exports[`Storyshots UI|Preview/Iframe errorStory 1`] = `
-
-`;
-
-exports[`Storyshots UI|Preview/Iframe missingStory 1`] = `
-
-`;
-
-exports[`Storyshots UI|Preview/Iframe workingStory 1`] = `
-
-`;
-
-exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding-top: 20px;
- margin-top: 20px;
- border-top: 1px solid rgba(0,0,0,.1);
- font-weight: 700;
-}
-
-.emotion-6 > * + * {
- margin-left: 20px;
-}
-
-.emotion-1 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-1 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-1:active {
- color: #028ee6;
-}
-
-.emotion-1:active svg path {
- fill: #028ee6;
-}
-
-.emotion-1 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-1 svg path {
- fill: #999999;
-}
-
-.emotion-1:hover {
- color: #666666;
-}
-
-.emotion-1:hover svg path {
- fill: #666666;
-}
-
-.emotion-1:active {
- color: #444444;
-}
-
-.emotion-1:active svg path {
- fill: #444444;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding-top: 20px;
- margin-top: 20px;
- border-top: 1px solid rgba(0,0,0,.1);
- font-weight: 700;
-}
-
-.emotion-6 > * + * {
- margin-left: 20px;
-}
-
-.emotion-1 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-1 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-1:active {
- color: #028ee6;
-}
-
-.emotion-1:active svg path {
- fill: #028ee6;
-}
-
-.emotion-1 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-1 svg path {
- fill: #999999;
-}
-
-.emotion-1:hover {
- color: #666666;
-}
-
-.emotion-1:hover svg path {
- fill: #666666;
-}
-
-.emotion-1:active {
- color: #444444;
-}
-
-.emotion-1:active svg path {
- fill: #444444;
-}
-
-
-`;
-
-exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
-.emotion-100 {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.emotion-8 {
- overflow-y: hidden;
- overflow-x: auto;
- width: 100%;
- color: #999999;
- width: 100%;
- height: 40px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
- background: #FFFFFF;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- position: relative;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 40px;
-}
-
-.emotion-2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- white-space: nowrap;
- -webkit-flex-basis: auto;
- -ms-flex-preferred-size: auto;
- flex-basis: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.emotion-2 > * {
- margin-left: 15px;
-}
-
-.emotion-1 {
- overflow: hidden;
-}
-
-.emotion-1:first-of-type {
- margin-left: 0;
-}
-
-.emotion-0 {
- white-space: normal;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- overflow: hidden;
- vertical-align: top;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- padding: 0 15px;
- text-transform: capitalize;
- -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
- transition: color 0.2s linear,border-bottom-color 0.2s linear;
- height: 40px;
- line-height: 12px;
- cursor: pointer;
- background: transparent;
- border: 0 solid transparent;
- border-top: 3px solid transparent;
- border-bottom: 3px solid transparent;
- font-weight: bold;
- font-size: 13px;
- color: #1EA7FD;
- border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
- display: none;
-}
-
-.emotion-0:focus {
- outline: 0 none;
- border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- white-space: nowrap;
- -webkit-flex-basis: auto;
- -ms-flex-preferred-size: auto;
- flex-basis: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- margin-left: 30px;
-}
-
-.emotion-6 > * {
- margin-right: 15px;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-99 {
- display: block;
- position: relative;
- font-size: 13px;
- height: calc(100% - 40px);
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 40px;
- overflow: auto;
-}
-
-.emotion-99 > *:first-child {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- height: 100%;
- overflow: auto;
-}
-
-.emotion-5 {
- height: 40px;
- background: none;
- color: inherit;
- padding: 0;
- cursor: pointer;
- border: 0 solid transparent;
- border-top: 3px solid transparent;
- border-bottom: 3px solid transparent;
- -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
- transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
- outline: 0 none;
- color: #1EA7FD;
-}
-
-.emotion-5 > svg {
- width: 15px;
-}
-
-.emotion-96 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding-top: 20px;
- margin-top: 20px;
- border-top: 1px solid rgba(0,0,0,.1);
- font-weight: 700;
-}
-
-.emotion-96 > * + * {
- margin-left: 20px;
-}
-
-.emotion-91 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-91 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-91:hover,
-.emotion-91:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-91:hover svg path,
-.emotion-91:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-91:active {
- color: #028ee6;
-}
-
-.emotion-91:active svg path {
- fill: #028ee6;
-}
-
-.emotion-91 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-91 svg path {
- fill: #999999;
-}
-
-.emotion-91:hover {
- color: #666666;
-}
-
-.emotion-91:hover svg path {
- fill: #666666;
-}
-
-.emotion-91:active {
- color: #444444;
-}
-
-.emotion-91:active svg path {
- fill: #444444;
-}
-
-.emotion-98 {
- display: block;
-}
-
-.emotion-97 {
- font-size: 14px;
- padding: 3rem 20px;
- max-width: 600px;
- margin: 0 auto;
-}
-
-.emotion-9 {
- margin-bottom: 20px;
- font-size: 28px;
- font-weight: 900;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
-}
-
-.emotion-88 {
- display: grid;
- grid-template-columns: 1fr;
- grid-auto-rows: minmax(auto,auto);
- margin-bottom: 20px;
-}
-
-.emotion-12 {
- -webkit-align-self: flex-end;
- -ms-flex-item-align: end;
- align-self: flex-end;
- display: grid;
- margin: 10px 0;
- grid-template-columns: 1fr 1fr 12px;
-}
-
-.emotion-12 > *:last-of-type {
- grid-column: 2 / 2;
- justify-self: flex-end;
- grid-row: 1;
-}
-
-.emotion-10 {
- font-weight: 700;
-}
-
-.emotion-17 {
- padding: 6px 0;
- border-top: 1px solid rgba(0,0,0,.1);
- display: grid;
- grid-template-columns: 1fr 1fr 0px;
-}
-
-.emotion-13 {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.emotion-14 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- box-sizing: inherit;
- display: block;
- margin: 0;
- background: #FFFFFF;
- padding: .42em 1em;
- font-size: 13px;
- position: relative;
- -webkit-transition: all 200ms ease-out;
- transition: all 200ms ease-out;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- line-height: 20px;
- display: inline;
- text-align: left;
- min-height: 32px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 80px;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- justify-self: flex-end;
- padding-left: 4px;
- padding-right: 4px;
- text-align: center;
-}
-
-.emotion-14:focus {
- box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-14[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.emotion-14:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-14::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-14::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-14:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-14::placeholder {
- color: #999999;
-}
-
-.emotion-16 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- opacity: 0;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- margin-left: 10px;
- height: 14px;
- width: 14px;
-}
-
-.emotion-89 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-89 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-89 svg path {
- fill: currentColor;
-}
-
-.emotion-89:hover {
- background: #f2f2f2;
-}
-
-.emotion-89:active {
- background: #FFFFFF;
-}
-
-.emotion-89:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-89:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-.emotion-100 {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-.emotion-8 {
- overflow-y: hidden;
- overflow-x: auto;
- width: 100%;
- color: #999999;
- width: 100%;
- height: 40px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
- background: #FFFFFF;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- position: relative;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- height: 40px;
-}
-
-.emotion-2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- white-space: nowrap;
- -webkit-flex-basis: auto;
- -ms-flex-preferred-size: auto;
- flex-basis: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
-}
-
-.emotion-2 > * {
- margin-left: 15px;
-}
-
-.emotion-1 {
- overflow: hidden;
-}
-
-.emotion-1:first-of-type {
- margin-left: 0;
-}
-
-.emotion-0 {
- white-space: normal;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- overflow: hidden;
- vertical-align: top;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- padding: 0 15px;
- text-transform: capitalize;
- -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
- transition: color 0.2s linear,border-bottom-color 0.2s linear;
- height: 40px;
- line-height: 12px;
- cursor: pointer;
- background: transparent;
- border: 0 solid transparent;
- border-top: 3px solid transparent;
- border-bottom: 3px solid transparent;
- font-weight: bold;
- font-size: 13px;
- color: #1EA7FD;
- border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
- display: none;
-}
-
-.emotion-0:focus {
- outline: 0 none;
- border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- white-space: nowrap;
- -webkit-flex-basis: auto;
- -ms-flex-preferred-size: auto;
- flex-basis: auto;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- margin-left: 30px;
-}
-
-.emotion-6 > * {
- margin-right: 15px;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-99 {
- display: block;
- position: relative;
- font-size: 13px;
- height: calc(100% - 40px);
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 40px;
- overflow: auto;
-}
-
-.emotion-99 > *:first-child {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- height: 100%;
- overflow: auto;
-}
-
-.emotion-5 {
- height: 40px;
- background: none;
- color: inherit;
- padding: 0;
- cursor: pointer;
- border: 0 solid transparent;
- border-top: 3px solid transparent;
- border-bottom: 3px solid transparent;
- -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
- transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
- outline: 0 none;
- color: #1EA7FD;
-}
-
-.emotion-5 > svg {
- width: 15px;
-}
-
-.emotion-96 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding-top: 20px;
- margin-top: 20px;
- border-top: 1px solid rgba(0,0,0,.1);
- font-weight: 700;
-}
-
-.emotion-96 > * + * {
- margin-left: 20px;
-}
-
-.emotion-91 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
- color: #999999;
-}
-
-.emotion-91 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-91:hover,
-.emotion-91:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-91:hover svg path,
-.emotion-91:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-91:active {
- color: #028ee6;
-}
-
-.emotion-91:active svg path {
- fill: #028ee6;
-}
-
-.emotion-91 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-91 svg path {
- fill: #999999;
-}
-
-.emotion-91:hover {
- color: #666666;
-}
-
-.emotion-91:hover svg path {
- fill: #666666;
-}
-
-.emotion-91:active {
- color: #444444;
-}
-
-.emotion-91:active svg path {
- fill: #444444;
-}
-
-.emotion-98 {
- display: block;
-}
-
-.emotion-97 {
- font-size: 14px;
- padding: 3rem 20px;
- max-width: 600px;
- margin: 0 auto;
-}
-
-.emotion-9 {
- margin-bottom: 20px;
- font-size: 28px;
- font-weight: 900;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
-}
-
-.emotion-88 {
- display: grid;
- grid-template-columns: 1fr;
- grid-auto-rows: minmax(auto,auto);
- margin-bottom: 20px;
-}
-
-.emotion-12 {
- -webkit-align-self: flex-end;
- -ms-flex-item-align: end;
- align-self: flex-end;
- display: grid;
- margin: 10px 0;
- grid-template-columns: 1fr 1fr 12px;
-}
-
-.emotion-12 > *:last-of-type {
- grid-column: 2 / 2;
- justify-self: flex-end;
- grid-row: 1;
-}
-
-.emotion-10 {
- font-weight: 700;
-}
-
-.emotion-17 {
- padding: 6px 0;
- border-top: 1px solid rgba(0,0,0,.1);
- display: grid;
- grid-template-columns: 1fr 1fr 0px;
-}
-
-.emotion-13 {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.emotion-14 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- box-sizing: inherit;
- display: block;
- margin: 0;
- background: #FFFFFF;
- padding: .42em 1em;
- font-size: 13px;
- position: relative;
- -webkit-transition: all 200ms ease-out;
- transition: all 200ms ease-out;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- line-height: 20px;
- display: inline;
- text-align: left;
- min-height: 32px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 80px;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- justify-self: flex-end;
- padding-left: 4px;
- padding-right: 4px;
- text-align: center;
-}
-
-.emotion-14:focus {
- box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-14[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.emotion-14:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-14::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-14::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-14:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-14::placeholder {
- color: #999999;
-}
-
-.emotion-16 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- opacity: 0;
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- margin-left: 10px;
- height: 14px;
- width: 14px;
-}
-
-.emotion-89 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- background: #fafafa;
- color: #333333;
- box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
- border-radius: 4px;
- display: inline;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: visible;
- z-index: 2;
-}
-
-.emotion-89 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-89 svg path {
- fill: currentColor;
-}
-
-.emotion-89:hover {
- background: #f2f2f2;
-}
-
-.emotion-89:active {
- background: #FFFFFF;
-}
-
-.emotion-89:focus {
- box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-89:hover {
- -webkit-transform: none;
- -ms-transform: none;
- transform: none;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Keyboard Shortcuts
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Commands
-
-
- Shortcut
-
-
-
-
- Go full screen
-
-
-
-
-
-
-
-
- Toggle addons
-
-
-
-
-
-
-
-
- Toggle addons orientation
-
-
-
-
-
-
-
-
- Toggle sidebar
-
-
-
-
-
-
-
-
- Toggle canvas toolbar
-
-
-
-
-
-
-
-
- Focus search
-
-
-
-
-
-
-
-
- Focus sidebar
-
-
-
-
-
-
-
-
- Focus canvas
-
-
-
-
-
-
-
-
- Focus addons
-
-
-
-
-
-
-
-
- Previous component
-
-
-
-
-
-
-
-
- Next component
-
-
-
-
-
-
-
-
- Previous story
-
-
-
-
-
-
-
-
- Next story
-
-
-
-
-
-
-
-
- Go to shortcuts page
-
-
-
-
-
-
-
-
- Go to about page
-
-
-
-
-
-
-
-
- Restore defaults
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
-.emotion-0 {
- fill: currentColor;
-}
-
-.emotion-16 {
- min-width: 180px;
- overflow: hidden;
- border-radius: 8px;
-}
-
-.emotion-5 {
- font-size: 12px;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- color: rgba(51,51,51,0.5);
- -webkit-text-decoration: none;
- text-decoration: none;
- cursor: pointer;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- line-height: 18px;
- padding: 7px 15px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.emotion-5 > * + * {
- padding-left: 10px;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
- opacity: 1;
-}
-
-.emotion-1 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- height: 10px;
- width: 10px;
- margin-left: -5px;
- margin-right: -5px;
- display: block;
- color: #1EA7FD;
-}
-
-.emotion-4 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-align: left;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.emotion-4 > * + * {
- padding-left: 10px;
-}
-
-.emotion-3 {
- color: #333333;
- font-weight: 400;
-}
-
-.emotion-6 {
- height: 10px;
- width: 10px;
- margin-left: -5px;
- margin-right: -5px;
- display: block;
-}
-
-.emotion-0 {
- fill: currentColor;
-}
-
-.emotion-16 {
- min-width: 180px;
- overflow: hidden;
- border-radius: 8px;
-}
-
-.emotion-5 {
- font-size: 12px;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- color: rgba(51,51,51,0.5);
- -webkit-text-decoration: none;
- text-decoration: none;
- cursor: pointer;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- line-height: 18px;
- padding: 7px 15px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.emotion-5 > * + * {
- padding-left: 10px;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
- opacity: 1;
-}
-
-.emotion-1 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- height: 10px;
- width: 10px;
- margin-left: -5px;
- margin-right: -5px;
- display: block;
- color: #1EA7FD;
-}
-
-.emotion-4 {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- text-align: left;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
-}
-
-.emotion-4 > * + * {
- padding-left: 10px;
-}
-
-.emotion-3 {
- color: #333333;
- font-weight: 400;
-}
-
-.emotion-6 {
- height: 10px;
- width: 10px;
- margin-left: -5px;
- margin-right: -5px;
- display: block;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-78 {
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
-}
-
-.emotion-77 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-77 .simplebar-track.simplebar-vertical {
- right: 4px;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- padding: 20px 20px 12px;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-8 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-10 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-76 {
- margin-top: 8px;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-11.emotion-11 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-11.emotion-11 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-11.emotion-11 > span {
- border-color: transparent;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
-}
-
-.emotion-19.emotion-19 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-19.emotion-19 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-19.emotion-19 > span {
- border-color: transparent;
-}
-
-.emotion-27 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
-}
-
-.emotion-27.emotion-27 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-27.emotion-27 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-27.emotion-27 > span {
- border-color: transparent;
-}
-
-.emotion-31 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
-}
-
-.emotion-31.emotion-31 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-31.emotion-31 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-31.emotion-31 > span {
- border-color: transparent;
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-78 {
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
-}
-
-.emotion-77 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-77 .simplebar-track.simplebar-vertical {
- right: 4px;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- padding: 20px 20px 12px;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-8 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-10 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-76 {
- margin-top: 8px;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-11.emotion-11 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-11.emotion-11 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-11.emotion-11 > span {
- border-color: transparent;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
-}
-
-.emotion-19.emotion-19 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-19.emotion-19 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-19.emotion-19 > span {
- border-color: transparent;
-}
-
-.emotion-27 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
-}
-
-.emotion-27.emotion-27 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-27.emotion-27 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-27.emotion-27 > span {
- border-color: transparent;
-}
-
-.emotion-31 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
-}
-
-.emotion-31.emotion-31 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-31.emotion-31 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-31.emotion-31 > span {
- border-color: transparent;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-49 {
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
-}
-
-.emotion-48 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-48 .simplebar-track.simplebar-vertical {
- right: 4px;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- padding: 20px 20px 12px;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-14 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-14 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-14 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-14 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-8 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-8:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-8::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-8::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-8:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-8::placeholder {
- color: #999999;
-}
-
-.emotion-8:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-13 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-13 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-13:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-32 + section {
- margin-top: 20px;
-}
-
-.emotion-32:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-15 {
- -webkit-letter-spacing: 0.35em;
- -moz-letter-spacing: 0.35em;
- -ms-letter-spacing: 0.35em;
- letter-spacing: 0.35em;
- text-transform: uppercase;
- font-weight: 900;
- font-size: 11px;
- line-height: 24px;
- color: rgba(51,51,51,0.5);
- margin: 0 20px;
-}
-
-.emotion-20 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-19:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-16 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-18 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-24 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-21 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-23 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-29 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-29:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-28 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-34 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-43 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-49 {
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
-}
-
-.emotion-48 {
- overflow-y: auto;
- height: 100%;
- overflow-x: hidden;
-}
-
-.emotion-48 .simplebar-track.simplebar-vertical {
- right: 4px;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- padding: 20px 20px 12px;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-14 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-14 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-14 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-14 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-8 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-8:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-8::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-8::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-8:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-8::placeholder {
- color: #999999;
-}
-
-.emotion-8:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-13 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-13 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-13:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-32 + section {
- margin-top: 20px;
-}
-
-.emotion-32:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-15 {
- -webkit-letter-spacing: 0.35em;
- -moz-letter-spacing: 0.35em;
- -ms-letter-spacing: 0.35em;
- letter-spacing: 0.35em;
- text-transform: uppercase;
- font-weight: 900;
- font-size: 11px;
- line-height: 24px;
- color: rgba(51,51,51,0.5);
- margin: 0 20px;
-}
-
-.emotion-20 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-19:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-16 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-18 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-24 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-21 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-23 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-29 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-29:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-28 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-34 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-43 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading customBrandImage 1`] = `
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-0 {
- width: auto;
- height: auto;
- display: block;
- max-width: 100%;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-0 {
- width: auto;
- height: auto;
- display: block;
- max-width: 100%;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading linkAndText 1`] = `
-.emotion-3 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-2 {
- fill: currentColor;
-}
-
-.emotion-1 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-1 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-0 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-5 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-4 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-4 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-4 svg path {
- fill: currentColor;
-}
-
-.emotion-4 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-4:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-4:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-3 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-2 {
- fill: currentColor;
-}
-
-.emotion-1 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-1 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-0 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-5 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-4 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-4 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-4 svg path {
- fill: currentColor;
-}
-
-.emotion-4 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-4:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-4:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading longText 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-0 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-4 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-3 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-3 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-3 svg path {
- fill: currentColor;
-}
-
-.emotion-3 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-3:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-3:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-0 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-4 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-3 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-3 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-3 svg path {
- fill: currentColor;
-}
-
-.emotion-3 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-3:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-3:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-
-
-
- My title is way to long to actually fit
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background: #66BF3C;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background: #66BF3C;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading onlyText 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-0 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-4 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-3 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-3 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-3 svg path {
- fill: currentColor;
-}
-
-.emotion-3 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-3:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-3:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-0 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-4 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-3 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-3 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-3 svg path {
- fill: currentColor;
-}
-
-.emotion-3 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-3:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-3:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading standard 1`] = `
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-4 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-3 {
- fill: currentColor;
-}
-
-.emotion-2 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-2 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-1 {
- display: block;
- width: 100%;
- height: 100%;
- color: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-6 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-5 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-5 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-5 svg path {
- fill: currentColor;
-}
-
-.emotion-5 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-5:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarHeading standardNoLink 1`] = `
-.emotion-3 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-2 {
- fill: currentColor;
-}
-
-.emotion-1 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-1 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-5 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-4 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-4 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-4 svg path {
- fill: currentColor;
-}
-
-.emotion-4 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-4:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-4:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-.emotion-3 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-2 {
- fill: currentColor;
-}
-
-.emotion-1 {
- font-size: 14px;
- font-weight: 700;
- margin-right: 10px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- padding-top: 3px;
- padding-bottom: 3px;
- min-height: 28px;
-}
-
-.emotion-1 > * {
- max-width: 100%;
- height: auto;
- width: auto;
- display: block;
-}
-
-.emotion-0 {
- width: auto;
- height: 22px;
- display: block;
-}
-
-.emotion-5 {
- display: inline-block;
- cursor: pointer;
-}
-
-.emotion-4 {
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: 10px 16px;
- position: relative;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- vertical-align: top;
- white-space: nowrap;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 1;
- margin: 0;
- background: transparent;
- font-size: 12px;
- font-weight: 700;
- line-height: 1;
- padding: 9px;
- box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
- color: rgba(51,51,51,0.7);
- background: transparent;
- position: relative;
- overflow: visible;
- padding: 7px;
-}
-
-.emotion-4 svg {
- display: inline-block;
- height: 14px;
- width: 14px;
- vertical-align: top;
- margin-right: 4px;
- margin-top: -1px;
- margin-bottom: -1px;
- pointer-events: none;
-}
-
-.emotion-4 svg path {
- fill: currentColor;
-}
-
-.emotion-4 svg {
- display: block;
- margin: 0;
-}
-
-.emotion-4:hover {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-4:active {
- box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
- color: #333;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
-}
-
-
-
-
-
-
- Storybook
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem component 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem componentExpanded 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem group 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-3.emotion-3 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-3.emotion-3 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-3.emotion-3 > span {
- border-color: transparent;
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-3.emotion-3 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-3.emotion-3 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-3.emotion-3 > span {
- border-color: transparent;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem nestedDepths 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-4 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-14 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-16 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-11:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-18 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-15 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-15:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-19:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-4 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-14 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-16 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-11:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-18 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-15 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-15:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-19:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem story 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem storySelected 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarItem with long name 1`] = `
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-3:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.4);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 1;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.4);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 1;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.4);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 1;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.4);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 1;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
-.emotion-4 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-.emotion-6 > * {
- margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
- margin-top: 0;
-}
-
-.emotion-2 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
-}
-
-.emotion-2 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-2:hover svg path,
-.emotion-2:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-2:active {
- color: #028ee6;
-}
-
-.emotion-2:active svg path {
- fill: #028ee6;
-}
-
-.emotion-2 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-.emotion-4 {
- padding: 30px;
- text-align: center;
- color: #333333;
- font-size: 13px;
-}
-
-.emotion-0 {
- font-weight: 700;
-}
-
-.emotion-6 > * {
- margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
- margin-top: 0;
-}
-
-.emotion-2 {
- display: inline-block;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: #1EA7FD;
-}
-
-.emotion-2 svg path {
- fill: #1EA7FD;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
- cursor: pointer;
- color: #0297f5;
-}
-
-.emotion-2:hover svg path,
-.emotion-2:focus svg path {
- fill: #0297f5;
-}
-
-.emotion-2:active {
- color: #028ee6;
-}
-
-.emotion-2:active svg path {
- fill: #028ee6;
-}
-
-.emotion-2 svg {
- display: inline-block;
- height: 1em;
- width: 1em;
- vertical-align: text-top;
- position: relative;
- bottom: -0.125em;
- margin-right: 0.4em;
-}
-
-
-
-
-
- No stories found
-
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-3.emotion-3 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-3.emotion-3 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-3.emotion-3 > span {
- border-color: transparent;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
-}
-
-.emotion-11.emotion-11 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-11.emotion-11 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-11.emotion-11 > span {
- border-color: transparent;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
-}
-
-.emotion-19.emotion-19 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-19.emotion-19 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-19.emotion-19 > span {
- border-color: transparent;
-}
-
-.emotion-23 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
-}
-
-.emotion-23.emotion-23 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-23.emotion-23 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-23.emotion-23 > span {
- border-color: transparent;
-}
-
-.emotion-69 > * {
- margin-top: 10px;
-}
-
-.emotion-69 > *:first-of-type {
- margin-top: 0;
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-@keyframes animation-0 {
- 0%, 100% {
- opacity: 1;
- }
-
- 50% {
- opacity: .4;
- }
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-0 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-3 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
-}
-
-.emotion-3.emotion-3 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-3.emotion-3 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-3.emotion-3 > span {
- border-color: transparent;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
-}
-
-.emotion-11.emotion-11 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-11.emotion-11 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-11.emotion-11 > span {
- border-color: transparent;
-}
-
-.emotion-19 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
-}
-
-.emotion-19.emotion-19 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-19.emotion-19 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-19.emotion-19 > span {
- border-color: transparent;
-}
-
-.emotion-23 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 54px;
-}
-
-.emotion-23.emotion-23 > svg + span {
- background: #DDDDDD;
-}
-
-.emotion-23.emotion-23 > * {
- -webkit-animation: animation-0 1.5s ease-in-out infinite;
- animation: animation-0 1.5s ease-in-out infinite;
- color: transparent;
- cursor: progress;
-}
-
-.emotion-23.emotion-23 > span {
- border-color: transparent;
-}
-
-.emotion-69 > * {
- margin-top: 10px;
-}
-
-.emotion-69 > *:first-of-type {
- margin-top: 0;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-39 + section {
- margin-top: 20px;
-}
-
-.emotion-39:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-11 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-10 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-10:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-7 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-19 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-12 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-24 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-15 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-15:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-14 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-34 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-9 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-30 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-30:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-41 > * {
- margin-top: 10px;
-}
-
-.emotion-41 > *:first-of-type {
- margin-top: 0;
-}
-
-.emotion-25 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-39 + section {
- margin-top: 20px;
-}
-
-.emotion-39:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-11 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-10 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-10:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-7 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-19 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-12 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-24 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-15 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-15:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-14 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-34 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-9 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-30 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-30:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-41 > * {
- margin-top: 10px;
-}
-
-.emotion-41 > *:first-of-type {
- margin-top: 0;
-}
-
-.emotion-25 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 39px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-
-`;
-
-exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-24 + section {
- margin-top: 20px;
-}
-
-.emotion-24:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-7 {
- -webkit-letter-spacing: 0.35em;
- -moz-letter-spacing: 0.35em;
- -ms-letter-spacing: 0.35em;
- letter-spacing: 0.35em;
- text-transform: uppercase;
- font-weight: 900;
- font-size: 11px;
- line-height: 24px;
- color: rgba(51,51,51,0.5);
- margin: 0 20px;
-}
-
-.emotion-12 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-11:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-8 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-10 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-16 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-13 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-15 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-21 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-21:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-20 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-26 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-35 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-40 > * {
- margin-top: 10px;
-}
-
-.emotion-40 > *:first-of-type {
- margin-top: 0;
-}
-
-.emotion-2 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
-}
-
-.emotion-1 {
- fill: currentColor;
-}
-
-.emotion-6 {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- border-bottom: 1px solid transparent;
- border-bottom-color: rgba(0,0,0,0.2);
- outline: 0;
- position: relative;
- margin: 0 20px 1rem;
-}
-
-.emotion-6 input {
- color: #333333;
- font-size: 13px;
- line-height: 20px;
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: 20px;
-}
-
-.emotion-6 > svg {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- height: 12px;
- width: 12px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- z-index: 1;
- background: transparent;
-}
-
-.emotion-6 > svg path {
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- fill: currentColor;
- opacity: 0.3;
-}
-
-.emotion-0 {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: none;
- box-sizing: inherit;
- display: block;
- outline: none;
- width: 100%;
- margin: 0;
- background: transparent;
- padding: 0;
- font-size: inherit;
-}
-
-.emotion-0:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
- color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
- color: #999999;
-}
-
-.emotion-0::placeholder {
- color: #999999;
-}
-
-.emotion-0:placeholder-shown ~ button {
- opacity: 0;
-}
-
-.emotion-5 {
- border: 0;
- margin: 0;
- padding: 4px;
- -webkit-text-decoration: none;
- text-decoration: none;
- background: rgba(0,0,0,.1);
- border-radius: 1em;
- cursor: pointer;
- opacity: 1;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 2px;
-}
-
-.emotion-5 > svg {
- display: block;
- height: 8px;
- width: 8px;
- color: #333333;
- -webkit-transition: all 150ms ease-out;
- transition: all 150ms ease-out;
-}
-
-.emotion-5:hover {
- background: rgba(0,0,0,0.2);
-}
-
-.emotion-24 + section {
- margin-top: 20px;
-}
-
-.emotion-24:last-of-type {
- margin-bottom: 40px;
-}
-
-.emotion-7 {
- -webkit-letter-spacing: 0.35em;
- -moz-letter-spacing: 0.35em;
- -ms-letter-spacing: 0.35em;
- letter-spacing: 0.35em;
- text-transform: uppercase;
- font-weight: 900;
- font-size: 11px;
- line-height: 24px;
- color: rgba(51,51,51,0.5);
- margin: 0 20px;
-}
-
-.emotion-12 {
- color: inherit;
- display: block;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.emotion-11 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 9px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-11:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-8 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- -webkit-transform: rotateZ(90deg);
- -ms-transform: rotateZ(90deg);
- transform: rotateZ(90deg);
-}
-
-.emotion-10 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #1ea7fd;
-}
-
-.emotion-16 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: default;
- background: #1EA7FD;
- color: #FFFFFF;
- font-weight: 700;
-}
-
-.emotion-13 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
- border-left-color: transparent;
-}
-
-.emotion-15 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
- color: inherit;
-}
-
-.emotion-21 {
- font-size: 13px;
- line-height: 16px;
- padding-top: 4px;
- padding-bottom: 4px;
- padding-right: 20px;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- background: transparent;
- padding-left: 24px;
- cursor: pointer;
- color: #333333;
-}
-
-.emotion-21:hover {
- color: #333333;
- background: rgba(0,0,0,.05);
-}
-
-.emotion-20 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #37d5d3;
-}
-
-.emotion-26 {
- display: block;
- width: 0;
- height: 0;
- margin-right: 6px;
- border-top: 3.5px solid transparent;
- border-bottom: 3.5px solid transparent;
- border-left: 3.5px solid rgba(0,0,0,0.3);
- -webkit-transition: -webkit-transform .1s ease-out;
- -webkit-transition: transform .1s ease-out;
- transition: transform .1s ease-out;
-}
-
-.emotion-35 {
- shape-rendering: inherit;
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- display: block;
- -webkit-flex: none;
- -ms-flex: none;
- flex: none;
- width: 10px;
- height: 10px;
- margin-right: 6px;
- color: #774dd7;
-}
-
-.emotion-40 > * {
- margin-top: 10px;
-}
-
-.emotion-40 > *:first-of-type {
- margin-top: 0;
-}
-
-
-`;
From ff0453400bf86f58278475a05c99dd75e8990182 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith
Date: Mon, 17 Jun 2019 23:51:22 +0200
Subject: [PATCH 115/371] Fix addon api
---
lib/api/src/modules/addons.ts | 26 +++++++++++++++++--------
lib/api/src/tests/addons.test.js | 33 ++++++++++++++++----------------
lib/ui/src/containers/panel.js | 2 +-
3 files changed, 35 insertions(+), 26 deletions(-)
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index 35db70f04758..ce95b9765bde 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -43,10 +43,16 @@ interface Panels {
type StateMerger = (input: S) => S;
+interface StoryInput {
+ parameters: {
+ [parameterName: string]: any;
+ };
+}
+
export interface SubAPI {
getElements: (type: Types) => Collection;
getPanels: () => Collection;
- getStoryPanels: (storyId: string) => Collection;
+ getStoryPanels: () => Collection;
getSelectedPanel: () => string;
setSelectedPanel: (panelName: string) => void;
setAddonState(
@@ -74,17 +80,21 @@ export default ({ provider, store }: Module) => {
const api: SubAPI = {
getElements: type => provider.getElements(type),
getPanels: () => api.getElements(types.PANEL),
- getStoryPanels: storyId => {
- const storyParameters = provider.getParameters(storyId);
- const panels = api.getPanels();
- if (!panels || !storyParameters) {
- return panels;
+ getStoryPanels: () => {
+ const allPanels = api.getPanels();
+ const { storyId, storiesHash } = store.getState();
+ const storyInput = storyId && (storiesHash[storyId] as StoryInput);
+
+ if (!allPanels || !storyInput) {
+ return allPanels;
}
+ const { parameters } = storyInput;
+
const filteredPanels: Collection = {};
- Object.entries(panels).forEach(([id, panel]) => {
+ Object.entries(allPanels).forEach(([id, panel]) => {
const { paramKey } = panel;
- if (paramKey && storyParameters[paramKey] && storyParameters[paramKey].disabled) {
+ if (paramKey && parameters[paramKey] && parameters[paramKey].disabled) {
return;
}
filteredPanels[id] = panel;
diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js
index 95a016a71508..c17c485518ec 100644
--- a/lib/api/src/tests/addons.test.js
+++ b/lib/api/src/tests/addons.test.js
@@ -61,11 +61,7 @@ describe('Addons API', () => {
describe('#getStoryPanels', () => {
it('should return all panels by default', () => {
// given
- const providerWithStoryParameters = {
- ...provider,
- getParameters: () => {},
- };
- const { api } = initAddons({ provider: providerWithStoryParameters, store });
+ const { api } = initAddons({ provider, store });
// when
const filteredPanels = api.getStoryPanels();
@@ -77,21 +73,24 @@ describe('Addons API', () => {
it('should filter disabled addons', () => {
// given
const storyId = 'story 1';
- const providerWithStoryParameters = {
- ...provider,
- getParameters: id => {
- if (id === storyId) {
- return {
- a11y: { disabled: true },
- };
- }
- return null;
- },
+ const storeWithStory = {
+ getState: () => ({
+ storyId,
+ storiesHash: {
+ [storyId]: {
+ parameters: {
+ a11y: { disabled: true },
+ },
+ },
+ },
+ }),
+ setState: jest.fn(),
};
- const { api } = initAddons({ provider: providerWithStoryParameters, store });
+
+ const { api } = initAddons({ provider, store: storeWithStory });
// when
- const filteredPanels = api.getStoryPanels(storyId);
+ const filteredPanels = api.getStoryPanels();
// then
expect(filteredPanels).toEqual({
diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js
index fcf2e7eca281..88821840822d 100644
--- a/lib/ui/src/containers/panel.js
+++ b/lib/ui/src/containers/panel.js
@@ -11,7 +11,7 @@ const createPanelActions = memoize(1)(api => ({
}));
const mapper = ({ state, api }) => ({
- panels: api.getStoryPanels(state.storyId),
+ panels: api.getStoryPanels(),
selectedPanel: api.getSelectedPanel(),
panelPosition: state.layout.panelPosition,
actions: createPanelActions(api),
From 94c04c8f5d629899178c3e435ff51770dd2d2a97 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 10:13:39 +0800
Subject: [PATCH 116/371] Fix duplicated code
---
lib/core/src/client/preview/start.js | 4 ----
1 file changed, 4 deletions(-)
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 0f67ccef3992..5d5733afa1a1 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -157,10 +157,6 @@ export default function start(render, { decorateStory } = {}) {
addons.getChannel().emit(Events.STORY_CHANGED, id);
}
- if (!forceRender && previousKind && previousStory) {
- addons.getChannel().emit(Events.STORY_CHANGED, id);
- }
-
if (viewMode === 'docs') {
const NoDocs = () => No docs found
;
const StoryDocs = (parameters && parameters.docs) || NoDocs;
From 92ac9bad7ea32664c371c16a6024361c5c6a66a3 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 10:37:35 +0800
Subject: [PATCH 117/371] Throw exception if default export lacks title field
---
lib/core/src/client/preview/start.js | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index a9d67eb854eb..12272430c8e3 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -225,13 +225,18 @@ export default function start(render, { decorateStory } = {}) {
const fileExports = req(filename);
// An old-style story file
- if (!(fileExports.default && fileExports.default.title)) {
+ if (!fileExports.default) {
return;
}
- const { default: meta, ...examples } = fileExports;
+ if (!fileExports.default.title) {
+ throw new Error(
+ `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
+ );
+ }
- const kindName = meta.title || meta.displayName;
+ const { default: meta, ...examples } = fileExports;
+ const kindName = meta.title;
if (previousExports[filename]) {
if (previousExports[filename] === fileExports) {
From f081f98ff2d3ec0d48582960563e0eb17948a632 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 10:47:58 +0800
Subject: [PATCH 118/371] Source loader library by @libetl
---
lib/source-loader/package.json | 38 +
.../inject-decorator.test.js.snap | 858 ++++++++++++++++++
.../abstract-syntax-tree/default-options.js | 12 +
.../abstract-syntax-tree/generate-helpers.js | 167 ++++
.../abstract-syntax-tree/inject-decorator.js | 84 ++
.../inject-decorator.test.js | 216 +++++
.../src/abstract-syntax-tree/parse-helpers.js | 159 ++++
.../src/abstract-syntax-tree/parsers/index.js | 20 +
.../parsers/parser-flow.js | 13 +
.../abstract-syntax-tree/parsers/parser-js.js | 21 +
.../abstract-syntax-tree/parsers/parser-ts.js | 21 +
.../abstract-syntax-tree/traverse-helpers.js | 203 +++++
lib/source-loader/src/build.js | 30 +
.../getRidOfUselessFilePrefixes.js | 46 +
.../src/dependencies-lookup/readAsObject.js | 119 +++
lib/source-loader/src/events.js | 2 +
lib/source-loader/src/index.js | 6 +
lib/source-loader/src/preview.js | 92 ++
18 files changed, 2107 insertions(+)
create mode 100644 lib/source-loader/package.json
create mode 100644 lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
create mode 100644 lib/source-loader/src/abstract-syntax-tree/default-options.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/parsers/index.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
create mode 100644 lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
create mode 100644 lib/source-loader/src/build.js
create mode 100644 lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js
create mode 100644 lib/source-loader/src/dependencies-lookup/readAsObject.js
create mode 100644 lib/source-loader/src/events.js
create mode 100644 lib/source-loader/src/index.js
create mode 100644 lib/source-loader/src/preview.js
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
new file mode 100644
index 000000000000..60d4a783a1c4
--- /dev/null
+++ b/lib/source-loader/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "@storybook/source-loader",
+ "version": "5.2.0-alpha.23",
+ "description": "Source loader",
+ "keywords": [
+ "lib",
+ "storybook"
+ ],
+ "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/source-loader",
+ "bugs": {
+ "url": "https://github.com/storybookjs/storybook/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storybookjs/storybook.git",
+ "directory": "lib/source-loader"
+ },
+ "license": "MIT",
+ "main": "dist/index.js",
+ "jsnext:main": "src/index.js",
+ "scripts": {
+ "prepare": "node ../../scripts/prepare.js"
+ },
+ "dependencies": {
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "core-js": "^3.0.1",
+ "estraverse": "^4.2.0",
+ "global": "^4.3.2",
+ "loader-utils": "^1.2.3",
+ "prettier": "^1.16.4",
+ "prop-types": "^15.7.2",
+ "regenerator-runtime": "^0.12.1"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
new file mode 100644
index 000000000000..6cd7c5d832e7
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
@@ -0,0 +1,858 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+ selector: 'storybook-with-ng-content',
+ template: \`
\`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({
+ template: \`This is rendered in ng-content \`,
+ moduleMetadata: {
+ declarations: [WithNgContentComponent],
+ },
+}));
+"
+`;
+
+exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+ value: any,
+};
+
+type Props = {
+ classes: JssClasses,
+ name: string,
+};
+
+class Table extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: undefined,
+ };
+ }
+
+ state: State;
+
+ render() {
+ return ;
+ }
+}
+
+const stories = storiesOf('Table', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__));
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => ));
+"
+`;
+
+exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
+import { Component } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+
+@Component({
+ selector: 'storybook-comp-with-store',
+ template: '{{this.getSotreState()}}
',
+})
+class WithStoreComponent {
+ private store: Store;
+
+ constructor(store: Store) {
+ this.store = store;
+ }
+
+ getSotreState(): string {
+ return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+ }
+}
+
+storiesOf('ngrx|Store', module)
+ .addDecorator(
+ moduleMetadata({
+ imports: [StoreModule.forRoot({})],
+ declarations: [WithStoreComponent],
+ })
+ )
+ .add('With component', () => {
+ return {
+ component: WithStoreComponent,
+ };
+ });"
+`;
+
+exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../components/DocgenButton';
+import FlowTypeButton from '../components/FlowTypeButton';
+import BaseButton from '../components/BaseButton';
+import TableComponent from '../components/TableComponent';
+
+storiesOf('Addons|Info.React Docgen', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .add(
+ 'Comments from PropType declarations',
+ withInfo(
+ 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+ )(() => )
+ )
+ .add(
+ 'Comments from Flow declarations',
+ withInfo(
+ 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+ )(() => )
+ )
+ .add(
+ 'Comments from component declaration',
+ withInfo(
+ 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
+ )(() => )
+ );
+
+const markdownDescription = \`
+#### You can use markdown in your withInfo() description.
+
+Sometimes you might want to manually include some code examples:
+~~~js
+const Button = () => ;
+~~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+\`;
+
+storiesOf('Addons|Info.Markdown', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Displays Markdown in description',
+ withInfo(markdownDescription)(() => )
+);
+
+storiesOf('Addons|Info.Options.inline', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Inlines component inside story',
+ withInfo({
+ text: 'Component should be inlined between description and PropType table',
+ inline: true, // Displays info inline vs click button to view
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.header', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows or hides Info Addon header',
+ withInfo({
+ text: 'The Info Addon header should be hidden',
+ header: false, // Toggles display of header with component name and description
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.source', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows or hides Info Addon source',
+ withInfo({
+ text: 'The Info Addon source section should be hidden',
+ source: false, // Displays the source of story Component
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.propTables', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows additional component prop tables',
+ withInfo({
+ text: 'There should be a prop table added for a component not included in the story',
+ propTables: [FlowTypeButton],
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Exclude component from prop tables',
+ withInfo({
+ text: 'This can exclude extraneous components from being displayed in prop tables.',
+ propTablesExclude: [FlowTypeButton],
+ })(() => (
+
+
+
+
+ ))
+);
+
+storiesOf('Addons|Info.Options.styles', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .add(
+ 'Extend info styles with an object',
+ withInfo({
+ styles: {
+ button: {
+ base: {
+ background: 'purple',
+ },
+ },
+ header: {
+ h1: {
+ color: 'green',
+ },
+ },
+ },
+ })(() => )
+ )
+ .add(
+ 'Full control over styles using a function',
+ withInfo({
+ styles: stylesheet => ({
+ ...stylesheet,
+ header: {
+ ...stylesheet.header,
+ h1: {
+ ...stylesheet.header.h1,
+ color: 'red',
+ },
+ },
+ }),
+ })(() => )
+ );
+
+storiesOf('Addons|Info.Options.TableComponent', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Use a custom component for the table',
+ withInfo({
+ TableComponent,
+ })(() => )
+);
+
+storiesOf('Addons|Info.Decorator', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .addDecorator((story, context) =>
+ withInfo('Info could be used as a global or local decorator as well.')(story)(context)
+ )
+ .add('Use Info as story decorator', () => );
+
+const hoc = WrapComponent => ({ ...props }) => ;
+
+const Input = hoc(() => );
+
+const TextArea = hoc(({ children }) => );
+
+storiesOf('Addons|Info.GitHub issues', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ '#1814',
+ withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
+
+
+
+
+ ))
+);
+"
+`;
+
+exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
+Object {
+ "custom-ng-content--default": Object {
+ "endBody": Object {
+ "col": 2,
+ "line": 15,
+ },
+ "endLoc": Object {
+ "col": 2,
+ "line": 15,
+ },
+ "startBody": Object {
+ "col": 54,
+ "line": 10,
+ },
+ "startLoc": Object {
+ "col": 43,
+ "line": 10,
+ },
+ },
+}
+`;
+
+exports[`inject-decorator positive - angular injects stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+ selector: 'storybook-with-ng-content',
+ template: \`
\`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({
+ template: \`This is rendered in ng-content \`,
+ moduleMetadata: {
+ declarations: [WithNgContentComponent],
+ },
+}));
+"
+`;
+
+exports[`inject-decorator positive - flow calculates "adds" map 1`] = `Object {}`;
+
+exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+ value: any,
+};
+
+type Props = {
+ classes: JssClasses,
+ name: string,
+};
+
+class Table extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: undefined,
+ };
+ }
+
+ state: State;
+
+ render() {
+ return ;
+ }
+}
+
+const stories = storiesOf('Table', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__));
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => ));
+"
+`;
+
+exports[`inject-decorator positive - ts calculates "adds" map 1`] = `Object {}`;
+
+exports[`inject-decorator positive - ts injects stories decorator after the all "storiesOf" functions 1`] = `
+"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
+import { Component } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+
+@Component({
+ selector: 'storybook-comp-with-store',
+ template: '{{this.getSotreState()}}
',
+})
+class WithStoreComponent {
+ private store: Store;
+
+ constructor(store: Store) {
+ this.store = store;
+ }
+
+ getSotreState(): string {
+ return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+ }
+}
+
+storiesOf('ngrx|Store', module)
+ .addDecorator(
+ moduleMetadata({
+ imports: [StoreModule.forRoot({})],
+ declarations: [WithStoreComponent],
+ })
+ )
+ .add('With component', () => {
+ return {
+ component: WithStoreComponent,
+ };
+ });"
+`;
+
+exports[`inject-decorator positive calculates "adds" map 1`] = `
+Object {
+ "addons-info-decorator--use-info-as-story-decorator": Object {
+ "endBody": Object {
+ "col": 73,
+ "line": 137,
+ },
+ "endLoc": Object {
+ "col": 73,
+ "line": 137,
+ },
+ "startBody": Object {
+ "col": 38,
+ "line": 137,
+ },
+ "startLoc": Object {
+ "col": 7,
+ "line": 137,
+ },
+ },
+ "addons-info-github-issues--1814": Object {
+ "endBody": Object {
+ "col": 4,
+ "line": 152,
+ },
+ "endLoc": Object {
+ "col": 4,
+ "line": 152,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 147,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 146,
+ },
+ },
+ "addons-info-markdown--displays-markdown-in-description": Object {
+ "endBody": Object {
+ "col": 96,
+ "line": 44,
+ },
+ "endLoc": Object {
+ "col": 96,
+ "line": 44,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 44,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 43,
+ },
+ },
+ "addons-info-options-header--shows-or-hides-info-addon-header": Object {
+ "endBody": Object {
+ "col": 41,
+ "line": 60,
+ },
+ "endLoc": Object {
+ "col": 41,
+ "line": 60,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 57,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 56,
+ },
+ },
+ "addons-info-options-inline--inlines-component-inside-story": Object {
+ "endBody": Object {
+ "col": 41,
+ "line": 52,
+ },
+ "endLoc": Object {
+ "col": 41,
+ "line": 52,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 49,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 48,
+ },
+ },
+ "addons-info-options-proptables--shows-additional-component-prop-tables": Object {
+ "endBody": Object {
+ "col": 41,
+ "line": 76,
+ },
+ "endLoc": Object {
+ "col": 41,
+ "line": 76,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 73,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 72,
+ },
+ },
+ "addons-info-options-proptablesexclude--exclude-component-from-prop-tables": Object {
+ "endBody": Object {
+ "col": 4,
+ "line": 89,
+ },
+ "endLoc": Object {
+ "col": 4,
+ "line": 89,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 81,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 80,
+ },
+ },
+ "addons-info-options-source--shows-or-hides-info-addon-source": Object {
+ "endBody": Object {
+ "col": 41,
+ "line": 68,
+ },
+ "endLoc": Object {
+ "col": 41,
+ "line": 68,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 65,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 64,
+ },
+ },
+ "addons-info-options-styles--extend-info-styles-with-an-object": Object {
+ "endBody": Object {
+ "col": 43,
+ "line": 108,
+ },
+ "endLoc": Object {
+ "col": 43,
+ "line": 108,
+ },
+ "startBody": Object {
+ "col": 4,
+ "line": 95,
+ },
+ "startLoc": Object {
+ "col": 4,
+ "line": 94,
+ },
+ },
+ "addons-info-options-styles--full-control-over-styles-using-a-function": Object {
+ "endBody": Object {
+ "col": 43,
+ "line": 123,
+ },
+ "endLoc": Object {
+ "col": 43,
+ "line": 123,
+ },
+ "startBody": Object {
+ "col": 4,
+ "line": 112,
+ },
+ "startLoc": Object {
+ "col": 4,
+ "line": 111,
+ },
+ },
+ "addons-info-options-tablecomponent--use-a-custom-component-for-the-table": Object {
+ "endBody": Object {
+ "col": 41,
+ "line": 130,
+ },
+ "endLoc": Object {
+ "col": 41,
+ "line": 130,
+ },
+ "startBody": Object {
+ "col": 2,
+ "line": 128,
+ },
+ "startLoc": Object {
+ "col": 2,
+ "line": 127,
+ },
+ },
+ "addons-info-react-docgen--comments-from-component-declaration": Object {
+ "endBody": Object {
+ "col": 70,
+ "line": 28,
+ },
+ "endLoc": Object {
+ "col": 70,
+ "line": 28,
+ },
+ "startBody": Object {
+ "col": 4,
+ "line": 26,
+ },
+ "startLoc": Object {
+ "col": 4,
+ "line": 25,
+ },
+ },
+ "addons-info-react-docgen--comments-from-flow-declarations": Object {
+ "endBody": Object {
+ "col": 85,
+ "line": 22,
+ },
+ "endLoc": Object {
+ "col": 85,
+ "line": 22,
+ },
+ "startBody": Object {
+ "col": 4,
+ "line": 20,
+ },
+ "startLoc": Object {
+ "col": 4,
+ "line": 19,
+ },
+ },
+ "addons-info-react-docgen--comments-from-proptype-declarations": Object {
+ "endBody": Object {
+ "col": 79,
+ "line": 16,
+ },
+ "endLoc": Object {
+ "col": 79,
+ "line": 16,
+ },
+ "startBody": Object {
+ "col": 4,
+ "line": 14,
+ },
+ "startLoc": Object {
+ "col": 4,
+ "line": 13,
+ },
+ },
+}
+`;
+
+exports[`inject-decorator positive injects stories decorator after the all "storiesOf" functions 1`] = `
+"import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../components/DocgenButton';
+import FlowTypeButton from '../components/FlowTypeButton';
+import BaseButton from '../components/BaseButton';
+import TableComponent from '../components/TableComponent';
+
+storiesOf('Addons|Info.React Docgen', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .add(
+ 'Comments from PropType declarations',
+ withInfo(
+ 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+ )(() => )
+ )
+ .add(
+ 'Comments from Flow declarations',
+ withInfo(
+ 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+ )(() => )
+ )
+ .add(
+ 'Comments from component declaration',
+ withInfo(
+ 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
+ )(() => )
+ );
+
+const markdownDescription = \`
+#### You can use markdown in your withInfo() description.
+
+Sometimes you might want to manually include some code examples:
+~~~js
+const Button = () => ;
+~~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+\`;
+
+storiesOf('Addons|Info.Markdown', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Displays Markdown in description',
+ withInfo(markdownDescription)(() => )
+);
+
+storiesOf('Addons|Info.Options.inline', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Inlines component inside story',
+ withInfo({
+ text: 'Component should be inlined between description and PropType table',
+ inline: true, // Displays info inline vs click button to view
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.header', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows or hides Info Addon header',
+ withInfo({
+ text: 'The Info Addon header should be hidden',
+ header: false, // Toggles display of header with component name and description
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.source', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows or hides Info Addon source',
+ withInfo({
+ text: 'The Info Addon source section should be hidden',
+ source: false, // Displays the source of story Component
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.propTables', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Shows additional component prop tables',
+ withInfo({
+ text: 'There should be a prop table added for a component not included in the story',
+ propTables: [FlowTypeButton],
+ })(() => )
+);
+
+storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Exclude component from prop tables',
+ withInfo({
+ text: 'This can exclude extraneous components from being displayed in prop tables.',
+ propTablesExclude: [FlowTypeButton],
+ })(() => (
+
+
+
+
+ ))
+);
+
+storiesOf('Addons|Info.Options.styles', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .add(
+ 'Extend info styles with an object',
+ withInfo({
+ styles: {
+ button: {
+ base: {
+ background: 'purple',
+ },
+ },
+ header: {
+ h1: {
+ color: 'green',
+ },
+ },
+ },
+ })(() => )
+ )
+ .add(
+ 'Full control over styles using a function',
+ withInfo({
+ styles: stylesheet => ({
+ ...stylesheet,
+ header: {
+ ...stylesheet.header,
+ h1: {
+ ...stylesheet.header.h1,
+ color: 'red',
+ },
+ },
+ }),
+ })(() => )
+ );
+
+storiesOf('Addons|Info.Options.TableComponent', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ 'Use a custom component for the table',
+ withInfo({
+ TableComponent,
+ })(() => )
+);
+
+storiesOf('Addons|Info.Decorator', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+ .addDecorator((story, context) =>
+ withInfo('Info could be used as a global or local decorator as well.')(story)(context)
+ )
+ .add('Use Info as story decorator', () => );
+
+const hoc = WrapComponent => ({ ...props }) => ;
+
+const Input = hoc(() => );
+
+const TextArea = hoc(({ children }) => );
+
+storiesOf('Addons|Info.GitHub issues', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+ '#1814',
+ withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
+
+
+
+
+ ))
+);
+"
+`;
+
+exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = `
+"/* global window */
+/* eslint-disable global-require, import/no-dynamic-require */
+
+import React from 'react';
+
+@Component({
+ selector: 'storybook-comp-with-store',
+ template: '{{this.getSotreState()}}
',
+})
+class WithStoreComponent {
+ private store: Store;
+
+ constructor(store: Store) {
+ this.store = store;
+ }
+
+ getSotreState(): string {
+ return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+ }
+}
+
+/*
+ eslint-disable some kind
+ of multi line ignore, though
+ I'm not sure it's possible.
+*/
+
+import { storiesOf } from '@storybook/react';
+
+/* eslint-disable-line */ const x = 0;
+
+// eslint-disable-line
+storiesOf('Foo', module)
+ .add('bar', () => baz
);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/"
+`;
+
+exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
+"
+
+
+import React from 'react';
+
+
+
+import { storiesOf } from '@storybook/react';
+
+ const x = 0;
+
+
+storiesOf('Foo', module)
+ .add('bar', () => baz
);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/"
+`;
+
+exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
+"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
+while(true) {
+ console.log(\\"it's a kind of magic\\");
+}"
+`;
diff --git a/lib/source-loader/src/abstract-syntax-tree/default-options.js b/lib/source-loader/src/abstract-syntax-tree/default-options.js
new file mode 100644
index 000000000000..65ca9c768a28
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/default-options.js
@@ -0,0 +1,12 @@
+const defaultOptions = {
+ prettierConfig: {
+ printWidth: 100,
+ tabWidth: 2,
+ bracketSpacing: true,
+ trailingComma: 'es5',
+ singleQuote: true,
+ },
+ uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
+};
+
+export default defaultOptions;
diff --git a/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
new file mode 100644
index 000000000000..8a1bc48553f9
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -0,0 +1,167 @@
+import { patchNode } from './parse-helpers';
+import getParser from './parsers';
+import {
+ splitSTORYOF,
+ findAddsMap,
+ findDependencies,
+ splitExports,
+ popParametersObjectFromDefaultExport,
+ findExportsMap as generateExportsMap,
+} from './traverse-helpers';
+
+function isUglyComment(comment, uglyCommentsRegex) {
+ return uglyCommentsRegex.some(regex => regex.test(comment));
+}
+
+function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex }) {
+ let lastIndex = 0;
+ const parts = [source];
+
+ comments
+ .filter(comment => isUglyComment(comment.value.trim(), uglyCommentsRegex))
+ .map(patchNode)
+ .forEach(comment => {
+ parts.pop();
+
+ const start = source.slice(lastIndex, comment.start);
+ const end = source.slice(comment.end);
+
+ parts.push(start, end);
+ lastIndex = comment.end;
+ });
+
+ return parts.join('');
+}
+
+function prettifyCode(source, { prettierConfig, parser, filepath }) {
+ let config = prettierConfig;
+ let foundParser = null;
+ if (parser === 'flow') foundParser = 'flow';
+ if (parser === 'javascript' || /jsx?/.test(parser)) foundParser = 'javascript';
+ if (parser === 'typescript' || /tsx?/.test(parser)) foundParser = 'typescript';
+
+ if (!config.parser) {
+ config = {
+ ...prettierConfig,
+ };
+ } else if (filepath) {
+ config = {
+ ...prettierConfig,
+ filepath,
+ };
+ } else {
+ config = {
+ ...prettierConfig,
+ };
+ }
+
+ try {
+ return getParser(foundParser || 'javascript').format(source, config);
+ } catch (e) {
+ // Can fail when the source is a JSON
+ return source;
+ }
+}
+
+const STORY_DECORATOR_STATEMENT =
+ '.addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))';
+const ADD_PARAMETERS_STATEMENT =
+ '.addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })';
+const IMPORT_DECLARATION_FOR_EXPORTED_STORIES_DECORATOR =
+ 'var addSourceDecorator = require("@storybook/source-loader").addSource;\n';
+const applyExportDecoratorStatement = part =>
+ ` addSourceDecorator(${part}, {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});`;
+
+export function generateSourceWithDecorators(source, ast, withParameters) {
+ const { comments = [] } = ast;
+
+ const partsUsingStoryOfToken = splitSTORYOF(ast, source);
+
+ if (partsUsingStoryOfToken.length > 1) {
+ const newSource = partsUsingStoryOfToken.join(
+ (withParameters ? ADD_PARAMETERS_STATEMENT : '') + STORY_DECORATOR_STATEMENT
+ );
+
+ return {
+ storyOfTokenFound: true,
+ changed: partsUsingStoryOfToken.length > 1,
+ source: newSource,
+ comments,
+ };
+ }
+
+ const partsUsingExports = splitExports(ast, source);
+
+ const newSource =
+ IMPORT_DECLARATION_FOR_EXPORTED_STORIES_DECORATOR +
+ partsUsingExports
+ .map((part, i) => (i % 2 === 0 ? part : applyExportDecoratorStatement(part)))
+ .join('');
+
+ return {
+ exportTokenFound: true,
+ changed: partsUsingExports.length > 1,
+ source: newSource,
+ comments,
+ };
+}
+
+export function generateSourceWithoutDecorators(source, ast) {
+ const { comments = [] } = ast;
+
+ return {
+ changed: true,
+ source,
+ comments,
+ };
+}
+
+export function generateAddsMap(ast, storiesOfIdentifiers) {
+ return findAddsMap(ast, storiesOfIdentifiers);
+}
+
+export function generateStoriesLocationsMap(ast, storiesOfIdentifiers) {
+ const usingAddsMap = generateAddsMap(ast, storiesOfIdentifiers);
+ const { addsMap } = usingAddsMap;
+
+ if (Object.keys(addsMap).length > 0) {
+ return usingAddsMap;
+ }
+ const usingExportsMap = generateExportsMap(ast);
+
+ return usingExportsMap || usingAddsMap;
+}
+
+export function generateDependencies(ast) {
+ return findDependencies(ast);
+}
+
+export function generateStorySource({ source, ...options }) {
+ let storySource = source;
+
+ storySource = generateSourceWithoutUglyComments(storySource, options);
+ storySource = prettifyCode(storySource, options);
+
+ return storySource;
+}
+
+export function generateSourcesInExportedParameters(source, ast, additionalParameters) {
+ const {
+ splicedSource,
+ parametersSliceOfCode,
+ indexWhereToAppend,
+ } = popParametersObjectFromDefaultExport(source, ast);
+ if (indexWhereToAppend !== -1) {
+ const additionalParametersAsJson = JSON.stringify({ storySource: additionalParameters }).slice(
+ 0,
+ -1
+ );
+ const newParameters = `${additionalParametersAsJson},${parametersSliceOfCode.substring(1)}`;
+ const result =
+ splicedSource.substring(0, indexWhereToAppend) +
+ newParameters +
+ splicedSource.substring(indexWhereToAppend);
+ return result;
+ }
+ return source;
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
new file mode 100644
index 000000000000..aa620eee0392
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
@@ -0,0 +1,84 @@
+import defaultOptions from './default-options';
+import getParser from './parsers';
+
+import {
+ generateSourceWithDecorators,
+ generateSourceWithoutDecorators,
+ generateStorySource,
+ generateStoriesLocationsMap,
+ generateDependencies,
+ generateSourcesInExportedParameters,
+} from './generate-helpers';
+
+function extendOptions(source, comments, filepath, options) {
+ return {
+ ...defaultOptions,
+ ...options,
+ source,
+ comments,
+ filepath,
+ };
+}
+
+function inject(source, filepath, options = {}, log = message => {}) {
+ const { injectDecorator = true } = options;
+ const obviouslyNotCode = ['md', 'txt', 'json'].includes(options.parser);
+ let parser = null;
+ try {
+ parser = getParser(options.parser);
+ } catch (e) {
+ log(new Error(`(not fatal, only impacting storysource) Could not load a parser (${e})`));
+ }
+
+ if (obviouslyNotCode || !parser) {
+ return {
+ source,
+ storySource: {},
+ addsMap: {},
+ changed: false,
+ dependencies: [],
+ };
+ }
+ const ast = parser.parse(source);
+
+ const { changed, source: cleanedSource, comments, exportTokenFound } =
+ injectDecorator === true
+ ? generateSourceWithDecorators(source, ast, options.injectParameters)
+ : generateSourceWithoutDecorators(source, ast);
+
+ const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
+ const newAst = parser.parse(storySource);
+ const { dependencies, storiesOfIdentifiers } = generateDependencies(newAst);
+ const { addsMap, idsToFrameworks } = generateStoriesLocationsMap(newAst, storiesOfIdentifiers);
+
+ let newSource = cleanedSource;
+ if (exportTokenFound) {
+ const cleanedSourceAst = parser.parse(cleanedSource);
+ newSource = generateSourcesInExportedParameters(cleanedSource, cleanedSourceAst, {
+ source: storySource,
+ locationsMap: addsMap,
+ });
+ }
+
+ if (!changed && Object.keys(addsMap || {}).length === 0) {
+ return {
+ source: newSource,
+ storySource,
+ addsMap: {},
+ changed,
+ dependencies,
+ idsToFrameworks: idsToFrameworks || {},
+ };
+ }
+
+ return {
+ source: newSource,
+ storySource,
+ addsMap,
+ changed,
+ dependencies,
+ idsToFrameworks: idsToFrameworks || {},
+ };
+}
+
+export default inject;
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
new file mode 100644
index 000000000000..17023390707e
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
@@ -0,0 +1,216 @@
+import fs from 'fs';
+import path from 'path';
+import injectDecorator from './inject-decorator';
+
+const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
+
+describe('inject-decorator', () => {
+ describe('positive', () => {
+ const mockFilePath = './__mocks__/inject-decorator.stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'javascript' }
+ );
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ describe('positive - angular', () => {
+ const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'typescript' }
+ );
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ describe('positive - flow', () => {
+ const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'flow' }
+ );
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ describe('positive - ts', () => {
+ const mockFilePath = './__mocks__/inject-decorator.ts.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'typescript' }
+ );
+
+ it('returns "changed" flag', () => {
+ expect(result.changed).toBeTruthy();
+ });
+
+ it('injects stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+
+ it('calculates "adds" map', () => {
+ expect(result.addsMap).toMatchSnapshot();
+ });
+ });
+
+ describe('stories with ugly comments', () => {
+ const mockFilePath = './__mocks__/inject-decorator.ugly-comments-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'javascript' }
+ );
+
+ it('should delete ugly comments from the generated story source', () => {
+ expect(result.storySource).toMatchSnapshot();
+ });
+ });
+
+ describe('stories with ugly comments in ts', () => {
+ const mockFilePath = './__mocks__/inject-decorator.ts.ugly-comments-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ { parser: 'typescript' }
+ );
+
+ it('should delete ugly comments from the generated story source', () => {
+ expect(result.storySource).toMatchSnapshot();
+ });
+ });
+
+ it('will not change the source when there are no "storiesOf" functions', () => {
+ const mockFilePath = './__mocks__/inject-decorator.no-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath)
+ );
+
+ expect(result.changed).toBeFalsy();
+ expect(result.addsMap).toEqual({});
+ expect(result.source).toMatchSnapshot();
+ });
+
+ describe('injectDecorator option is false', () => {
+ const mockFilePath = './__mocks__/inject-decorator.stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ {
+ injectDecorator: false,
+ parser: 'javascript',
+ }
+ );
+
+ it('does not inject stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+ });
+
+ describe('injectDecorator option is false - angular', () => {
+ const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ {
+ injectDecorator: false,
+ parser: 'typescript',
+ }
+ );
+
+ it('does not inject stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+ });
+
+ describe('injectDecorator option is false - flow', () => {
+ const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ {
+ injectDecorator: false,
+ parser: 'flow',
+ }
+ );
+
+ it('does not inject stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+ });
+
+ describe('injectDecorator option is false - ts', () => {
+ const mockFilePath = './__mocks__/inject-decorator.ts.txt';
+ const source = fs.readFileSync(mockFilePath, 'utf-8');
+ const result = injectDecorator(
+ source,
+ ADD_DECORATOR_STATEMENT,
+ path.resolve(__dirname, mockFilePath),
+ {
+ injectDecorator: false,
+ parser: 'typescript',
+ }
+ );
+
+ it('does not inject stories decorator after the all "storiesOf" functions', () => {
+ expect(result.source).toMatchSnapshot();
+ });
+ });
+});
diff --git a/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
new file mode 100644
index 000000000000..a96ed14b094c
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
@@ -0,0 +1,159 @@
+const { toId } = require('@storybook/router/utils');
+
+const STORIES_OF = 'storiesOf';
+
+function pushParts(source, parts, from, to) {
+ const start = source.slice(from, to);
+ parts.push(start);
+
+ const end = source.slice(to);
+ parts.push(end);
+}
+
+function getKindFromStoryOfNode(object) {
+ if (object.arguments.length < 1) {
+ return '';
+ }
+
+ const kindArgument = object.arguments[0];
+
+ if (kindArgument.type === 'Literal' || kindArgument.type === 'StringLiteral') {
+ return kindArgument.value;
+ }
+
+ if (kindArgument.type === 'TemplateLiteral') {
+ // we can generate template, but it will not be a real value
+ // until the full template compilation. probably won't fix.
+ return '';
+ }
+
+ // other options may include some complex usages.
+ return '';
+}
+
+function findRelatedKind(object) {
+ if (!object || !object.callee) {
+ return '';
+ }
+
+ if (object.callee.name === STORIES_OF) {
+ return getKindFromStoryOfNode(object);
+ }
+
+ return findRelatedKind(object.callee.object);
+}
+
+export function patchNode(node) {
+ if (node.range && node.range.length === 2 && node.start === undefined && node.end === undefined) {
+ const [start, end] = node.range;
+
+ // eslint-disable-next-line no-param-reassign
+ node.start = start;
+ // eslint-disable-next-line no-param-reassign
+ node.end = end;
+ }
+
+ if (!node.range && node.start !== undefined && node.end !== undefined) {
+ // eslint-disable-next-line no-param-reassign
+ node.range = [node.start, node.end];
+ }
+
+ return node;
+}
+
+export function handleExportedName(kind, storyName, node) {
+ const startLoc = {
+ col: node.loc.start.column,
+ line: node.loc.start.line,
+ };
+ const endLoc = {
+ col: node.loc.end.column,
+ line: node.loc.end.line,
+ };
+ return {
+ [toId(kind, storyName)]: {
+ startLoc,
+ endLoc,
+ startBody: startLoc,
+ endBody: endLoc,
+ },
+ };
+}
+
+export function handleADD(node, parent, storiesOfIdentifiers) {
+ if (!node.property || !node.property.name || node.property.name.indexOf('add') !== 0) {
+ return {};
+ }
+
+ const addArgs = parent.arguments;
+
+ if (!addArgs || addArgs.length < 2) {
+ return {};
+ }
+
+ let tmp = node.object;
+
+ while (tmp.callee && tmp.callee.object) {
+ tmp = tmp.callee.object;
+ }
+
+ const framework = tmp.callee && tmp.callee.name && storiesOfIdentifiers[tmp.callee.name];
+
+ const storyName = addArgs[0];
+ const body = addArgs[1];
+ const lastArg = addArgs[addArgs.length - 1];
+
+ if (storyName.type !== 'Literal' && storyName.type !== 'StringLiteral') {
+ // if story name is not literal, it's much harder to extract it
+ return {};
+ }
+
+ const kind = findRelatedKind(node.object) || '';
+ if (kind && storyName.value) {
+ const key = toId(kind, storyName.value);
+ let idToFramework;
+ if (key && framework) {
+ idToFramework = { [key]: framework };
+ }
+
+ return {
+ toAdd: {
+ [key]: {
+ // Debug: code: source.slice(storyName.start, lastArg.end),
+ startLoc: {
+ col: storyName.loc.start.column,
+ line: storyName.loc.start.line,
+ },
+ endLoc: {
+ col: lastArg.loc.end.column,
+ line: lastArg.loc.end.line,
+ },
+ startBody: {
+ col: body.loc.start.column,
+ line: body.loc.start.line,
+ },
+ endBody: {
+ col: body.loc.end.column,
+ line: body.loc.end.line,
+ },
+ },
+ },
+ idToFramework,
+ };
+ }
+ return {};
+}
+
+export function handleSTORYOF(node, parts, source, lastIndex) {
+ if (!node.callee || !node.callee.name || node.callee.name !== STORIES_OF) {
+ return lastIndex;
+ }
+
+ parts.pop();
+ pushParts(source, parts, lastIndex, node.end);
+ return node.end;
+}
+
+export function asImport(node) {
+ return node.source.value;
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/index.js b/lib/source-loader/src/abstract-syntax-tree/parsers/index.js
new file mode 100644
index 000000000000..35a551ba0fb9
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/index.js
@@ -0,0 +1,20 @@
+function getParser(type) {
+ if (type === 'javascript' || /jsx?/.test(type) || !type) {
+ // eslint-disable-next-line global-require
+ return require('./parser-js').default;
+ }
+
+ if (type === 'typescript' || /tsx?/.test(type)) {
+ // eslint-disable-next-line global-require
+ return require('./parser-ts').default;
+ }
+
+ if (type === 'flow') {
+ // eslint-disable-next-line global-require
+ return require('./parser-flow').default;
+ }
+
+ throw new Error(`Parser of type "${type}" is not supported`);
+}
+
+export default getParser;
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
new file mode 100644
index 000000000000..9414659af754
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
@@ -0,0 +1,13 @@
+import parseFlow from 'prettier/parser-flow';
+
+function parse(source) {
+ return parseFlow.parsers.flow.parse(source);
+}
+function format(source) {
+ return parseFlow.parsers.flow.format(source);
+}
+
+export default {
+ parse,
+ format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
new file mode 100644
index 000000000000..98c459aef1d1
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
@@ -0,0 +1,21 @@
+import parseJs from 'prettier/parser-babylon';
+
+function parse(source) {
+ try {
+ return parseJs.parsers.babel.parse(source);
+ } catch (error1) {
+ try {
+ return JSON.stringify(source);
+ } catch (error) {
+ throw error1;
+ }
+ }
+}
+function format(source) {
+ return parseJs.parsers.babel.format(source);
+}
+
+export default {
+ parse,
+ format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
new file mode 100644
index 000000000000..ef4e369bb22a
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
@@ -0,0 +1,21 @@
+import parseTs from 'prettier/parser-typescript';
+
+function parse(source) {
+ try {
+ return parseTs.parsers.typescript.parse(source);
+ } catch (error1) {
+ try {
+ return JSON.stringify(source);
+ } catch (error) {
+ throw error1;
+ }
+ }
+}
+function format(source) {
+ return parseTs.parsers.typescript.format(source);
+}
+
+export default {
+ parse,
+ format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
new file mode 100644
index 000000000000..983afa04f7f3
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
@@ -0,0 +1,203 @@
+import { handleADD, handleSTORYOF, patchNode, handleExportedName } from './parse-helpers';
+
+const estraverse = require('estraverse');
+
+export function splitSTORYOF(ast, source) {
+ let lastIndex = 0;
+ const parts = [source];
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: node => {
+ patchNode(node);
+
+ if (node.type === 'CallExpression') {
+ lastIndex = handleSTORYOF(node, parts, source, lastIndex);
+ }
+ },
+ });
+
+ return parts;
+}
+export function splitExports(ast, source) {
+ const parts = [];
+ let lastIndex = 0;
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: node => {
+ patchNode(node);
+ if (
+ node.type === 'ExportNamedDeclaration' &&
+ node.declaration &&
+ node.declaration.declarations &&
+ node.declaration.declarations.length === 1 &&
+ node.declaration.declarations[0].type === 'VariableDeclarator' &&
+ node.declaration.declarations[0].id &&
+ node.declaration.declarations[0].id.name &&
+ node.declaration.declarations[0].init &&
+ ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
+ node.declaration.declarations[0].init.type
+ )
+ ) {
+ const functionNode = node.declaration.declarations[0].init;
+ parts.push(source.substring(lastIndex, functionNode.start - 1));
+ parts.push(source.substring(functionNode.start, functionNode.end));
+ lastIndex = functionNode.end;
+ }
+ },
+ });
+
+ if (source.length > lastIndex + 1) parts.push(source.substring(lastIndex + 1));
+ if (parts.length === 1) return [source];
+ return parts;
+}
+
+export function findAddsMap(ast, storiesOfIdentifiers) {
+ const addsMap = {};
+ const idsToFrameworks = {};
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: (node, parent) => {
+ patchNode(node);
+
+ if (node.type === 'MemberExpression') {
+ const { toAdd, idToFramework } = handleADD(node, parent, storiesOfIdentifiers);
+ Object.assign(addsMap, toAdd);
+ Object.assign(idsToFrameworks, idToFramework);
+ }
+ },
+ });
+
+ return { addsMap, idsToFrameworks };
+}
+
+// Handle cases like:
+// export const withText = () => ;
+// withText.title = 'with text';
+function findStoryTitle(storyVar, ast) {
+ const titleAssignment = ast.program.body.find(
+ d =>
+ d.type === 'ExpressionStatement' &&
+ d.expression &&
+ d.expression.type === 'AssignmentExpression' &&
+ d.expression.left &&
+ d.expression.left.object &&
+ d.expression.left.object.type === 'Identifier' &&
+ d.expression.left.object.name === storyVar &&
+ d.expression.right &&
+ d.expression.right.type === 'StringLiteral'
+ );
+ return titleAssignment && titleAssignment.expression.right.value;
+}
+
+export function findExportsMap(ast) {
+ const addsMap = {};
+ const idsToFrameworks = {};
+ const metaDeclaration =
+ ast &&
+ ast.program &&
+ ast.program.body &&
+ ast.program.body.find(
+ d =>
+ d.type === 'ExportDefaultDeclaration' &&
+ d.declaration.type === 'ObjectExpression' &&
+ (d.declaration.properties || []).length
+ );
+
+ const titleProperty =
+ metaDeclaration &&
+ metaDeclaration.declaration &&
+ metaDeclaration.declaration.properties.find(p => p.key && p.key.name === 'title');
+
+ if (!titleProperty) {
+ return { addsMap, idsToFrameworks };
+ }
+ const title = titleProperty.value.value;
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: node => {
+ patchNode(node);
+ if (
+ node.type === 'ExportNamedDeclaration' &&
+ node.declaration &&
+ node.declaration.declarations &&
+ node.declaration.declarations.length === 1 &&
+ node.declaration.declarations[0].type === 'VariableDeclarator' &&
+ node.declaration.declarations[0].id &&
+ node.declaration.declarations[0].id.name &&
+ node.declaration.declarations[0].init &&
+ ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
+ node.declaration.declarations[0].init.type
+ )
+ ) {
+ let storyName = node.declaration.declarations[0].id.name;
+ storyName = findStoryTitle(storyName, ast) || storyName;
+ const toAdd = handleExportedName(title, storyName, node.declaration.declarations[0].init);
+ Object.assign(addsMap, toAdd);
+ }
+ },
+ });
+ return { addsMap, idsToFrameworks };
+}
+
+export function findDependencies(ast) {
+ const dependencies = [];
+ const storiesOfIdentifiers = {};
+
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: node => {
+ patchNode(node);
+
+ if (node.type === 'ImportDeclaration') {
+ const candidateSpecifier = (node.specifiers || []).find(
+ s => (s.imported || {}).name === 'storiesOf'
+ );
+ if (node.source.value.startsWith('@storybook/') && candidateSpecifier) {
+ Object.assign(storiesOfIdentifiers, {
+ [candidateSpecifier.local.name]: node.source.value,
+ });
+ }
+ dependencies.push(node.source.value);
+ }
+ },
+ });
+ return { dependencies, storiesOfIdentifiers };
+}
+
+export function popParametersObjectFromDefaultExport(source, ast) {
+ let splicedSource = source;
+ let parametersSliceOfCode = '';
+ let indexWhereToAppend = -1;
+ estraverse.traverse(ast, {
+ fallback: 'iteration',
+ enter: node => {
+ patchNode(node);
+
+ if (
+ node.type === 'ExportDefaultDeclaration' &&
+ node.declaration.type === 'ObjectExpression' &&
+ (node.declaration.properties || []).length
+ ) {
+ const parametersProperty = node.declaration.properties.find(
+ p => p.key.name === 'parameters' && p.value.type === 'ObjectExpression'
+ );
+
+ splicedSource =
+ source.substring(0, parametersProperty.value.start) +
+ source.substring(parametersProperty.value.end + 1);
+
+ parametersSliceOfCode = source.substring(
+ parametersProperty.value.start,
+ parametersProperty.value.end
+ );
+
+ indexWhereToAppend = parametersProperty.value.start;
+ }
+ },
+ });
+ return { splicedSource, parametersSliceOfCode, indexWhereToAppend };
+}
diff --git a/lib/source-loader/src/build.js b/lib/source-loader/src/build.js
new file mode 100644
index 000000000000..685077cd4293
--- /dev/null
+++ b/lib/source-loader/src/build.js
@@ -0,0 +1,30 @@
+import { readStory } from './dependencies-lookup/readAsObject';
+import { getRidOfUselessFilePrefixes } from './dependencies-lookup/getRidOfUselessFilePrefixes';
+
+export function transform(inputSource) {
+ return readStory(this, inputSource)
+ .then(getRidOfUselessFilePrefixes)
+ .then(
+ ({
+ prefix,
+ resource,
+ source,
+ sourceJson,
+ addsMap,
+ dependencies,
+ localDependencies,
+ idsToFrameworks,
+ }) => `
+ var withSourceLoader = require('@storybook/source-loader').withSource;
+ var __SOURCE_PREFIX__ = "${prefix.replace(/\\([^\\ ])/g, '\\\\$1')}";
+ var __STORY__ = ${sourceJson};
+ var __ADDS_MAP__ = ${JSON.stringify(addsMap)};
+ var __MAIN_FILE_LOCATION__ = ${JSON.stringify(resource)};
+ var __MODULE_DEPENDENCIES__ = ${JSON.stringify(dependencies)};
+ var __LOCAL_DEPENDENCIES__ = ${JSON.stringify(localDependencies)};
+ var __IDS_TO_FRAMEWORKS__ = ${JSON.stringify(idsToFrameworks)};
+
+ ${source}
+ `
+ );
+}
diff --git a/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js b/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js
new file mode 100644
index 000000000000..1f0ca22ce8e1
--- /dev/null
+++ b/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js
@@ -0,0 +1,46 @@
+import path from 'path';
+
+function commonDir(...resources) {
+ const firstResource = (resources[0] || '').split(path.sep);
+ let i = 1;
+ while (
+ i < firstResource.length &&
+ // eslint-disable-next-line no-loop-func
+ resources.every(resource => resource.startsWith(firstResource.slice(0, i).join(path.sep)))
+ ) {
+ i += 1;
+ }
+ return firstResource.slice(0, i - 1).join(path.sep);
+}
+
+export function getRidOfUselessFilePrefixes({
+ resource,
+ source,
+ sourceJson,
+ addsMap,
+ dependencies,
+ localDependencies,
+ idsToFrameworks,
+}) {
+ const commondir = commonDir(resource, ...Object.keys(localDependencies || {}));
+ return {
+ prefix: commondir,
+ source,
+ sourceJson,
+ addsMap,
+ dependencies,
+ idsToFrameworks,
+ resource:
+ commondir === resource
+ ? '/index.js'
+ : resource.substring(commondir.length).replace(path.sep === '\\' ? /\\/g : /\//g, '/'),
+ localDependencies: Object.assign(
+ {},
+ ...Object.entries(localDependencies || {}).map(([depFileName, dependency]) => ({
+ [depFileName
+ .substring(commondir.length)
+ .replace(new RegExp(path.sep === '\\' ? /\\/g : /\//g, 'g'), '/')]: dependency,
+ }))
+ ),
+ };
+}
diff --git a/lib/source-loader/src/dependencies-lookup/readAsObject.js b/lib/source-loader/src/dependencies-lookup/readAsObject.js
new file mode 100644
index 000000000000..4ab9f83d8b8b
--- /dev/null
+++ b/lib/source-loader/src/dependencies-lookup/readAsObject.js
@@ -0,0 +1,119 @@
+import { getOptions } from 'loader-utils';
+import path from 'path';
+import injectDecorator from '../abstract-syntax-tree/inject-decorator';
+
+function extractDependenciesFrom(tree) {
+ return !Object.entries(tree || {}).length
+ ? []
+ : Object.entries(tree)
+ .map(([, value]) =>
+ (value.dependencies || []).concat(extractDependenciesFrom(value.localDependencies))
+ )
+ .reduce((acc, value) => acc.concat(value), []);
+}
+
+function extractLocalDependenciesFrom(tree) {
+ return Object.assign(
+ {},
+ ...Object.entries(tree || {}).map(([thisPath, value]) =>
+ Object.assign(
+ { [thisPath]: { code: value.source || value.code } },
+ extractLocalDependenciesFrom(value.localDependencies)
+ )
+ )
+ );
+}
+
+function readAsObject(classLoader, inputSource, mainFile) {
+ const options = getOptions(classLoader) || {};
+ const result = injectDecorator(
+ inputSource,
+ classLoader.resourcePath,
+ {
+ ...options,
+ parser: options.parser || classLoader.extension,
+ },
+ classLoader.emitWarning.bind(classLoader)
+ );
+
+ const sourceJson = JSON.stringify(result.storySource || inputSource)
+ .replace(/\u2028/g, '\\u2028')
+ .replace(/\u2029/g, '\\u2029');
+
+ const addsMap = result.addsMap || {};
+ const dependencies = result.dependencies || [];
+ const source = mainFile ? result.source : inputSource;
+ const idsToFrameworks = result.idsToFrameworks || {};
+ const resource = classLoader.resourcePath || classLoader.resource;
+
+ const moduleDependencies = (result.dependencies || []).filter(d => d[0] === '.' || d[0] === '/');
+ const workspaceFileNames = moduleDependencies.map(d => path.join(path.dirname(resource), d));
+
+ return Promise.all(
+ workspaceFileNames.map(
+ d =>
+ new Promise(resolve =>
+ classLoader.loadModule(d, (err1, compiledSource, sourceMap, theModule) => {
+ if (err1) {
+ classLoader.emitError(err1);
+ }
+ classLoader.fs.readFile(theModule.resource, (err2, dependencyInputData) => {
+ if (err2) {
+ classLoader.emitError(err2);
+ }
+ resolve({
+ d,
+ err: err1 || err2,
+ inputSource: dependencyInputData.toString(),
+ compiledSource,
+ sourceMap,
+ theModule,
+ });
+ });
+ })
+ )
+ )
+ )
+ .then(data =>
+ Promise.all(
+ data.map(({ inputSource: dependencyInputSource, theModule }) =>
+ readAsObject(
+ Object.assign({}, classLoader, {
+ resourcePath: theModule.resourcePath,
+ resource: theModule.resource,
+ extension: (theModule.resource || '').split('.').slice(-1)[0],
+ }),
+ dependencyInputSource
+ )
+ )
+ ).then(moduleObjects =>
+ Object.assign(
+ {},
+ ...moduleObjects.map(asObject => ({
+ [asObject.resource]: asObject,
+ }))
+ )
+ )
+ )
+ .then(localDependencies => ({
+ resource,
+ source,
+ sourceJson,
+ addsMap,
+ idsToFrameworks,
+ dependencies: dependencies
+ .concat(extractDependenciesFrom(localDependencies))
+ .filter(d => d[0] !== '.' && d[0] !== '/')
+ .map(d => (d[0] === '@' ? `${d.split('/')[0]}/${d.split('/')[1]}` : d.split('/')[0])),
+ localDependencies: Object.assign(
+ ...Object.entries(localDependencies).map(([name, value]) => ({
+ [name]: { code: value.source },
+ })),
+ extractLocalDependenciesFrom(localDependencies)
+ ),
+ }));
+}
+
+export function readStory(classLoader, inputSource) {
+ return readAsObject(classLoader, inputSource, true);
+}
diff --git a/lib/source-loader/src/events.js b/lib/source-loader/src/events.js
new file mode 100644
index 000000000000..ebeb7da51bde
--- /dev/null
+++ b/lib/source-loader/src/events.js
@@ -0,0 +1,2 @@
+export const ADDON_ID = 'storybook/source-loader';
+export const STORY_EVENT_ID = `${ADDON_ID}/set`;
diff --git a/lib/source-loader/src/index.js b/lib/source-loader/src/index.js
new file mode 100644
index 000000000000..bc39d9467511
--- /dev/null
+++ b/lib/source-loader/src/index.js
@@ -0,0 +1,6 @@
+import { transform } from './build';
+
+export { STORY_EVENT_ID } from './events';
+export { addSource, withSource } from './preview';
+
+export default transform;
diff --git a/lib/source-loader/src/preview.js b/lib/source-loader/src/preview.js
new file mode 100644
index 000000000000..55f2df746a25
--- /dev/null
+++ b/lib/source-loader/src/preview.js
@@ -0,0 +1,92 @@
+import addons from '@storybook/addons';
+import { STORY_EVENT_ID } from './events';
+
+const getLocation = (context, locationsMap) => locationsMap[context.id];
+
+function sendEvent(
+ context,
+ source,
+ locationsMap,
+ mainFileLocation,
+ dependencies,
+ localDependencies,
+ prefix,
+ idsToFrameworks
+) {
+ const channel = addons.getChannel();
+ const currentLocation = getLocation(context, locationsMap);
+
+ channel.emit(STORY_EVENT_ID, {
+ edition: {
+ source,
+ mainFileLocation,
+ dependencies,
+ localDependencies,
+ prefix,
+ idsToFrameworks,
+ },
+ story: {
+ kind: context.kind,
+ story: context.story,
+ },
+ location: {
+ currentLocation,
+ locationsMap,
+ },
+ });
+}
+
+export function addSource(story, sourceContext) {
+ const {
+ __STORY__: source,
+ __ADDS_MAP__: locationsMap = {},
+ __MAIN_FILE_LOCATION__: mainFileLocation = '/index.js',
+ __MODULE_DEPENDENCIES__: dependencies = [],
+ __LOCAL_DEPENDENCIES__: localDependencies = {},
+ __SOURCE_PREFIX__: prefix,
+ __IDS_TO_FRAMEWORKS__: idsToFrameworks,
+ } = sourceContext;
+ const decorated = function(context) {
+ sendEvent(
+ context,
+ source,
+ locationsMap,
+ mainFileLocation,
+ dependencies,
+ localDependencies,
+ prefix,
+ idsToFrameworks
+ );
+ if (typeof story === 'function') {
+ return story();
+ }
+ return story;
+ };
+ decorated.storyData = (story || {}).storyData;
+ decorated.title = (story || {}).title;
+ return decorated;
+}
+
+export function withSource(
+ source,
+ locationsMap = {},
+ mainFileLocation = '/index.js',
+ dependencies = [],
+ localDependencies = {},
+ prefix,
+ idsToFrameworks
+) {
+ return (story, context) => {
+ sendEvent(
+ context,
+ source,
+ locationsMap,
+ mainFileLocation,
+ dependencies,
+ localDependencies,
+ prefix,
+ idsToFrameworks
+ );
+ return story();
+ };
+}
From a9dbf93b8dcd8ddf43c5e6536c7e98feb5233102 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 11:14:14 +0800
Subject: [PATCH 119/371] Update snapshots
---
.../addon-docs.stories.storyshot | 7 +++
.../__snapshots__/preview.stories.storyshot | 53 ++-----------------
2 files changed, 11 insertions(+), 49 deletions(-)
create mode 100644 examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
diff --git a/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
new file mode 100644
index 000000000000..e7ee2efa9cd9
--- /dev/null
+++ b/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Docs default 1`] = `
+
+ Click the docs tab to see the docs
+
+`;
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
index 72ce88ac119e..728662d428f4 100644
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -347,7 +347,7 @@ Array [
allowfullscreen=""
id="storybook-preview-iframe"
scrolling="yes"
- src="http://example.com?id=string"
+ src="http://example.com?id=string&viewMode=story"
title="string"
/>
@@ -403,7 +403,7 @@ Array [
margin-left: 0;
}
-.emotion-2 {
+.emotion-0 {
white-space: normal;
display: -webkit-inline-box;
display: -webkit-inline-flex;
@@ -439,51 +439,6 @@ Array [
border-bottom-color: transparent;
}
-.emotion-2:empty {
- display: none;
-}
-
-.emotion-2:focus {
- outline: 0 none;
- border-bottom-color: #1EA7FD;
-}
-
-.emotion-0 {
- white-space: normal;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- overflow: hidden;
- vertical-align: top;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- padding: 0 15px;
- text-transform: capitalize;
- -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
- transition: color 0.2s linear,border-bottom-color 0.2s linear;
- height: 40px;
- line-height: 12px;
- cursor: pointer;
- background: transparent;
- border: 0 solid transparent;
- border-top: 3px solid transparent;
- border-bottom: 3px solid transparent;
- font-weight: bold;
- font-size: 13px;
- color: #1EA7FD;
- border-bottom-color: #1EA7FD;
-}
-
.emotion-0:empty {
display: none;
}
@@ -644,7 +599,7 @@ Array [
href="/?path=/info/string"
>
Notes
@@ -835,7 +790,7 @@ Array [
allowfullscreen=""
id="storybook-preview-iframe"
scrolling="yes"
- src="http://example.com?id=string"
+ src="http://example.com?id=string&viewMode=story"
title="string"
/>
From fcbff29ffdb6dcd6b025a031851560d13432cc98 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 13 Jun 2019 00:50:44 +0200
Subject: [PATCH 120/371] CHANGE versions again, sorry, CLI tests use published
version, we should really fix that!
---
addons/a11y/package.json | 14 +-
addons/actions/package.json | 12 +-
addons/backgrounds/package.json | 14 +-
addons/centered/package.json | 2 +-
addons/contexts/package.json | 10 +-
addons/cssresources/package.json | 10 +-
addons/design-assets/package.json | 14 +-
addons/events/package.json | 8 +-
addons/google-analytics/package.json | 6 +-
addons/graphql/package.json | 6 +-
addons/info/package.json | 10 +-
addons/jest/package.json | 12 +-
addons/knobs/package.json | 12 +-
addons/links/package.json | 8 +-
addons/notes/package.json | 16 +-
addons/ondevice-actions/package.json | 8 +-
addons/ondevice-backgrounds/package.json | 4 +-
addons/ondevice-knobs/package.json | 8 +-
addons/ondevice-notes/package.json | 4 +-
addons/options/package.json | 4 +-
addons/queryparams/package.json | 14 +-
.../storyshots/storyshots-core/package.json | 4 +-
.../storyshots-puppeteer/package.json | 8 +-
addons/storysource/package.json | 10 +-
addons/viewport/package.json | 12 +-
app/angular/package.json | 6 +-
app/ember/package.json | 4 +-
app/html/package.json | 4 +-
app/marko/package.json | 4 +-
app/mithril/package.json | 4 +-
app/polymer/package.json | 4 +-
app/preact/package.json | 4 +-
app/rax/package.json | 4 +-
app/react-native-server/package.json | 14 +-
app/react-native/package.json | 12 +-
app/react/package.json | 6 +-
app/riot/package.json | 4 +-
app/svelte/package.json | 4 +-
app/vue/package.json | 4 +-
dev-kits/addon-parameter/package.json | 14 +-
dev-kits/addon-roundtrip/package.json | 14 +-
docs/package.json | 4 +-
docs/src/versions/latest.json | 2 +-
.../crna-kitchen-sink/package.json | 18 +-
examples/angular-cli/package.json | 28 +-
examples/cra-kitchen-sink/package.json | 34 +-
examples/cra-react15/package.json | 10 +-
examples/cra-ts-kitchen-sink/package.json | 14 +-
examples/dev-kits/package.json | 18 +-
examples/ember-cli/package.json | 26 +-
examples/html-kitchen-sink/package.json | 36 +-
examples/marko-cli/package.json | 16 +-
examples/mithril-kitchen-sink/package.json | 28 +-
examples/official-storybook/package.json | 54 +--
examples/polymer-cli/package.json | 22 +-
examples/preact-kitchen-sink/package.json | 30 +-
examples/rax-kitchen-sink/package.json | 34 +-
examples/riot-kitchen-sink/package.json | 28 +-
examples/svelte-kitchen-sink/package.json | 28 +-
examples/vue-kitchen-sink/package.json | 30 +-
lerna.json | 2 +-
lib/addons/package.json | 8 +-
lib/api/package.json | 12 +-
lib/channel-postmessage/package.json | 6 +-
lib/channel-websocket/package.json | 4 +-
lib/channels/package.json | 2 +-
lib/cli/package.json | 58 +--
lib/client-api/package.json | 11 +-
...{client_api.test.js => client_api.test.ts} | 0
.../src/{client_api.js => client_api.ts} | 20 +-
.../src/{config_api.js => config_api.ts} | 42 ++-
lib/client-api/src/{index.js => index.ts} | 0
.../src/{pathToId.js => pathToId.ts} | 2 +-
.../{pathToid.test.js => pathToid.test.ts} | 0
.../src/{queryparams.js => queryparams.ts} | 3 +-
...tory_store.test.js => story_store.test.ts} | 0
.../src/{story_store.js => story_store.ts} | 99 +++--
lib/client-api/src/subscriptions_store.js | 34 --
...re.test.js => subscriptions_store.test.ts} | 2 +-
lib/client-api/src/subscriptions_store.ts | 34 ++
lib/client-api/src/types.ts | 355 ++++++++++++++++++
lib/client-api/src/typings.d.ts | 1 +
lib/client-api/tsconfig.json | 8 +
lib/client-logger/package.json | 2 +-
lib/codemod/package.json | 2 +-
lib/components/package.json | 6 +-
lib/core-events/package.json | 2 +-
lib/core/package.json | 20 +-
lib/node-logger/package.json | 2 +-
lib/router/package.json | 2 +-
lib/theming/package.json | 4 +-
lib/ui/package.json | 16 +-
package.json | 2 +-
93 files changed, 1001 insertions(+), 556 deletions(-)
rename lib/client-api/src/{client_api.test.js => client_api.test.ts} (100%)
rename lib/client-api/src/{client_api.js => client_api.ts} (92%)
rename lib/client-api/src/{config_api.js => config_api.ts} (73%)
rename lib/client-api/src/{index.js => index.ts} (100%)
rename lib/client-api/src/{pathToId.js => pathToId.ts} (77%)
rename lib/client-api/src/{pathToid.test.js => pathToid.test.ts} (100%)
rename lib/client-api/src/{queryparams.js => queryparams.ts} (85%)
rename lib/client-api/src/{story_store.test.js => story_store.test.ts} (100%)
rename lib/client-api/src/{story_store.js => story_store.ts} (75%)
delete mode 100644 lib/client-api/src/subscriptions_store.js
rename lib/client-api/src/{subscriptions_store.test.js => subscriptions_store.test.ts} (99%)
create mode 100644 lib/client-api/src/subscriptions_store.ts
create mode 100644 lib/client-api/src/types.ts
create mode 100644 lib/client-api/src/typings.d.ts
create mode 100644 lib/client-api/tsconfig.json
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index f6c9dabf6128..6462f86c1a86 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@@ -26,12 +26,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"axe-core": "^3.2.2",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 670f225bf37e..9231d6135f48 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 3e7be73e5979..273d598a0d18 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -25,12 +25,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",
diff --git a/addons/centered/package.json b/addons/centered/package.json
index f5a9cb21aaf9..da975b3c42a3 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index 24751544e9b5..4796b46bb4f5 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Addon Contexts",
"keywords": [
"storybook",
@@ -28,10 +28,10 @@
"dev:check-types": "tsc --noEmit"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0"
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23"
},
"peerDependencies": {
"global": "*",
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index aa17a9af4837..2acdafdd1736 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@@ -25,10 +25,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 7d48245248f6..659b71f40534 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/events/package.json b/addons/events/package.json
index bb6cd5d43dcc..9857a865a34a 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@@ -24,9 +24,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"prop-types": "^15.7.2",
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 54e32ed12cf0..8597020c20ff 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index 4c88b163dca3..e4a38145ee88 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@@ -22,8 +22,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.13.0",
diff --git a/addons/info/package.json b/addons/info/package.json
index 775e80c0b4fd..1dd2b8e3a6fd 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 254d62ceba2a..3997f1a073d1 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index c4b0525751ed..0d282c2187dc 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@@ -22,11 +22,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"escape-html": "^1.0.3",
diff --git a/addons/links/package.json b/addons/links/package.json
index 04ff1dc4dbc0..520f10cb7faf 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@@ -22,9 +22,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/addons/notes/package.json b/addons/notes/package.json
index d5cbe7a5e076..acf676981449 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@@ -23,13 +23,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.3",
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index 5bdbcdaa5136..e1c5743b8664 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@@ -19,13 +19,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^2.5.7",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0"
+ "@storybook/addon-actions": "5.2.0-alpha.23"
},
"peerDependencies": {
"@storybook/addon-actions": "*",
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 37ea02fb9750..fb008630355a 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index 2ed70641c0dd..fbab2758ad0f 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",
@@ -32,7 +32,7 @@
"react-native-switch": "^1.5.0"
},
"peerDependencies": {
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
"react": "*",
"react-native": "*"
},
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index db042a2c85c2..2f83a8ae86ad 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@@ -20,7 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"
diff --git a/addons/options/package.json b/addons/options/package.json
index 4f7442a31f2a..c16a073f1954 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Options addon for storybook",
"keywords": [
"addon",
@@ -22,7 +22,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 12d85468efb8..854adf15c508 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@@ -23,12 +23,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index 80105b9f0e6b..fd0354d15b3d 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@@ -25,7 +25,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index e2da7555ea21..10142f3faa38 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Image snappshots addition to StoryShots base on puppeteer",
"keywords": [
"addon",
@@ -22,15 +22,15 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"puppeteer": "^1.12.2",
"regenerator-runtime": "^0.12.1"
},
"peerDependencies": {
- "@storybook/addon-storyshots": "5.2.0-unreleased.0"
+ "@storybook/addon-storyshots": "5.2.0-alpha.23"
},
"publishConfig": {
"access": "public"
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index c7e83d29e257..5acbe8de1a9e 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@@ -22,10 +22,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 910212986952..a49570604932 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@@ -21,11 +21,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
diff --git a/app/angular/package.json b/app/angular/package.json
index 8d3ea8c6354b..a20e71f389b6 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,8 +26,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
"angular2-template-loader": "^0.6.2",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.4",
diff --git a/app/ember/package.json b/app/ember/package.json
index 3d6f0a8fa537..462b200a39a6 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@@ -24,7 +24,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/html/package.json b/app/html/package.json
index e42de31509f5..c59d4a049e22 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/marko/package.json b/app/marko/package.json
index f5ff0d84a975..324ab8edded0 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 06035b7e77dc..732e6ad3ee8c 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index 4dfcb425587f..9904ee959114 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"@webcomponents/webcomponentsjs": "^1.2.0",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
diff --git a/app/preact/package.json b/app/preact/package.json
index 1a554163b296..c673df82f16e 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -27,7 +27,7 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/rax/package.json b/app/rax/package.json
index 16a90ded1ce1..f76c26c8a9fc 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"storybook",
@@ -28,7 +28,7 @@
},
"dependencies": {
"babel-preset-rax": "^1.0.0-beta.0",
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.2",
"global": "^4.3.2",
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index f49bcc32959c..17acc5504495 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
"commander": "^2.19.0",
"global": "^4.3.2",
"react": "^16.6.0",
diff --git a/app/react-native/package.json b/app/react-native/package.json
index 2f65f177c9d8..75e7cbf73b75 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -23,11 +23,11 @@
},
"dependencies": {
"@emotion/native": "^10.0.10",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"react-native-swipe-gestures": "^1.0.3",
"rn-host-detect": "^1.1.5"
diff --git a/app/react/package.json b/app/react/package.json
index dde303705f8e..af64149fb8d5 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -29,8 +29,8 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
"@svgr/webpack": "^4.0.3",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-plugin-react-docgen": "^3.0.0",
diff --git a/app/riot/package.json b/app/riot/package.json
index 89e0ca738438..e89be376a7e3 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -25,7 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 8cd79a7da44b..b2abc4521c5d 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/app/vue/package.json b/app/vue/package.json
index 54a98c3f480a..a0c164c698a9 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -26,7 +26,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/core": "5.2.0-unreleased.0",
+ "@storybook/core": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index f602ddbe580c..50f40cdf3ee6 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-parameter",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "parameter addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index bcb1be65170f..5aa760468255 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-roundtrip",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "roundtrip addon for storybook",
"keywords": [
"devkit",
@@ -24,12 +24,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^2.6.5",
"global": "^4.3.2",
diff --git a/docs/package.json b/docs/package.json
index d87c8666ff65..412f5fa79baa 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,8 +15,8 @@
"serve": "gatsby serve"
},
"dependencies": {
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"babel-loader": "^6.4.1",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
diff --git a/docs/src/versions/latest.json b/docs/src/versions/latest.json
index dcba5389aa3e..c0e4f2a14ad5 100644
--- a/docs/src/versions/latest.json
+++ b/docs/src/versions/latest.json
@@ -1 +1 @@
-{"version":"5.2.0-unreleased.0","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
+{"version":"5.2.0-alpha.23","info":{"plain":"Storybook 5.1 is a juicy upgrade including:\n\n- 📱 Mobile: Standalone package architecture for React Native\n- 🎟 A11y addon: Realtime accessibility checks and visual feedback\n- 🛠 Context addon: New UI for themes, internationalization, & more\n- 🎛 Presets: One-line configuration for babel, webpack, & addons\n\n5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier."}}
\ No newline at end of file
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 8387d9ab5ea6..6f9371f2654e 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "crna-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
@@ -24,14 +24,14 @@
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-react-jsx-source": "^7.2.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-actions": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-ondevice-notes": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/react-native": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-actions": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-ondevice-notes": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/react-native": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"babel-plugin-module-resolver": "^3.2.0",
"babel-preset-expo": "^5.1.1",
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index a497483faf45..2b17909bceb9 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"license": "MIT",
"scripts": {
@@ -34,19 +34,19 @@
"@angular-devkit/build-angular": "^0.13.4",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.6",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/angular": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/angular": "5.2.0-alpha.23",
"@types/core-js": "^2.5.0",
"@types/jest": "^24.0.11",
"@types/node": "~12.0.2",
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index f55592a0fecf..cdc1c2c38ca0 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -19,22 +19,22 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"react-scripts": "^3.0.1"
}
}
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 6ed222bc70a4..39af8718dafa 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"dependencies": {
"babel-loader": "8.0.6",
@@ -19,10 +19,10 @@
"build-storybook": "build-storybook -s public"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"babel-core": "6",
"babel-runtime": "6"
}
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 05d56418ecda..344b2e251fc4 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -14,12 +14,12 @@
"react-dom": "^16.8.3"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
"@types/enzyme": "^3.9.0",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index c2f97a78c62f..5b8d3e94ba4e 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/example-devkits",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -8,14 +8,14 @@
"storybook": "start-storybook -p 9011 -c ./"
},
"devDependencies": {
- "@storybook/addon-roundtrip": "5.2.0-unreleased.0",
- "@storybook/addon-parameter": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-roundtrip": "5.2.0-alpha.23",
+ "@storybook/addon-parameter": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 124d4fcf76d3..6425b7f90722 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "ember build",
@@ -15,18 +15,18 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/ember": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/ember": "5.2.0-alpha.23",
"babel-loader": "^8",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^5.2.0",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index fd89d4162c00..ff3ce8a491df 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "",
"keywords": [],
@@ -14,23 +14,23 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/core": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/html": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/core": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/html": "5.2.0-alpha.23",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 6585798da66c..57d3538ab5ca 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "marko-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@@ -24,13 +24,13 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/marko": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/marko": "5.2.0-alpha.23",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 4ac42b770b4b..ea7802446a95 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "mithril-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -11,19 +11,19 @@
"mithril": "^1.1.6"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/mithril": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/mithril": "5.2.0-alpha.23",
"webpack": "^4.33.0"
}
}
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 61448ccdc043..da0b260ec49e 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -13,32 +13,32 @@
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks --no-dll"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-cssresources": "5.2.0-unreleased.0",
- "@storybook/addon-design-assets": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-graphql": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-queryparams": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots-puppeteer": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-cssresources": "5.2.0-alpha.23",
+ "@storybook/addon-design-assets": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-graphql": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-queryparams": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"enzyme-to-json": "^3.3.5",
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index 2eb16aa14b1e..ba93e8862d40 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "polymer-cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,16 +10,16 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/polymer": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/polymer": "5.2.0-alpha.23",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 94be4175589f..5b3d6aa7a813 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,20 +16,20 @@
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.2.0",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/preact": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/preact": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index daf251cafd6f..98ca817db918 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "rax-kitchen-sink",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js",
@@ -24,22 +24,22 @@
"rax-view": "^0.6.5"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-events": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-jest": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/rax": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-events": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-jest": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/rax": "5.2.0-alpha.23",
"babel-eslint": "^8.2.2",
"babel-preset-rax": "^1.0.0-beta.0",
"rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index c9470651f085..cf3f892e7380 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "riot-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,19 +16,19 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/riot": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/riot": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 6fbb4fc4d244..4eac0f34f862 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -11,18 +11,18 @@
"global": "^4.3.2"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/svelte": "5.2.0-unreleased.0"
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/svelte": "5.2.0-alpha.23"
}
}
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 9741736637ef..5ee3052f862f 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,20 +15,20 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.2.0-unreleased.0",
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-backgrounds": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-contexts": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addon-storysource": "5.2.0-unreleased.0",
- "@storybook/addon-viewport": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/vue": "5.2.0-unreleased.0",
+ "@storybook/addon-a11y": "5.2.0-alpha.23",
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-backgrounds": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addon-storysource": "5.2.0-alpha.23",
+ "@storybook/addon-viewport": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/vue": "5.2.0-alpha.23",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"cross-env": "^5.2.0",
diff --git a/lerna.json b/lerna.json
index 89fd11c7e605..0305f8a07fd4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
"npmClient": "yarn",
"useWorkspaces": true,
"registry": "https://registry.npmjs.org",
- "version": "5.2.0-unreleased.0"
+ "version": "5.2.0-alpha.23"
}
diff --git a/lib/addons/package.json b/lib/addons/package.json
index d80049800092..8d360840d0b9 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook addons store",
"keywords": [
"storybook"
@@ -21,9 +21,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
diff --git a/lib/api/package.json b/lib/api/package.json
index a51fd91b26fd..fd4301db46e3 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/api",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook API & Context",
"keywords": [
"storybook"
@@ -20,11 +20,11 @@
"prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index df17808a51ed..812f92ca9ba1 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-postmessage",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"telejson": "^2.2.1"
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index b5e069e699a0..86047f7ea804 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-websocket",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
@@ -21,7 +21,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/channels": "5.2.0-unreleased.0",
+ "@storybook/channels": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"json-fn": "^1.1.1"
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 1f3c87bbef37..faf47c26ac53 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 3235fad74b24..bcbfdf040903 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
@@ -30,7 +30,7 @@
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/register": "^7.0.0",
- "@storybook/codemod": "5.2.0-unreleased.0",
+ "@storybook/codemod": "5.2.0-alpha.23",
"chalk": "^2.4.1",
"commander": "^2.19.0",
"core-js": "^3.0.1",
@@ -44,33 +44,33 @@
"update-notifier": "^3.0.0"
},
"devDependencies": {
- "@storybook/addon-actions": "5.2.0-unreleased.0",
- "@storybook/addon-centered": "5.2.0-unreleased.0",
- "@storybook/addon-graphql": "5.2.0-unreleased.0",
- "@storybook/addon-info": "5.2.0-unreleased.0",
- "@storybook/addon-knobs": "5.2.0-unreleased.0",
- "@storybook/addon-links": "5.2.0-unreleased.0",
- "@storybook/addon-notes": "5.2.0-unreleased.0",
- "@storybook/addon-options": "5.2.0-unreleased.0",
- "@storybook/addon-storyshots": "5.2.0-unreleased.0",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/angular": "5.2.0-unreleased.0",
- "@storybook/channel-postmessage": "5.2.0-unreleased.0",
- "@storybook/channel-websocket": "5.2.0-unreleased.0",
- "@storybook/channels": "5.2.0-unreleased.0",
- "@storybook/ember": "5.2.0-unreleased.0",
- "@storybook/html": "5.2.0-unreleased.0",
- "@storybook/marko": "5.2.0-unreleased.0",
- "@storybook/mithril": "5.2.0-unreleased.0",
- "@storybook/polymer": "5.2.0-unreleased.0",
- "@storybook/preact": "5.2.0-unreleased.0",
- "@storybook/rax": "5.2.0-unreleased.0",
- "@storybook/react": "5.2.0-unreleased.0",
- "@storybook/react-native": "5.2.0-unreleased.0",
- "@storybook/riot": "5.2.0-unreleased.0",
- "@storybook/svelte": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
- "@storybook/vue": "5.2.0-unreleased.0"
+ "@storybook/addon-actions": "5.2.0-alpha.23",
+ "@storybook/addon-centered": "5.2.0-alpha.23",
+ "@storybook/addon-graphql": "5.2.0-alpha.23",
+ "@storybook/addon-info": "5.2.0-alpha.23",
+ "@storybook/addon-knobs": "5.2.0-alpha.23",
+ "@storybook/addon-links": "5.2.0-alpha.23",
+ "@storybook/addon-notes": "5.2.0-alpha.23",
+ "@storybook/addon-options": "5.2.0-alpha.23",
+ "@storybook/addon-storyshots": "5.2.0-alpha.23",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/angular": "5.2.0-alpha.23",
+ "@storybook/channel-postmessage": "5.2.0-alpha.23",
+ "@storybook/channel-websocket": "5.2.0-alpha.23",
+ "@storybook/channels": "5.2.0-alpha.23",
+ "@storybook/ember": "5.2.0-alpha.23",
+ "@storybook/html": "5.2.0-alpha.23",
+ "@storybook/marko": "5.2.0-alpha.23",
+ "@storybook/mithril": "5.2.0-alpha.23",
+ "@storybook/polymer": "5.2.0-alpha.23",
+ "@storybook/preact": "5.2.0-alpha.23",
+ "@storybook/rax": "5.2.0-alpha.23",
+ "@storybook/react": "5.2.0-alpha.23",
+ "@storybook/react-native": "5.2.0-alpha.23",
+ "@storybook/riot": "5.2.0-alpha.23",
+ "@storybook/svelte": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
+ "@storybook/vue": "5.2.0-alpha.23"
},
"publishConfig": {
"access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 35b5013e530c..33702eaffb6f 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,10 +1,11 @@
{
"name": "@storybook/client-api",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook Client API",
"keywords": [
"storybook"
],
+ "types": "dist/public_api.d.ts",
"homepage": "https://github.com/storybookjs/storybook/tree/master/lib/client-api",
"bugs": {
"url": "https://github.com/storybookjs/storybook/issues"
@@ -20,10 +21,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"eventemitter3": "^3.1.0",
diff --git a/lib/client-api/src/client_api.test.js b/lib/client-api/src/client_api.test.ts
similarity index 100%
rename from lib/client-api/src/client_api.test.js
rename to lib/client-api/src/client_api.test.ts
diff --git a/lib/client-api/src/client_api.js b/lib/client-api/src/client_api.ts
similarity index 92%
rename from lib/client-api/src/client_api.js
rename to lib/client-api/src/client_api.ts
index 28781896a81e..7910a4ff5e97 100644
--- a/lib/client-api/src/client_api.js
+++ b/lib/client-api/src/client_api.ts
@@ -1,5 +1,4 @@
/* eslint no-underscore-dangle: 0 */
-
import isPlainObject from 'is-plain-object';
import { logger } from '@storybook/client-logger';
import addons from '@storybook/addons';
@@ -9,11 +8,12 @@ import { toId } from '@storybook/router/utils';
import mergeWith from 'lodash/mergeWith';
import isEqual from 'lodash/isEqual';
import get from 'lodash/get';
-
+import StoryStore from './story_store';
+import { ClientApiParams, IDecoratorParams, IHierarchyObj } from './types';
import subscriptionsStore from './subscriptions_store';
// merge with concatenating arrays, but no duplicates
-const merge = (a, b) =>
+const merge = (a: IHierarchyObj, b: IHierarchyObj) =>
mergeWith({}, a, b, (objValue, srcValue) => {
if (Array.isArray(srcValue) && Array.isArray(objValue)) {
srcValue.forEach(s => {
@@ -69,7 +69,9 @@ const withSubscriptionTracking = storyFn => {
};
export default class ClientApi {
- constructor({ storyStore, decorateStory = defaultDecorateStory } = {}) {
+ _storyStore: StoryStore;
+
+ constructor({ storyStore, decorateStory = defaultDecorateStory }: ClientApiParams) {
this._storyStore = storyStore;
this._addons = {};
this._globalDecorators = [];
@@ -102,7 +104,8 @@ export default class ClientApi {
this._globalDecorators.push(decorator);
};
- addParameters = parameters => {
+ addParameters = (parameters: IDecoratorParams[] | { globalParameter: 'string' }) => {
+ console.log('parameters: ', parameters);
this._globalParameters = {
...this._globalParameters,
...parameters,
@@ -116,7 +119,8 @@ export default class ClientApi {
this._globalDecorators = [];
};
- storiesOf = (kind, m) => {
+ // what are the occasions that "m" is simply a boolean, vs an obj
+ storiesOf = (kind: string, m: any) => {
if (!kind && typeof kind !== 'string') {
throw new Error('Invalid or missing kind provided for stories, should be a string');
}
@@ -126,7 +130,7 @@ export default class ClientApi {
`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
);
}
-
+ console.log('storyStore: ', this._storyStore);
if (m && m.hot && m.hot.dispose) {
m.hot.dispose(() => {
const { _storyStore } = this;
@@ -223,7 +227,7 @@ export default class ClientApi {
return api;
};
- api.addDecorator = decorator => {
+ api.addDecorator = (decorator: () => void) => {
if (hasAdded) {
logger.warn(`You have added a decorator to the kind '${kind}' after a story has already been added.
In Storybook 4 this applied the decorator only to subsequent stories. In Storybook 5+ it applies to all stories.
diff --git a/lib/client-api/src/config_api.js b/lib/client-api/src/config_api.ts
similarity index 73%
rename from lib/client-api/src/config_api.js
rename to lib/client-api/src/config_api.ts
index a59226a84a9b..fb5036c09205 100644
--- a/lib/client-api/src/config_api.js
+++ b/lib/client-api/src/config_api.ts
@@ -3,9 +3,43 @@
import { location } from 'global';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
+import { PostmsgTransport } from '@storybook/channel-postmessage';
+import Channel from '@storybook/channels';
+import { StoryStore, ClientApi } from '@storybook/client-api';
+import { IModule } from './types';
+
+interface IChannel {
+ events: {
+ forceReRender: [];
+ registerSubscription: [];
+ setCurrentStory: [];
+ 'storybook/a11y/request': [];
+ };
+ isAsync: boolean;
+ sender: string;
+ transport: PostmsgTransport;
+}
export default class ConfigApi {
- constructor({ channel, storyStore, clearDecorators, clientApi }) {
+ _channel: Channel;
+
+ _storyStore: StoryStore;
+
+ _clearDecorators: () => void;
+
+ clientApi: ClientApi;
+
+ constructor({
+ channel,
+ storyStore,
+ clearDecorators,
+ clientApi,
+ }: {
+ channel: Channel | null;
+ storyStore: StoryStore;
+ clearDecorators: any;
+ clientApi: ClientApi;
+ }) {
// channel can be null when running in node
// always check whether channel is available
this._channel = channel;
@@ -19,13 +53,13 @@ export default class ConfigApi {
this._storyStore.emit(Events.STORY_INIT);
}
- _renderError(e) {
- const { stack, message } = e;
+ _renderError(err: Error) {
+ const { stack, message } = err;
const error = { stack, message };
this._storyStore.setSelection({ error });
}
- configure = (loaders, module) => {
+ configure = (loaders: () => void, module: IModule) => {
const render = () => {
const errors = [];
diff --git a/lib/client-api/src/index.js b/lib/client-api/src/index.ts
similarity index 100%
rename from lib/client-api/src/index.js
rename to lib/client-api/src/index.ts
diff --git a/lib/client-api/src/pathToId.js b/lib/client-api/src/pathToId.ts
similarity index 77%
rename from lib/client-api/src/pathToId.js
rename to lib/client-api/src/pathToId.ts
index 818eeff63b5c..fe534f5dfddf 100644
--- a/lib/client-api/src/pathToId.js
+++ b/lib/client-api/src/pathToId.ts
@@ -1,4 +1,4 @@
-export default function pathToId(path) {
+export default function pathToId(path: string) {
const match = (path || '').match(/^\/story\/(.+)/);
if (!match) {
throw new Error(`Invalid path '${path}', must start with '/story/'`);
diff --git a/lib/client-api/src/pathToid.test.js b/lib/client-api/src/pathToid.test.ts
similarity index 100%
rename from lib/client-api/src/pathToid.test.js
rename to lib/client-api/src/pathToid.test.ts
diff --git a/lib/client-api/src/queryparams.js b/lib/client-api/src/queryparams.ts
similarity index 85%
rename from lib/client-api/src/queryparams.js
rename to lib/client-api/src/queryparams.ts
index 149484890817..d7717a5fb75c 100644
--- a/lib/client-api/src/queryparams.js
+++ b/lib/client-api/src/queryparams.ts
@@ -9,7 +9,8 @@ export const getQueryParams = () => {
return {};
};
-export const getQueryParam = key => {
+export const getQueryParam = (key: string): string | void => {
const params = getQueryParams();
+
return params[key];
};
diff --git a/lib/client-api/src/story_store.test.js b/lib/client-api/src/story_store.test.ts
similarity index 100%
rename from lib/client-api/src/story_store.test.js
rename to lib/client-api/src/story_store.test.ts
diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.ts
similarity index 75%
rename from lib/client-api/src/story_store.js
rename to lib/client-api/src/story_store.ts
index 52848511bf5b..9d3191864288 100644
--- a/lib/client-api/src/story_store.js
+++ b/lib/client-api/src/story_store.ts
@@ -10,25 +10,26 @@ import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { toId } from '@storybook/router/utils';
+import { Channel } from '@storybook/channels';
import pathToId from './pathToId';
import { getQueryParams } from './queryparams';
+import { IData, IDecorator } from './types';
// TODO: these are copies from components/nav/lib
// refactor to DRY
-
-const toKey = input =>
+const toKey = (input: string) =>
input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
-const toChild = it => ({ ...it });
+const toChild = (it: {}) => ({ ...it });
let count = 0;
-function getId() {
+const getId = (): number => {
count += 1;
return count;
-}
+};
-const toExtracted = obj =>
+const toExtracted = (obj: T) =>
Object.entries(obj).reduce((acc, [key, value]) => {
if (typeof value === 'function') {
return acc;
@@ -39,11 +40,29 @@ const toExtracted = obj =>
return Object.assign(acc, { [key]: value });
}, {});
-const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
+const getIdFromLegacyQuery = ({
+ path,
+ selectedKind,
+ selectedStory,
+}: {
+ path: string;
+ selectedKind: string;
+ selectedStory: string;
+}) =>
(path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
export default class StoryStore extends EventEmitter {
- constructor(params) {
+ _legacydata: {};
+
+ _data: IData;
+
+ _revision: number;
+
+ _selection: {};
+
+ _channel: Channel;
+
+ constructor(params: { channel: Channel }) {
super();
this._legacydata = {};
@@ -66,7 +85,7 @@ export default class StoryStore extends EventEmitter {
});
}
- setChannel = channel => {
+ setChannel = (channel: Channel) => {
this._channel = channel;
};
@@ -77,12 +96,12 @@ export default class StoryStore extends EventEmitter {
return id;
};
- setPath = (storyId, params = {}) => {
+ setPath = (storyId: string, params = {}) => {
const path = `${document.location.pathname}?${qs.stringify({ ...params, id: storyId })}`;
history.replaceState({}, '', path);
};
- fromId = id => {
+ fromId = (id: string) => {
try {
const data = this._data[id];
@@ -98,13 +117,12 @@ export default class StoryStore extends EventEmitter {
}
};
- setSeparators(data) {
- this.separators = data;
- }
-
raw() {
return Object.values(this._data)
- .filter(i => !!i.getDecorated)
+ .filter(i => {
+ console.log('this is unknown??? --> i: ', i);
+ return !!i.getDecorated;
+ })
.map(({ id }) => this.fromId(id));
}
@@ -116,22 +134,29 @@ export default class StoryStore extends EventEmitter {
);
}
- setSelection = data => {
+ setSelection = (data: U) => {
this._selection = data;
setTimeout(() => this.emit(Events.STORY_RENDER), 1);
};
getSelection = () => this._selection;
- remove = id => {
+ remove = (id: string): void => {
const { _data } = this;
delete _data[id];
};
addStory(
- { id, kind, name, storyFn: original, parameters = {} },
+ { id, kind, name, storyFn: original, parameters = {} }: {id: string, kind: string, name: string, storyFn?: () => any, parameters: },
{ getDecorators, applyDecorators }
) {
+ console.log('id: ', id);
+ console.log('kind: ', kind);
+ console.log('name: ', name);
+ console.log('storyFn: ', storyFn);
+ console.log('parameters: ', parameters);
+ console.log('getDecorators: ', getDecorators);
+ console.log('applyDecorators: ', applyDecorators);
const { _data } = this;
if (_data[id]) {
@@ -156,7 +181,9 @@ export default class StoryStore extends EventEmitter {
// lazily decorate the story when it's loaded
const getDecorated = memoize(1)(() => applyDecorators(getOriginal(), getDecorators()));
- const storyFn = p => getDecorated()({ ...identification, parameters: { ...parameters, ...p } });
+ const storyFn = p => {
+ return getDecorated()({ ...identification, parameters: { ...parameters, ...p } });
+ };
_data[id] = toChild({
...identification,
@@ -193,7 +220,17 @@ export default class StoryStore extends EventEmitter {
this._revision += 1;
}
- addLegacyStory({ kind, name, storyFn, parameters = {} }) {
+ addLegacyStory({
+ kind,
+ name,
+ storyFn,
+ parameters = {},
+ }: {
+ kind: string;
+ name: string;
+ storyFn: () => any;
+ parameters: { fileName: string } | {};
+ }) {
const k = toKey(kind);
if (!this._legacydata[k]) {
this._legacydata[k] = {
@@ -220,8 +257,12 @@ export default class StoryStore extends EventEmitter {
.map(info => info.kind);
}
- getStories(kind) {
+ getStories(kind: string) {
const key = toKey(kind);
+ console.log('-------------------- getStories');
+ console.log('kind: ', kind);
+ console.log(' getStories--------------------');
+
if (!this._legacydata[key]) {
return [];
}
@@ -232,7 +273,7 @@ export default class StoryStore extends EventEmitter {
.map(info => info.name);
}
- getStoryFileName(kind) {
+ getStoryFileName(kind: string) {
const key = toKey(kind);
const storiesKind = this._legacydata[key];
if (!storiesKind) {
@@ -242,7 +283,7 @@ export default class StoryStore extends EventEmitter {
return storiesKind.fileName;
}
- getStoryAndParameters(kind, name) {
+ getStoryAndParameters(kind: string, name: string) {
if (!kind || !name) {
return null;
}
@@ -264,12 +305,12 @@ export default class StoryStore extends EventEmitter {
};
}
- getStory(kind, name) {
+ getStory(kind: string, name: string) {
const data = this.getStoryAndParameters(kind, name);
return data && data.story;
}
- getStoryWithContext(kind, name) {
+ getStoryWithContext(kind: string, name: string) {
const data = this.getStoryAndParameters(kind, name);
if (!data) {
return null;
@@ -279,17 +320,17 @@ export default class StoryStore extends EventEmitter {
return story;
}
- removeStoryKind(kind) {
+ removeStoryKind(kind: string) {
if (this.hasStoryKind(kind)) {
this._legacydata[toKey(kind)].stories = {};
}
}
- hasStoryKind(kind) {
+ hasStoryKind(kind: string) {
return Boolean(this._legacydata[toKey(kind)]);
}
- hasStory(kind, name) {
+ hasStory(kind: string, name: string) {
return Boolean(this.getStory(kind, name));
}
diff --git a/lib/client-api/src/subscriptions_store.js b/lib/client-api/src/subscriptions_store.js
deleted file mode 100644
index 4a817afee68b..000000000000
--- a/lib/client-api/src/subscriptions_store.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const createSubscriptionsStore = () => {
- const subscripions = new Map();
-
- return {
- register(subscribe) {
- let subscription = subscripions.get(subscribe);
- if (!subscription) {
- subscription = {
- unsubscribe: subscribe(),
- };
- subscripions.set(subscribe, subscription);
- }
- subscription.used = true;
- },
-
- markAllAsUnused() {
- subscripions.forEach(subscription => {
- // eslint-disable-next-line no-param-reassign
- subscription.used = false;
- });
- },
-
- clearUnused() {
- subscripions.forEach((subscripion, key) => {
- if (subscripion.used) return;
-
- subscripion.unsubscribe();
- subscripions.delete(key);
- });
- },
- };
-};
-
-export default createSubscriptionsStore();
diff --git a/lib/client-api/src/subscriptions_store.test.js b/lib/client-api/src/subscriptions_store.test.ts
similarity index 99%
rename from lib/client-api/src/subscriptions_store.test.js
rename to lib/client-api/src/subscriptions_store.test.ts
index 33a9cfa554dc..f19ca3729eb0 100644
--- a/lib/client-api/src/subscriptions_store.test.js
+++ b/lib/client-api/src/subscriptions_store.test.ts
@@ -12,7 +12,7 @@ const mockSubscription = () => {
listening = false;
};
},
- trigger(value) {
+ trigger(value?) {
if (listening) {
listener(value);
}
diff --git a/lib/client-api/src/subscriptions_store.ts b/lib/client-api/src/subscriptions_store.ts
new file mode 100644
index 000000000000..7cf418f1799b
--- /dev/null
+++ b/lib/client-api/src/subscriptions_store.ts
@@ -0,0 +1,34 @@
+export const createSubscriptionsStore = () => {
+ const subscriptions = new Map();
+
+ return {
+ register(subscribe: () => void): void {
+ let subscription = subscriptions.get(subscribe);
+ if (!subscription) {
+ subscription = {
+ unsubscribe: subscribe(),
+ };
+ subscriptions.set(subscribe, subscription);
+ }
+ subscription.used = true;
+ },
+
+ markAllAsUnused(): void {
+ subscriptions.forEach(subscription => {
+ // eslint-disable-next-line no-param-reassign
+ subscription.used = false;
+ });
+ },
+
+ clearUnused(): void {
+ subscriptions.forEach((subscription, key) => {
+ if (subscription.used) return;
+
+ subscription.unsubscribe();
+ subscriptions.delete(key);
+ });
+ },
+ };
+};
+
+export default createSubscriptionsStore();
diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts
new file mode 100644
index 000000000000..9d5dcb094c5a
--- /dev/null
+++ b/lib/client-api/src/types.ts
@@ -0,0 +1,355 @@
+type DataIndices =
+ | 'addons-a11y-basebutton--default'
+ | 'addons-a11y-basebutton--delayed-render'
+ | 'addons-a11y-basebutton--disabled'
+ | 'addons-a11y-basebutton--invalid-contrast'
+ | 'addons-a11y-basebutton--label'
+ | 'addons-a11y-button--content'
+ | 'addons-a11y-button--default'
+ | 'addons-a11y-button--disabled'
+ | 'addons-a11y-button--invalid-contrast'
+ | 'addons-a11y-button--label'
+ | 'addons-a11y-form--with-label'
+ | 'addons-a11y-form--with-placeholder'
+ | 'addons-a11y-form--without-label'
+ | 'addons-a11y-image--presentation'
+ | 'addons-a11y-image--with-alt'
+ | 'addons-a11y-image--without-alt'
+ | 'addons-a11y-image--without-alt-but-unchecked'
+ | 'addons-a11y-typography--correct'
+ | 'addons-a11y-typography--empty-heading'
+ | 'addons-a11y-typography--empty-link'
+ | 'addons-a11y-typography--empty-paragraph'
+ | 'addons-a11y-typography--link-without-href'
+ | 'addons-actions--all-types'
+ | 'addons-actions--basic-example'
+ | 'addons-actions--circular-payload'
+ | 'addons-actions--configureactionsdepth'
+ | 'addons-actions--decorated-action'
+ | 'addons-actions--decorated-action-config'
+ | 'addons-actions--decorated-actions'
+ | 'addons-actions--decorated-actions-config'
+ | 'addons-actions--limit-action-output'
+ | 'addons-actions--multiple-actions'
+ | 'addons-actions--multiple-actions-as-object'
+ | 'addons-actions--multiple-actions-config'
+ | 'addons-actions--multiple-actions-object-config'
+ | 'addons-actions--persisting-the-action-logger'
+ | 'addons-actions--reserved-keyword-as-name'
+ | 'addons-actions-deprecated--decorated-action'
+ | 'addons-backgrounds--disabled-via'
+ | 'addons-backgrounds--overriden'
+ | 'addons-backgrounds--skipped-via-disable-true'
+ | 'addons-backgrounds--story-1'
+ | 'addons-backgrounds--story-2'
+ | 'addons-centered--story-1'
+ | 'addons-contexts--languages'
+ | 'addons-contexts--simple-css-theming'
+ | 'addons-cssresources--camera-icon'
+ | 'addons-cssresources--primary-large-button'
+ | 'addons-design-assets--multiple-images'
+ | 'addons-design-assets--named-assets'
+ | 'addons-design-assets--single-image'
+ | 'addons-design-assets--single-webpage'
+ | 'addons-design-assets--url-replacement'
+ | 'addons-design-assets--youtube-video'
+ | 'addons-events--logger'
+ | 'addons-events-deprecated--logger'
+ | 'addons-graphql--get-pickachu'
+ | 'addons-info-decorator--use-info-as-story-decorator'
+ | 'addons-info-deprecated--displays-markdown-in-description'
+ | 'addons-info-forwardref--displays-forwarded-ref-components-correctly'
+ | 'addons-info-forwardref--uses-forwardref-displayname-if-available'
+ | 'addons-info-github-issues--1814'
+ | 'addons-info-jsx--displays-jsx-in-description'
+ | 'addons-info-markdown--displays-markdown-in-description'
+ | 'addons-info-markdown--from-external-markdown-file'
+ | 'addons-info-markdown--from-internal-markdown-file'
+ | 'addons-info-options-excludedproptypes--excludes-proptypes-that-are-in-the-excludedproptypes-array'
+ | 'addons-info-options-header--shows-or-hides-info-addon-header'
+ | 'addons-info-options-inline--inlines-component-inside-story'
+ | 'addons-info-options-proptables--shows-additional-component-prop-tables'
+ | 'addons-info-options-proptablesexclude--exclude-component-from-prop-tables'
+ | 'addons-info-options-source--shows-or-hides-info-addon-source'
+ | 'addons-info-options-styles--extend-info-styles-with-an-object'
+ | 'addons-info-options-styles--full-control-over-styles-using-a-function'
+ | 'addons-info-options-tablecomponent--use-a-custom-component-for-the-table'
+ | 'addons-info-parameters--disable-the-addon-entirely'
+ | 'addons-info-parameters--overwrite-the-parameters-with-markdown-variable'
+ | 'addons-info-parameters--overwrite-the-text-parameter-with-markdown-inline'
+ | 'addons-info-parameters--overwriting-and-extending-the-parameters-and-options-set-stories-wise'
+ | 'addons-info-parameters--using-paramaters-across-all-stories'
+ | 'addons-info-react-docgen--comments-from-component-declaration'
+ | 'addons-info-react-docgen--comments-from-flow-declarations'
+ | 'addons-info-react-docgen--comments-from-named-export-component-declaration'
+ | 'addons-info-react-docgen--comments-from-proptype-declarations'
+ | 'addons-info-story-source--array-prop'
+ | 'addons-info-story-source--children'
+ | 'addons-info-story-source--many-props'
+ | 'addons-info-story-source--object-prop'
+ | 'addons-info-story-source--one-prop'
+ | 'addons-jest--withtests'
+ | 'addons-knobs-withknobs--accepts-story-parameters'
+ | 'addons-knobs-withknobs--complex-select'
+ | 'addons-knobs-withknobs--dynamic-knobs'
+ | 'addons-knobs-withknobs--optionsknob'
+ | 'addons-knobs-withknobs--triggers-actions-via-button'
+ | 'addons-knobs-withknobs--tweaks-static-values'
+ | 'addons-knobs-withknobs--tweaks-static-values-organized-in-groups'
+ | 'addons-knobs-withknobs--xss-safety'
+ | 'addons-knobs-withknobs-using-options--accepts-options'
+ | 'addons-links-button--first'
+ | 'addons-links-button--second'
+ | 'addons-links-href--log'
+ | 'addons-links-link--first'
+ | 'addons-links-link--second'
+ | 'addons-links-scroll-position--first'
+ | 'addons-links-scroll-position--second'
+ | 'addons-links-select--first'
+ | 'addons-links-select--index'
+ | 'addons-links-select--second'
+ | 'addons-links-select--third'
+ | 'addons-notes--addon-notes'
+ | 'addons-notes--addon-notes-rendering-imported-markdown'
+ | 'addons-notes--addon-notes-rendering-inline-github-flavored-markdown'
+ | 'addons-notes--with-a-markdown-giphy'
+ | 'addons-notes--with-a-markdown-table'
+ | 'addons-options--hiding-addon-panel'
+ | 'addons-options--setting-name'
+ | 'addons-queryparams--mock-is-4'
+ | 'addons-queryparams--mock-is-true'
+ | 'addons-storyshots--block'
+ | 'addons-viewport--default'
+ | 'addons-viewport-custom-default-kindle-fire-2--disabled'
+ | 'addons-viewport-custom-default-kindle-fire-2--inherited'
+ | 'addons-viewport-custom-default-kindle-fire-2--overridden-via-withviewport-parameterized-decorator'
+ | 'app-acceptance--angular-cli'
+ | 'app-acceptance--cra-kitchen-sink'
+ | 'app-acceptance--cra-react15'
+ | 'app-acceptance--cra-ts-kitchen-sink'
+ | 'app-acceptance--html-kitchen-sink'
+ | 'app-acceptance--mithril-kitchen-sink'
+ | 'app-acceptance--polymer-cli'
+ | 'app-acceptance--preact-kitchen-sink'
+ | 'app-acceptance--riot-kitchen-sink'
+ | 'app-acceptance--svelte-kitchen-sink'
+ | 'app-acceptance--vue-kitchen-sink'
+ | 'basics-actionbar--manyitems'
+ | 'basics-actionbar--singleitem'
+ | 'basics-badge--all-badges'
+ | 'basics-brand-storybookicon--default'
+ | 'basics-brand-storybooklogo--normal'
+ | 'basics-button--all-buttons'
+ | 'basics-documentformatting--withdom'
+ | 'basics-documentformatting--withmarkdown'
+ | 'basics-form-button--sizes'
+ | 'basics-form-button--validations'
+ | 'basics-form-field--field'
+ | 'basics-form-input--alignment'
+ | 'basics-form-input--sizes'
+ | 'basics-form-input--validations'
+ | 'basics-form-select--sizes'
+ | 'basics-form-select--validations'
+ | 'basics-form-textarea--alignment'
+ | 'basics-form-textarea--sizes'
+ | 'basics-form-textarea--validations'
+ | 'basics-icon--labels'
+ | 'basics-icon--no-labels'
+ | 'basics-link--cancel-w-href'
+ | 'basics-link--cancel-w-onclick'
+ | 'basics-link--no-cancel-w-href'
+ | 'basics-link--no-cancel-w-onclick'
+ | 'basics-link--styled-links'
+ | 'basics-placeholder--singlechild'
+ | 'basics-placeholder--twochildren'
+ | 'basics-scrollarea--both'
+ | 'basics-scrollarea--horizontal'
+ | 'basics-scrollarea--vertical'
+ | 'basics-scrollarea--withouterborder'
+ | 'basics-spaced--col'
+ | 'basics-spaced--col-outer'
+ | 'basics-spaced--row'
+ | 'basics-spaced--row-multiply'
+ | 'basics-spaced--row-outer'
+ | 'basics-syntaxhighlighter--bash'
+ | 'basics-syntaxhighlighter--bordered-copy-able'
+ | 'basics-syntaxhighlighter--dark-unsupported'
+ | 'basics-syntaxhighlighter--jsx'
+ | 'basics-syntaxhighlighter--padded'
+ | 'basics-syntaxhighlighter--showlinenumbers'
+ | 'basics-syntaxhighlighter--story'
+ | 'basics-syntaxhighlighter--unsupported'
+ | 'basics-tabs--stateful-dynamic'
+ | 'basics-tabs--stateful-no-initial'
+ | 'basics-tabs--stateful-static'
+ | 'basics-tabs--stateless-absolute'
+ | 'basics-tabs--stateless-bordered'
+ | 'basics-tabs--stateless-empty'
+ | 'basics-tabs--stateless-with-tools'
+ | 'basics-tooltip-listitem--active-icon'
+ | 'basics-tooltip-listitem--all'
+ | 'basics-tooltip-listitem--default'
+ | 'basics-tooltip-listitem--default-icon'
+ | 'basics-tooltip-listitem--disabled'
+ | 'basics-tooltip-listitem--loading'
+ | 'basics-tooltip-listitem--w-positions'
+ | 'basics-tooltip-listitem--w-positions-active'
+ | 'basics-tooltip-tooltip--basic-default'
+ | 'basics-tooltip-tooltip--basic-default-bottom'
+ | 'basics-tooltip-tooltip--basic-default-left'
+ | 'basics-tooltip-tooltip--basic-default-right'
+ | 'basics-tooltip-tooltip--no-chrome'
+ | 'basics-tooltip-tooltiplinklist--links'
+ | 'basics-tooltip-tooltiplinklist--links-and-callback'
+ | 'basics-tooltip-tooltipmessage--default'
+ | 'basics-tooltip-tooltipmessage--minimal-message'
+ | 'basics-tooltip-tooltipmessage--with-link'
+ | 'basics-tooltip-tooltipmessage--with-links'
+ | 'basics-tooltip-tooltipnote--default'
+ | 'basics-tooltip-withtooltip--no-chrome'
+ | 'basics-tooltip-withtooltip--simple-click'
+ | 'basics-tooltip-withtooltip--simple-click-closeonclick'
+ | 'basics-tooltip-withtooltip--simple-click-start-open'
+ | 'basics-tooltip-withtooltip--simple-hover'
+ | 'basics-tooltip-withtooltip--simple-hover-functional'
+ | 'basics-typography--all'
+ | 'core-decorators--all'
+ | 'core-errors--story-errors'
+ | 'core-errors--story-throws-exception'
+ | 'core-events--force-re-render'
+ | 'core-parameters--passed-to-story'
+ | 'core-scroll--story-with-100vh-padding-1'
+ | 'core-scroll--story-with-100vh-padding-2'
+ | 'core-unicode--кнопки'
+ | 'core-unicode--바보x`'
+ | 'core-unicode--😀'
+ | 'other-demo-button--with-some-emoji'
+ | 'other-demo-button--with-text'
+ | 'other-demo-welcome--to-storybook'
+ | 'other-stories-dirname-example--story-1'
+ | 'other-stories-dirname-example--story-2'
+ | 'ui-layout-desktop--bottom-panel'
+ | 'ui-layout-desktop--default'
+ | 'ui-layout-desktop--full'
+ | 'ui-layout-desktop--no-nav'
+ | 'ui-layout-desktop--no-panel'
+ | 'ui-layout-desktop--no-panel-no-nav'
+ | 'ui-layout-desktop--page'
+ | 'ui-layout-mobile--initial-0'
+ | 'ui-layout-mobile--initial-1'
+ | 'ui-layout-mobile--initial-2'
+ | 'ui-layout-mobile--page'
+ | 'ui-notifications-item--longtext'
+ | 'ui-notifications-item--simple'
+ | 'ui-notifications-item--withlink'
+ | 'ui-notifications-notifications--all'
+ | 'ui-notifications-notifications--placement'
+ | 'ui-notifications-notifications--single'
+ | 'ui-panel--default'
+ | 'ui-panel--no-panels'
+ | 'ui-preview-iframe--errorstory'
+ | 'ui-preview-iframe--missingstory'
+ | 'ui-preview-iframe--workingstory'
+ | 'ui-preview-preview--no-tabs'
+ | 'ui-preview-preview--with-tabs'
+ | 'ui-settings-aboutscreen--failed-to-fetch-new-version'
+ | 'ui-settings-aboutscreen--new-version-required'
+ | 'ui-settings-aboutscreen--up-to-date'
+ | 'ui-settings-settingsfooter--basic'
+ | 'ui-settings-shortcutsscreen--default-shortcuts'
+ | 'ui-sidebar-listitemicon--all'
+ | 'ui-sidebar-sidebar--loading'
+ | 'ui-sidebar-sidebar--simple'
+ | 'ui-sidebar-sidebarheading--custombrandimage'
+ | 'ui-sidebar-sidebarheading--linkandtext'
+ | 'ui-sidebar-sidebarheading--longtext'
+ | 'ui-sidebar-sidebarheading--menuhighlighted'
+ | 'ui-sidebar-sidebarheading--onlytext'
+ | 'ui-sidebar-sidebarheading--standard'
+ | 'ui-sidebar-sidebarheading--standardnolink'
+ | 'ui-sidebar-sidebaritem--component'
+ | 'ui-sidebar-sidebaritem--componentexpanded'
+ | 'ui-sidebar-sidebaritem--group'
+ | 'ui-sidebar-sidebaritem--loading'
+ | 'ui-sidebar-sidebaritem--nesteddepths'
+ | 'ui-sidebar-sidebaritem--story'
+ | 'ui-sidebar-sidebaritem--storyselected'
+ | 'ui-sidebar-sidebaritem--with-long-name'
+ | 'ui-sidebar-sidebarsearch--filledin'
+ | 'ui-sidebar-sidebarsearch--focussed'
+ | 'ui-sidebar-sidebarsearch--simple'
+ | 'ui-sidebar-sidebarstories--empty'
+ | 'ui-sidebar-sidebarstories--loading'
+ | 'ui-sidebar-sidebarstories--noroot'
+ | 'ui-sidebar-sidebarstories--withroot'
+ | 'ui-sidebar-sidebarsubheading--default';
+
+export interface IDecoratorParams {
+ default?: boolean;
+ name: string;
+ value: string;
+}
+
+export interface IDecoratorParamA11y {
+ config: {};
+ options: { [key: string]: string };
+}
+
+export interface IHierarchyObj {
+ hierarchyRootSeparator: string;
+ hierarchySeparator: RegExp;
+ theme?: { base: string; brandTitle: string };
+}
+export interface IDecoratorParamOptions {
+ hierarchyRootSeparator: string;
+ hierarchySeparator: RegExp;
+ theme: {
+ base: string;
+ brandTitle: string;
+ };
+}
+export interface IDecoratorParameters {
+ a11y: IDecoratorParamA11y;
+ backgrounds: [];
+ fileName?: string;
+ options: IDecoratorParamOptions;
+}
+
+export interface IDecorator {
+ getDecorated: () => any;
+ getOriginal: () => any;
+ id: string;
+ kind: string;
+ name: string;
+ parameters: IDecoratorParameters;
+ story: string;
+ storyFn: (p: any) => any;
+ [key: string]: IDecorator[keyof IDecorator];
+}
+
+export type IData = { [K in DataIndices]: IDecorator };
+export interface IModule {
+ exports: any;
+ id: string;
+ loaded: boolean;
+ webpackPolyfill: number;
+ hot: any;
+}
+
+export interface IClientApi {
+ add: (storyName: string, storyFn: () => any, parameters: any) => void;
+ addDecorator: (decorator: any) => any;
+ addDecorators: (parameters: any) => any;
+ kind: string;
+}
+export interface ClientApiParams {
+ storyStore: StoryStore;
+ decorateStory: (storyFn: any, decorators: any) => any;
+}
+
+export interface ClientApi {}
+export interface StoryStore {
+ fromId: (id: string) => any;
+ getIdOnPath: () => any;
+ getSelection: () => void;
+}
diff --git a/lib/client-api/src/typings.d.ts b/lib/client-api/src/typings.d.ts
new file mode 100644
index 000000000000..2f4eb9cf4fd9
--- /dev/null
+++ b/lib/client-api/src/typings.d.ts
@@ -0,0 +1 @@
+declare module 'global';
diff --git a/lib/client-api/tsconfig.json b/lib/client-api/tsconfig.json
new file mode 100644
index 000000000000..4894223ce827
--- /dev/null
+++ b/lib/client-api/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src"
+ },
+ "include": ["src/**/*"],
+ "exclude": ["src/**/*.test.ts"]
+}
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 2efd927b72c3..ee741c4c72e3 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 65164f8aa834..a7adaa35a17f 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
diff --git a/lib/components/package.json b/lib/components/package.json
index 86093a6a420e..850c8da31186 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -21,8 +21,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.9.1",
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 65cfb33e5614..a81023ad6143 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 4ad432f4aadf..3a48f831ba26 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -25,15 +25,15 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-env": "^7.4.5",
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/channel-postmessage": "5.2.0-unreleased.0",
- "@storybook/client-api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/node-logger": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
- "@storybook/ui": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/channel-postmessage": "5.2.0-alpha.23",
+ "@storybook/client-api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/node-logger": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
+ "@storybook/ui": "5.2.0-alpha.23",
"airbnb-js-shims": "^1 || ^2",
"autoprefixer": "^9.4.9",
"babel-plugin-add-react-displayname": "^0.0.5",
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 394893e9d444..a528c78fe19a 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/router/package.json b/lib/router/package.json
index 8308f486b757..40af241733f1 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 5361bdb4e362..abd05eb752fe 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -23,7 +23,7 @@
"dependencies": {
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.7",
- "@storybook/client-logger": "5.2.0-unreleased.0",
+ "@storybook/client-logger": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 5e26ff06b0ed..afb6284864aa 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -22,13 +22,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.2.0-unreleased.0",
- "@storybook/api": "5.2.0-unreleased.0",
- "@storybook/client-logger": "5.2.0-unreleased.0",
- "@storybook/components": "5.2.0-unreleased.0",
- "@storybook/core-events": "5.2.0-unreleased.0",
- "@storybook/router": "5.2.0-unreleased.0",
- "@storybook/theming": "5.2.0-unreleased.0",
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"core-js-pure": "^3.0.1",
diff --git a/package.json b/package.json
index 30003863bddd..8150f2f30343 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "5.2.0-unreleased.0",
+ "version": "5.2.0-alpha.23",
"private": true,
"description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
"keywords": [
From 2e3dd289aa1617a6cbfdb75e3c4d168718108ee4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 13:19:46 +0800
Subject: [PATCH 121/371] Update snapshots
---
.../src/stories/__snapshots__/core.stories.storyshot | 2 +-
.../tests/__snapshots__/storyshots.test.js.snap | 1 +
.../src/stories/__snapshots__/core.stories.storyshot | 2 +-
.../src/stories/__snapshots__/core.stories.storyshot | 2 +-
4 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
index 3cd3e7cbbba7..0025d65968cf 100644
--- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -12,7 +12,7 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
- Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+ Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 55ea770a53a6..e699806cefe3 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -5382,6 +5382,7 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
}
],
"globalParameter": "globalParameter",
+ "framework": "react",
"chapterParameter": "chapterParameter",
"storyParameter": "storyParameter",
"decoratorParameter": "decoratorParameter"
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
index 3ac3198ef022..2a250274756c 100644
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -6,7 +6,7 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
id="root"
>
- Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+ Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
index f94e524807e9..40d7a887f8a3 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -2,6 +2,6 @@
exports[`Storyshots Core|Parameters passed to story 1`] = `
- Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+ Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
`;
From f4967312161118cc41fd3cf3c21404b7e32df5c4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 13:44:35 +0800
Subject: [PATCH 122/371] Use process.env.CI if available
---
lib/core/src/server/cli/dev.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
index d0d366f7c96b..801acc82f207 100644
--- a/lib/core/src/server/cli/dev.js
+++ b/lib/core/src/server/cli/dev.js
@@ -56,6 +56,7 @@ async function getCLI(packageJson) {
host: 'SBCONFIG_HOSTNAME',
staticDir: 'SBCONFIG_STATIC_DIR',
configDir: 'SBCONFIG_CONFIG_DIR',
+ ci: 'CI',
});
if (typeof program.port === 'string' && program.port.length > 0) {
From cad915bce78a7c33c65fd2885b4b48e378eb88ad Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Tue, 18 Jun 2019 06:56:41 +0000
Subject: [PATCH 123/371] Bump css-loader from 2.1.1 to 3.0.0
Bumps [css-loader](https://github.com/webpack-contrib/css-loader) from 2.1.1 to 3.0.0.
- [Release notes](https://github.com/webpack-contrib/css-loader/releases)
- [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack-contrib/css-loader/compare/v2.1.1...v3.0.0)
Signed-off-by: dependabot-preview[bot]
---
lib/core/package.json | 2 +-
yarn.lock | 53 ++++++++++++++++++++++++++++++++++++++-----
2 files changed, 48 insertions(+), 7 deletions(-)
diff --git a/lib/core/package.json b/lib/core/package.json
index a5c0959ebac5..88f05dbb1e2b 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -48,7 +48,7 @@
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"corejs-upgrade-webpack-plugin": "^2.0.0",
- "css-loader": "^2.1.1",
+ "css-loader": "^3.0.0",
"detect-port": "^1.3.0",
"dotenv-webpack": "^1.7.0",
"ejs": "^2.6.1",
diff --git a/yarn.lock b/yarn.lock
index 7197f04ca629..de3157fb024e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9117,6 +9117,24 @@ css-loader@2.1.1, css-loader@^2.1.1:
postcss-value-parser "^3.3.0"
schema-utils "^1.0.0"
+css-loader@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.0.0.tgz#bdd48a4921eefedf1f0a55266585944d4e5efc63"
+ integrity sha512-WR6KZuCkFbnMhRrGPlkwAA7SSCtwqPwpyXJAPhotYkYsc0mKU9n/fu5wufy4jl2WhBw9Ia8gUQMIp/1w98DuPw==
+ dependencies:
+ camelcase "^5.3.1"
+ cssesc "^3.0.0"
+ icss-utils "^4.1.1"
+ loader-utils "^1.2.3"
+ normalize-path "^3.0.0"
+ postcss "^7.0.17"
+ postcss-modules-extract-imports "^2.0.0"
+ postcss-modules-local-by-default "^3.0.2"
+ postcss-modules-scope "^2.1.0"
+ postcss-modules-values "^3.0.0"
+ postcss-value-parser "^4.0.0"
+ schema-utils "^1.0.0"
+
css-parse@1.7.x:
version "1.7.0"
resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@@ -14160,10 +14178,10 @@ icss-replace-symbols@^1.1.0:
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
-icss-utils@^4.1.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e"
- integrity sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ==
+icss-utils@^4.0.0, icss-utils@^4.1.0, icss-utils@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+ integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
dependencies:
postcss "^7.0.14"
@@ -21009,6 +21027,16 @@ postcss-modules-local-by-default@^2.0.6:
postcss-selector-parser "^6.0.0"
postcss-value-parser "^3.3.1"
+postcss-modules-local-by-default@^3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
+ integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
+ dependencies:
+ icss-utils "^4.1.1"
+ postcss "^7.0.16"
+ postcss-selector-parser "^6.0.2"
+ postcss-value-parser "^4.0.0"
+
postcss-modules-scope@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
@@ -21025,6 +21053,14 @@ postcss-modules-values@^2.0.0:
icss-replace-symbols "^1.1.0"
postcss "^7.0.6"
+postcss-modules-values@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
+ integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
+ dependencies:
+ icss-utils "^4.0.0"
+ postcss "^7.0.6"
+
postcss-nesting@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
@@ -21273,7 +21309,7 @@ postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-sel
indexes-of "^1.0.1"
uniq "^1.0.1"
-postcss-selector-parser@^6.0.0:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
@@ -21306,6 +21342,11 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+postcss-value-parser@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d"
+ integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==
+
postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@@ -21333,7 +21374,7 @@ postcss@^6.0.9:
source-map "^0.6.1"
supports-color "^5.4.0"
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
version "7.0.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
From 4ef48b1e4630fedf1adf80ae3fa9dcd421447d7e Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 16:13:03 +0800
Subject: [PATCH 124/371] Doc blocks pure components
---
.../src/blocks/BlockBackgroundStyles.tsx | 9 +
.../src/blocks/ColorPalette.stories.tsx | 32 ++++
lib/components/src/blocks/ColorPalette.tsx | 156 ++++++++++++++++++
.../src/blocks/Description.stories.tsx | 17 ++
lib/components/src/blocks/Description.tsx | 10 ++
.../src/blocks/DocsPage.stories.tsx | 66 ++++++++
lib/components/src/blocks/DocsPage.tsx | 79 +++++++++
.../src/blocks/DocsPageExampleCaption.md | 93 +++++++++++
.../src/blocks/DocsPageExampleCaption.mdx | 93 +++++++++++
.../src/blocks/EmptyBlock.stories.tsx | 12 ++
lib/components/src/blocks/EmptyBlock.tsx | 21 +++
lib/components/src/blocks/IFrame.tsx | 71 ++++++++
.../src/blocks/IconGallery.stories.tsx | 34 ++++
lib/components/src/blocks/IconGallery.tsx | 57 +++++++
lib/components/src/blocks/Preview.stories.tsx | 82 +++++++++
lib/components/src/blocks/Preview.tsx | 91 ++++++++++
.../src/blocks/PropsTable/PropDef.ts | 7 +
.../src/blocks/PropsTable/PropRow.stories.tsx | 113 +++++++++++++
.../src/blocks/PropsTable/PropRow.tsx | 101 ++++++++++++
.../blocks/PropsTable/PropsTable.stories.tsx | 18 ++
.../src/blocks/PropsTable/PropsTable.tsx | 155 +++++++++++++++++
lib/components/src/blocks/Source.stories.tsx | 40 +++++
lib/components/src/blocks/Source.tsx | 59 +++++++
lib/components/src/blocks/Story.stories.tsx | 16 ++
lib/components/src/blocks/Story.tsx | 78 +++++++++
lib/components/src/blocks/Typeset.stories.tsx | 19 +++
lib/components/src/blocks/Typeset.tsx | 66 ++++++++
lib/components/src/blocks/index.ts | 10 ++
lib/components/src/index.ts | 3 +
29 files changed, 1608 insertions(+)
create mode 100644 lib/components/src/blocks/BlockBackgroundStyles.tsx
create mode 100644 lib/components/src/blocks/ColorPalette.stories.tsx
create mode 100644 lib/components/src/blocks/ColorPalette.tsx
create mode 100644 lib/components/src/blocks/Description.stories.tsx
create mode 100644 lib/components/src/blocks/Description.tsx
create mode 100644 lib/components/src/blocks/DocsPage.stories.tsx
create mode 100644 lib/components/src/blocks/DocsPage.tsx
create mode 100644 lib/components/src/blocks/DocsPageExampleCaption.md
create mode 100644 lib/components/src/blocks/DocsPageExampleCaption.mdx
create mode 100644 lib/components/src/blocks/EmptyBlock.stories.tsx
create mode 100644 lib/components/src/blocks/EmptyBlock.tsx
create mode 100644 lib/components/src/blocks/IFrame.tsx
create mode 100644 lib/components/src/blocks/IconGallery.stories.tsx
create mode 100644 lib/components/src/blocks/IconGallery.tsx
create mode 100644 lib/components/src/blocks/Preview.stories.tsx
create mode 100644 lib/components/src/blocks/Preview.tsx
create mode 100644 lib/components/src/blocks/PropsTable/PropDef.ts
create mode 100644 lib/components/src/blocks/PropsTable/PropRow.stories.tsx
create mode 100644 lib/components/src/blocks/PropsTable/PropRow.tsx
create mode 100644 lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
create mode 100644 lib/components/src/blocks/PropsTable/PropsTable.tsx
create mode 100644 lib/components/src/blocks/Source.stories.tsx
create mode 100644 lib/components/src/blocks/Source.tsx
create mode 100644 lib/components/src/blocks/Story.stories.tsx
create mode 100644 lib/components/src/blocks/Story.tsx
create mode 100644 lib/components/src/blocks/Typeset.stories.tsx
create mode 100644 lib/components/src/blocks/Typeset.tsx
create mode 100644 lib/components/src/blocks/index.ts
diff --git a/lib/components/src/blocks/BlockBackgroundStyles.tsx b/lib/components/src/blocks/BlockBackgroundStyles.tsx
new file mode 100644
index 000000000000..a037b5df830e
--- /dev/null
+++ b/lib/components/src/blocks/BlockBackgroundStyles.tsx
@@ -0,0 +1,9 @@
+import { Theme } from '@storybook/theming';
+
+export const getBlockBackgroundStyle: (theme: Theme) => object = (theme: Theme) => ({
+ borderRadius: theme.appBorderRadius,
+ background: theme.background.content,
+ boxShadow:
+ theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+ border: `1px solid ${theme.appBorderColor}`,
+});
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
new file mode 100644
index 000000000000..158708b10a99
--- /dev/null
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ColorItem, ColorPalette } from './ColorPalette';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+ title: 'Docs|ColorPalette',
+ Component: ColorPalette,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const defaultStyle = () => (
+
+
+
+
+
+
+);
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
new file mode 100644
index 000000000000..c68a192512c3
--- /dev/null
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -0,0 +1,156 @@
+import React, { Fragment } from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const ItemTitle = styled.div(({ theme }) => ({
+ fontWeight: theme.typography.weight.bold,
+}));
+
+const ItemSubtitle = styled.div(({ theme }) => ({
+ color:
+ theme.base === 'light'
+ ? transparentize(0.2, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+}));
+
+const ItemDescription = styled.div({
+ flex: '0 0 30%',
+ lineHeight: '20px',
+ marginTop: 5,
+});
+
+const SwatchLabel = styled.div(({ theme }) => ({
+ flex: 1,
+ textAlign: 'center',
+ fontFamily: theme.typography.fonts.mono,
+ fontSize: theme.typography.size.s1,
+ lineHeight: 1,
+ overflow: 'hidden',
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+
+ '> div': {
+ display: 'inline-block',
+ overflow: 'hidden',
+ maxWidth: '100%',
+ },
+}));
+
+const SwatchLabels = styled.div({
+ display: 'flex',
+ flexDirection: 'row',
+});
+
+const Swatch = styled.div({
+ flex: 1,
+});
+
+const SwatchColors = styled.div(({ theme }) => ({
+ ...getBlockBackgroundStyle(theme),
+ display: 'flex',
+ flexDirection: 'row',
+ height: 50,
+ marginBottom: 5,
+ overflow: 'hidden',
+}));
+
+const SwatchSpecimen = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ position: 'relative',
+ marginBottom: 30,
+});
+
+const Swatches = styled.div({
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'row',
+});
+
+const Item = styled.div({
+ display: 'flex',
+ alignItems: 'flex-start',
+});
+
+const ListName = styled.div({
+ flex: '0 0 30%',
+});
+
+const ListSwatches = styled.div({
+ flex: 1,
+});
+
+const ListHeading = styled.div(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingBottom: 20,
+ fontWeight: theme.typography.weight.bold,
+
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+}));
+
+const List = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+interface ColorProps {
+ title: string;
+ subtitle: string;
+ colors: string[];
+}
+
+export const ColorItem: React.FunctionComponent = ({ title, subtitle, colors }) => {
+ return (
+ -
+
+ {title}
+ {subtitle}
+
+
+
+
+
+ {colors.map(color => (
+
+ ))}
+
+
+ {colors.map(color => (
+
+ {color}
+
+ ))}
+
+
+
+
+ );
+};
+
+export const ColorPalette: React.FunctionComponent = ({ children, ...props }) => {
+ return (
+
+
+ Name
+ Swatches
+
+ {children}
+
+ );
+};
diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx
new file mode 100644
index 000000000000..c239c16c138c
--- /dev/null
+++ b/lib/components/src/blocks/Description.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Description } from './Description';
+
+import { DocsPageWrapper } from './DocsPage';
+import markdownCaption from './DocsPageExampleCaption.md';
+
+export default {
+ title: 'Docs|Description',
+ Component: Description,
+ decorators: [getStory => {getStory()} ],
+};
+
+const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
+
+export const text = () => ;
+
+export const markdown = () => ;
diff --git a/lib/components/src/blocks/Description.tsx b/lib/components/src/blocks/Description.tsx
new file mode 100644
index 000000000000..1645f88d9fbc
--- /dev/null
+++ b/lib/components/src/blocks/Description.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+
+export interface DescriptionProps {
+ markdown: string;
+}
+
+export const Description: React.FunctionComponent = ({ markdown }) => (
+ {markdown}
+);
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
new file mode 100644
index 000000000000..3f500ef1c7db
--- /dev/null
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { DocsPage, DocsWrapper, DocsContent } from './DocsPage';
+import * as storyStories from './Story.stories';
+import * as previewStories from './Preview.stories';
+import * as propsTableStories from './PropsTable/PropsTable.stories';
+import * as sourceStories from './Source.stories';
+import * as descriptionStories from './Description.stories';
+
+export default {
+ title: 'Docs|DocsPage',
+ Component: DocsPage,
+ decorators: [
+ storyFn => (
+
+ {storyFn()}
+
+ ),
+ ],
+};
+
+export const empty = () => (
+
+ {storyStories.error()}
+ {propsTableStories.error()}
+ {sourceStories.sourceUnavailable()}
+
+);
+
+export const noText = () => (
+
+ {previewStories.single()}
+ {propsTableStories.normal()}
+ {sourceStories.jsx()}
+
+);
+noText.title = 'no text';
+
+export const text = () => (
+
+ {descriptionStories.text()}
+ {previewStories.single()}
+ {propsTableStories.normal()}
+ {sourceStories.jsx()}
+
+);
+
+export const withSubtitle = () => (
+
+ {descriptionStories.text()}
+ {previewStories.single()}
+ {propsTableStories.normal()}
+ {sourceStories.jsx()}
+
+);
+
+export const markdown = () => (
+
+ {descriptionStories.markdown()}
+ {previewStories.single()}
+ {propsTableStories.normal()}
+ {sourceStories.jsx()}
+
+);
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
new file mode 100644
index 000000000000..5b2b152fba3d
--- /dev/null
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { DocumentFormatting } from '../typography/DocumentFormatting';
+
+const breakpoint = 600;
+const pageMargin = '5.55555';
+
+export interface DocsPageProps {
+ title: string;
+ subtitle?: string;
+}
+
+const Title = styled.h1(({ theme }) => ({
+ // overrides h1 in DocumentFormatting
+ '&&': {
+ fontSize: theme.typography.size.m3,
+ lineHeight: '32px',
+
+ [`@media (min-width: ${breakpoint * 1}px)`]: {
+ fontSize: theme.typography.size.l1,
+ lineHeight: '36px',
+ },
+ },
+}));
+
+const Subtitle = styled.h2(({ theme }) => ({
+ // overrides h2 in DocumentFormatting
+ '&&': {
+ fontWeight: theme.typography.weight.regular,
+ fontSize: theme.typography.size.s3,
+ lineHeight: '20px',
+ borderBottom: 'none',
+ marginBottom: '15px',
+
+ [`@media (min-width: ${breakpoint * 1}px)`]: {
+ fontSize: theme.typography.size.m1,
+ lineHeight: '28px',
+ marginBottom: '25px',
+ },
+ },
+
+ color:
+ theme.base === 'light'
+ ? transparentize(0.25, theme.color.defaultText)
+ : transparentize(0.25, theme.color.defaultText),
+}));
+
+export const DocsContent = styled(DocumentFormatting)({
+ maxWidth: 800,
+ width: '100%',
+});
+
+export const DocsWrapper = styled.div(({ theme }) => ({
+ background: theme.background.content,
+ display: 'flex',
+ justifyContent: 'center',
+ minHeight: '100vh',
+ padding: '4rem 20px',
+
+ [`@media (min-width: ${breakpoint * 1}px)`]: {},
+}));
+
+export const DocsPageWrapper: React.FunctionComponent = ({ children }) => (
+
+ {children}
+
+);
+
+const DocsPage: React.FunctionComponent = ({ title, subtitle, children }) => (
+ <>
+ {title && {title} }
+ {subtitle && {subtitle} }
+ {children}
+ >
+);
+
+export { DocsPage };
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.md b/lib/components/src/blocks/DocsPageExampleCaption.md
new file mode 100644
index 000000000000..3542ca2cd8d2
--- /dev/null
+++ b/lib/components/src/blocks/DocsPageExampleCaption.md
@@ -0,0 +1,93 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://placehold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+ - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+ 1. Ordered sub-list
+ 2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+ - This is getting
+ - Very ...
+ - Very ...
+ - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables | Are | Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is | right-aligned | \$1600 |
+| col 2 is | centered | \$12 |
+| zebra stripes | are neat | \$1 |
+
+Let's throw in a crazy table, because why not?
+
+| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y) | + | | + | + | + | + | + | + | | | + | + |
+| [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + | + |
+| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
+| [centered](addons/centered) | + | | + | + | | + | + | | + | | + | + |
+| [contexts](addons/contexts) | + | | + | | | | | | | | | + |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => ;
+```
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.mdx b/lib/components/src/blocks/DocsPageExampleCaption.mdx
new file mode 100644
index 000000000000..3542ca2cd8d2
--- /dev/null
+++ b/lib/components/src/blocks/DocsPageExampleCaption.mdx
@@ -0,0 +1,93 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://placehold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+ - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+ 1. Ordered sub-list
+ 2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+ - This is getting
+ - Very ...
+ - Very ...
+ - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables | Are | Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is | right-aligned | \$1600 |
+| col 2 is | centered | \$12 |
+| zebra stripes | are neat | \$1 |
+
+Let's throw in a crazy table, because why not?
+
+| | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y) | + | | + | + | + | + | + | + | | | + | + |
+| [actions](addons/actions) | + | + | + | + | + | + | + | + | + | + | + | + |
+| [backgrounds](addons/backgrounds) | + | \* | + | + | + | + | + | + | + | + | + | + |
+| [centered](addons/centered) | + | | + | + | | + | + | | + | | + | + |
+| [contexts](addons/contexts) | + | | + | | | | | | | | | + |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => ;
+```
diff --git a/lib/components/src/blocks/EmptyBlock.stories.tsx b/lib/components/src/blocks/EmptyBlock.stories.tsx
new file mode 100644
index 000000000000..f97fdb7a30e3
--- /dev/null
+++ b/lib/components/src/blocks/EmptyBlock.stories.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { EmptyBlock } from './EmptyBlock';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+ title: 'Docs|EmptyBlock',
+ Component: EmptyBlock,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const error = () => Generic error message ;
diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/components/src/blocks/EmptyBlock.tsx
new file mode 100644
index 000000000000..155a51f46ed9
--- /dev/null
+++ b/lib/components/src/blocks/EmptyBlock.tsx
@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+const Wrapper = styled.div(({ theme }) => ({
+ backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+ borderRadius: theme.appBorderRadius,
+ border: `1px dashed ${theme.appBorderColor}`,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '20px',
+ margin: '25px 0 40px',
+
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+}));
+
+export const EmptyBlock = (props: any) => ;
diff --git a/lib/components/src/blocks/IFrame.tsx b/lib/components/src/blocks/IFrame.tsx
new file mode 100644
index 000000000000..e17a94cd4763
--- /dev/null
+++ b/lib/components/src/blocks/IFrame.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import window from 'global';
+
+interface IFrameProps {
+ id: string;
+ key?: string;
+ title: string;
+ src: string;
+ allowFullScreen: boolean;
+ scale: number;
+ style?: any;
+}
+
+interface BodyStyle {
+ width: string;
+ height: string;
+ transform: string;
+ transformOrigin: string;
+}
+
+export class IFrame extends React.Component {
+ iframe: any = null;
+
+ componentDidMount() {
+ const { id } = this.props;
+ this.iframe = window.document.getElementById(id);
+ }
+
+ shouldComponentUpdate(nextProps: IFrameProps) {
+ const { src, scale } = nextProps;
+ // eslint-disable-next-line react/destructuring-assignment
+ if (scale !== this.props.scale) {
+ this.setIframeBodyStyle({
+ width: `${scale * 100}%`,
+ height: `${scale * 100}%`,
+ transform: `scale(${1 / scale})`,
+ transformOrigin: 'top left',
+ });
+ }
+ // if(this.props.src !== src) {
+ // debugger;
+ // }
+ return false;
+ }
+
+ setIframeBodyStyle(style: BodyStyle) {
+ return Object.assign(this.iframe.contentDocument.body.style, style);
+ }
+
+ render() {
+ const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
+ return (
+
+ );
+ }
+}
+
+// IFrame.propTypes = {
+// id: PropTypes.string.isRequired,
+// title: PropTypes.string.isRequired,
+// src: PropTypes.string.isRequired,
+// allowFullScreen: PropTypes.bool.isRequired,
+// scale: PropTypes.number.isRequired,
+// };
diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/components/src/blocks/IconGallery.stories.tsx
new file mode 100644
index 000000000000..3569668dfc34
--- /dev/null
+++ b/lib/components/src/blocks/IconGallery.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconItem, IconGallery } from './IconGallery';
+
+import { DocsPageWrapper } from './DocsPage';
+import { Icons as ExampleIcon } from '../icon/icon';
+
+export default {
+ title: 'Docs|IconGallery',
+ Component: IconGallery,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const defaultStyle = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx
new file mode 100644
index 000000000000..af5288d512ba
--- /dev/null
+++ b/lib/components/src/blocks/IconGallery.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const ItemLabel = styled.div({
+ marginLeft: 10,
+ lineHeight: 1.2,
+});
+
+const ItemSpecimen = styled.div(({ theme }) => ({
+ ...getBlockBackgroundStyle(theme),
+ overflow: 'hidden',
+ height: 40,
+ width: 40,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: 'none',
+
+ '> img, > svg': {
+ width: 20,
+ height: 20,
+ },
+}));
+
+const Item = styled.div({
+ display: 'inline-flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ flex: '0 1 calc(20% - 10px)',
+ minWidth: 120,
+
+ margin: '0px 10px 30px 0',
+});
+
+const List = styled.div({
+ display: 'flex',
+ flexFlow: 'row wrap',
+});
+
+interface IconItemProps {
+ name: string;
+}
+
+export const IconItem: React.FunctionComponent = ({ name, children }) => {
+ return (
+ -
+
{children}
+ {name}
+
+ );
+};
+
+export const IconGallery: React.FunctionComponent = ({ children, ...props }) => {
+ return {children}
;
+};
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
new file mode 100644
index 000000000000..8056e061fe30
--- /dev/null
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { Preview } from './Preview';
+import { DocsPageWrapper } from './DocsPage';
+import { Button } from '../Button/Button';
+import * as sourceStories from './Source.stories';
+
+export default {
+ title: 'Docs|Preview',
+ Component: Preview,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const codeCollapsed = () => (
+
+ Button 1
+
+);
+
+export const codeExpanded = () => (
+
+ Button 1
+
+);
+
+export const codeError = () => (
+
+ Button 1
+
+);
+
+export const single = () => (
+
+ Button 1
+
+);
+
+export const row = () => (
+
+ Button 1
+ Button 2
+ Button 3
+ Button 4
+ Button 5
+ Button 6
+ Button 7
+
+);
+
+export const column = () => (
+
+ Button 1
+ Button 2
+ Button 3
+
+);
+
+export const gridWith3Columns = () => (
+
+ Button 1
+ Button 2
+ Button 3
+ Button 4
+ Button 5
+ Button 6
+ Button 7 long long long long long title
+ Button 8
+ Button 9
+ Button 10
+ Button 11
+ Button 12
+ Button 13
+ Button 14
+ Button 15
+ Button 16
+ Button 17
+ Button 18
+ Button 19
+ Button 20
+
+);
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
new file mode 100644
index 000000000000..d1f257b0c7e3
--- /dev/null
+++ b/lib/components/src/blocks/Preview.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { darken } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+import { Source, SourceProps } from './Source';
+import { ActionBar } from '../ActionBar/ActionBar';
+
+export interface PreviewProps {
+ isColumn?: boolean;
+ columns?: number;
+ withSource?: SourceProps;
+ isExpanded?: boolean;
+}
+
+const ChildrenContainer = styled.div(({ isColumn, columns }) => ({
+ display: 'flex',
+ flexWrap: 'wrap',
+ flexDirection: isColumn ? 'column' : 'row',
+ marginTop: -20,
+
+ '> *': {
+ flex: columns ? `1 1 calc(100%/${columns} - 20px)` : `1 1 0%`,
+ marginRight: 20,
+ marginTop: 20,
+ },
+}));
+
+const StyledSource = styled(Source)(({ theme }) => ({
+ margin: 0,
+ borderTopLeftRadius: 0,
+ borderTopRightRadius: 0,
+ border: 'none',
+
+ background:
+ theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
+ color: theme.color.lightest,
+ button: {
+ background:
+ theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
+ },
+}));
+
+const PreviewWrapper = styled.div(({ theme, withSource }) => ({
+ ...getBlockBackgroundStyle(theme),
+ padding: '30px 20px',
+ position: 'relative',
+ borderBottomLeftRadius: withSource && 0,
+ borderBottomRightRadius: withSource && 0,
+}));
+
+const PreviewContainer = styled.div({
+ margin: '25px 0 40px',
+});
+
+const Preview: React.FunctionComponent = ({
+ isColumn,
+ columns,
+ children,
+ withSource,
+ isExpanded = false,
+ ...props
+}) => {
+ const [expanded, setExpanded] = React.useState(isExpanded);
+ const { source, actionItem } = expanded
+ ? {
+ source: ,
+ actionItem: { title: 'Hide code', onClick: () => setExpanded(false) },
+ }
+ : {
+ source: null,
+ actionItem: { title: 'Show code', onClick: () => setExpanded(true) },
+ };
+ return (
+
+
+
+ {Array.isArray(children) ? (
+ children.map((child, i) => {child}
)
+ ) : (
+ {children}
+ )}
+
+ {withSource && }
+
+ {withSource && source}
+
+ );
+};
+
+export { Preview };
diff --git a/lib/components/src/blocks/PropsTable/PropDef.ts b/lib/components/src/blocks/PropsTable/PropDef.ts
new file mode 100644
index 000000000000..3674e9e64c31
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropDef.ts
@@ -0,0 +1,7 @@
+export interface PropDef {
+ name: string;
+ type: any;
+ required: boolean;
+ description?: string;
+ defaultValue?: any;
+}
diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
new file mode 100644
index 000000000000..25ca899dec43
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { PropRow } from './PropRow';
+
+import { Table } from './PropsTable';
+import { DocsPageWrapper } from '../DocsPage';
+
+export default {
+ Component: PropRow,
+ title: 'Docs|PropRow',
+ decorators: [
+ getStory => (
+
+
+
+ ),
+ ],
+};
+
+const stringDef = {
+ name: 'someString',
+ type: { name: 'string' },
+ required: true,
+ description: 'someString description',
+ defaultValue: 'fixme',
+};
+
+const longNameDef = {
+ ...stringDef,
+ name: 'reallyLongStringThatTakesUpSpace',
+};
+
+const longDescDef = {
+ ...stringDef,
+ description: 'really long description that takes up a lot of space. sometimes this happens.',
+};
+
+const numberDef = {
+ name: 'someNumber',
+ type: { name: 'number' },
+ required: false,
+ description: 'someNumber description',
+ defaultValue: 0,
+};
+
+const objectDef = {
+ name: 'someObject',
+ type: { name: 'objectOf', value: { name: 'number' } },
+ required: false,
+ description: 'A simple `objectOf` propType.',
+ defaultValue: { value: '{ key: 1 }', computed: false },
+};
+
+const arrayDef = {
+ name: 'someOArray',
+ type: { name: 'arrayOf', value: { name: 'number' } },
+ required: false,
+ description: 'array of a certain type',
+ defaultValue: { value: '[1, 2, 3]', computed: false },
+};
+
+const complexDef = {
+ name: 'someComplex',
+ type: {
+ name: 'objectOf',
+ value: {
+ name: 'shape',
+ value: {
+ id: {
+ name: 'number',
+ description:
+ "Just an internal propType for a shape.\n It's also required, and as you can see it supports multi-line comments!",
+ required: true,
+ },
+ func: {
+ name: 'func',
+ description: 'A simple non-required function',
+ required: false,
+ },
+ arr: {
+ name: 'arrayOf',
+ value: {
+ name: 'shape',
+ value: {
+ index: {
+ name: 'number',
+ description: '5-level deep propType definition and still works.',
+ required: true,
+ },
+ },
+ },
+ description: 'An `arrayOf` shape',
+ required: false,
+ },
+ },
+ },
+ },
+ required: false,
+ description: 'A very complex `objectOf` propType.',
+ defaultValue: {
+ value: '{\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n}',
+ computed: false,
+ },
+};
+
+export const string = () => ;
+export const longName = () => ;
+export const longDesc = () => ;
+export const number = () => ;
+export const objectOf = () => ;
+export const arrayOf = () => ;
+export const complex = () => ;
diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx
new file mode 100644
index 000000000000..c0fff8456258
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropRow.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { PropDef } from './PropDef';
+
+enum PropType {
+ SHAPE = 'shape',
+ UNION = 'union',
+ ARRAYOF = 'arrayOf',
+ OBJECTOF = 'objectOf',
+ ENUM = 'enum',
+ INSTANCEOF = 'instanceOf',
+}
+
+interface PrettyPropTypeProps {
+ type: any;
+}
+
+interface PrettyPropValProps {
+ value: any;
+}
+
+interface PropRowProps {
+ row: PropDef;
+ // FIXME: row options
+}
+
+const Name = styled.span({ fontWeight: 'bold' });
+
+const Required = styled.span(({ theme }) => ({
+ color: theme.color.negative,
+ fontFamily: theme.typography.fonts.mono,
+}));
+
+const StyledPropDef = styled.div(({ theme }) => ({
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+ fontFamily: theme.typography.fonts.mono,
+ fontSize: `${theme.typography.size.code}%`,
+}));
+
+const prettyPrint = (type: any): string => {
+ if (!type || !type.name) {
+ return '';
+ }
+ let fields = '';
+ switch (type.name) {
+ case PropType.SHAPE:
+ fields = Object.keys(type.value)
+ .map((key: string) => `${key}: ${prettyPrint(type.value[key])}`)
+ .join(', ');
+ return `{ ${fields} }`;
+ case PropType.UNION:
+ return Array.isArray(type.value)
+ ? `Union<${type.value.map(prettyPrint).join(' | ')}>`
+ : JSON.stringify(type.value);
+ case PropType.ARRAYOF:
+ return `[ ${prettyPrint(type.value)} ]`;
+ case PropType.OBJECTOF:
+ return `objectOf(${prettyPrint(type.value)})`;
+ case PropType.ENUM:
+ if (type.computed) {
+ return JSON.stringify(type);
+ }
+ return Array.isArray(type.value)
+ ? type.value.map((v: any) => v && v.value && v.value.toString()).join(' | ')
+ : JSON.stringify(type);
+ case PropType.INSTANCEOF:
+ return `instanceOf(${JSON.stringify(type.value)})`;
+ default:
+ return type.name;
+ }
+};
+
+export const PrettyPropType: React.FunctionComponent = ({ type }) => (
+ {prettyPrint(type)}
+);
+
+export const PrettyPropVal: React.FunctionComponent = ({ value }) => (
+ {JSON.stringify(value)}
+);
+
+export const PropRow: React.FunctionComponent = ({
+ row: { name, type, required, description, defaultValue },
+}) => (
+
+
+ {name}
+ {required ? * : null}
+
+
+ {description}
+
+
+
+
+ {defaultValue === undefined ? '-' : }
+
+);
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
new file mode 100644
index 000000000000..6ac13b588692
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { PropsTable, PropsTableError } from './PropsTable';
+import { DocsPageWrapper } from '../DocsPage';
+import * as rowStories from './PropRow.stories';
+
+export default {
+ Component: PropsTable,
+ title: 'Docs|PropTable',
+ decorators: [storyFn => {storyFn()} ],
+};
+
+export const error = () => ;
+
+export const empty = () => ;
+
+const { row: stringRow } = rowStories.string().props;
+const { row: numberRow } = rowStories.number().props;
+export const normal = () => ;
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
new file mode 100644
index 000000000000..af1ad1f2158d
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { opacify, transparentize } from 'polished';
+import { PropRow } from './PropRow';
+import { PropDef } from './PropDef';
+import { EmptyBlock } from '../EmptyBlock';
+
+export const Table = styled.table(({ theme }) => ({
+ '&&': {
+ // Resets for cascading/system styles
+ borderCollapse: 'collapse',
+ borderSpacing: 0,
+
+ tr: {
+ border: 'none',
+ background: 'none',
+ },
+
+ 'td, th': {
+ padding: 0,
+ border: 'none',
+ },
+ // End Resets
+
+ fontSize: theme.typography.size.s2,
+ lineHeight: '20px',
+ textAlign: 'left',
+ width: '100%',
+
+ // Margin collapse
+ marginTop: '25px',
+ marginBottom: '40px',
+
+ 'th:first-of-type, td:first-of-type': {
+ paddingLeft: 20,
+ },
+
+ 'th:last-of-type, td:last-of-type': {
+ paddingRight: '20px',
+ width: '20%',
+ },
+
+ th: {
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+ paddingTop: 10,
+ paddingBottom: 10,
+
+ '&:not(:first-of-type)': {
+ paddingLeft: 15,
+ paddingRight: 15,
+ },
+ },
+
+ td: {
+ paddingTop: '16px',
+ paddingBottom: '16px',
+
+ '&:not(:first-of-type)': {
+ paddingLeft: 15,
+ paddingRight: 15,
+ },
+
+ '&:last-of-type': {
+ paddingRight: '20px',
+ },
+ },
+
+ // Table "block" styling
+ // Emphasize tbody's background and set borderRadius
+ // Calling out because styling tables is finicky
+
+ // Makes border alignment consistent w/other DocBlocks
+ marginLeft: 1,
+ marginRight: 1,
+
+ 'tr:first-child td:first-child': {
+ borderTopLeftRadius: theme.appBorderRadius,
+ },
+
+ 'tr:first-child td:last-child': {
+ borderTopRightRadius: theme.appBorderRadius,
+ },
+ 'tr:last-child td:first-child': {
+ borderBottomLeftRadius: theme.appBorderRadius,
+ },
+
+ 'tr:last-child td:last-child': {
+ borderBottomRightRadius: theme.appBorderRadius,
+ },
+
+ tbody: {
+ // slightly different than the other DocBlock shadows to account for table styling gymnastics
+ boxShadow:
+ theme.base === 'light'
+ ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
+ ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
+ : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
+ ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
+ borderRadius: theme.appBorderRadius,
+
+ tr: {
+ background: 'transparent',
+ '&:not(:first-child)': {
+ borderTop: `1px solid ${theme.appBorderColor}`,
+ },
+ },
+
+ td: {
+ background: theme.background.content,
+ },
+ },
+ // End finicky table styling
+ },
+}));
+
+export enum PropsTableError {
+ NO_COMPONENT = 'No component found',
+ PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.',
+}
+
+export interface PropsTableProps {
+ rows?: PropDef[];
+ error?: PropsTableError;
+ // FIXME: table options
+}
+
+const PropsTable: React.FunctionComponent = ({ rows, error = null }) => {
+ if (error) {
+ return {error} ;
+ }
+ if (rows.length === 0) {
+ return No props found for this component ;
+ }
+ return (
+
+
+
+ Name
+ Description
+ Default
+
+
+
+ {rows.map(row => (
+
+ ))}
+
+
+ );
+};
+
+export { PropsTable, PropDef };
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
new file mode 100644
index 000000000000..1ab27291e2ff
--- /dev/null
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Source, SourceError } from './Source';
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+ title: 'Docs|Source',
+ Component: Source,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const noStory = () => ;
+noStory.title = 'no story';
+
+export const sourceUnavailable = () => ;
+sourceUnavailable.title = 'source unavailable';
+
+const jsxCode = `
+
+ a.id} />
+
+`.trim();
+
+const jsxProps = {};
+export const jsx = () => ;
+
+const cssCode = `
+@-webkit-keyframes blinker {
+ from { opacity: 1.0; }
+ to { opacity: 0.0; }
+}
+
+.waitingForConnection {
+ -webkit-animation-name: blinker;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+ -webkit-animation-duration: 1.7s;
+}
+`.trim();
+
+export const css = () => ;
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
new file mode 100644
index 000000000000..bfe4b6e0dbbe
--- /dev/null
+++ b/lib/components/src/blocks/Source.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
+import { EmptyBlock } from './EmptyBlock';
+
+import { SyntaxHighlighter } from '../syntaxhighlighter/syntaxhighlighter';
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
+ // DocBlocks-specific styling and overrides
+ margin: '25px 0 40px',
+ boxShadow:
+ theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+
+ 'pre.hljs': {
+ padding: 20,
+ background: 'inherit',
+ },
+}));
+
+export enum SourceError {
+ NO_STORY = 'There\u2019s no story here.',
+ SOURCE_UNAVAILABLE = 'Oh no! The source is not available.',
+}
+
+export interface SourceProps {
+ language?: string;
+ code?: string;
+ error?: SourceError;
+ dark?: boolean;
+}
+
+const Source: React.FunctionComponent = ({
+ language,
+ code,
+ error = null,
+ dark,
+ ...props
+}) => {
+ if (error) {
+ return {error} ;
+ }
+ const syntaxHighlighter = (
+
+ {code}
+
+ );
+ if (typeof dark === 'undefined') {
+ return syntaxHighlighter;
+ }
+ const overrideTheme = dark ? themes.dark : themes.light;
+ return {syntaxHighlighter} ;
+};
+
+export { Source };
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
new file mode 100644
index 000000000000..ac982f0efbb7
--- /dev/null
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Story, StoryError } from './Story';
+import { DocsPageWrapper } from './DocsPage';
+import { Button } from '../Button/Button';
+
+export default {
+ title: 'Docs|Story',
+ Component: Story,
+ decorators: [getStory => {getStory()} ],
+};
+
+export const error = () => ;
+
+const buttonFn = () => Hello Button ;
+
+export const inline = () => ;
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
new file mode 100644
index 000000000000..41b078d4c35e
--- /dev/null
+++ b/lib/components/src/blocks/Story.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { IFrame } from './IFrame';
+import { EmptyBlock } from './EmptyBlock';
+
+const BASE_URL = 'iframe.html';
+
+export enum StoryError {
+ NO_STORY = 'No component or story to display',
+}
+
+interface InlineStoryProps {
+ title: string;
+ height?: string;
+ storyFn: () => React.ElementType;
+}
+
+interface IFrameStoryProps {
+ title: string;
+ height?: string;
+ id: string;
+}
+
+// How do you XOR properties in typescript?
+export interface StoryProps {
+ inline: boolean;
+ title: string;
+ height?: string;
+ id?: string;
+ storyFn?: () => React.ElementType;
+ error?: StoryError;
+}
+
+const InlineStory: React.FunctionComponent = ({ storyFn, height }) => (
+ {storyFn()}
+);
+
+const IFrameStory: React.FunctionComponent = ({
+ id,
+ title,
+ height = '500px',
+}) => (
+
+
+
+);
+
+const Story: React.FunctionComponent = ({
+ error,
+ height,
+ id,
+ inline,
+ storyFn,
+ title,
+}) => {
+ if (error) {
+ return {error} ;
+ }
+ return inline ? (
+
+ ) : (
+
+ );
+};
+
+export { Story };
diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/components/src/blocks/Typeset.stories.tsx
new file mode 100644
index 000000000000..03af542d2e40
--- /dev/null
+++ b/lib/components/src/blocks/Typeset.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Typeset } from './Typeset';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+ title: 'Docs|Typeset',
+ Component: Typeset,
+ decorators: [getStory => {getStory()} ],
+};
+
+const fontSizes = [12, 14, 16, 20, 24, 32, 40, 48];
+const fontWeight = 900;
+
+export const withFontSizes = () => ;
+export const withFontWeight = () => ;
+export const withWeightText = () => (
+
+);
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
new file mode 100644
index 000000000000..068f95b273ca
--- /dev/null
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const Label = styled.div(({ theme }) => ({
+ marginRight: 30,
+ fontSize: `${theme.typography.size.s1}px`,
+ color:
+ theme.base === 'light'
+ ? transparentize(0.4, theme.color.defaultText)
+ : transparentize(0.6, theme.color.defaultText),
+}));
+
+const Sample = styled.div({
+ lineHeight: 1,
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+});
+
+const TypeSpecimen = styled.div({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'baseline',
+ '&:not(:last-child)': { marginBottom: '1rem' },
+});
+
+const Wrapper = styled.div(({ theme }) => ({
+ ...getBlockBackgroundStyle(theme),
+ margin: '25px 0 40px',
+ padding: '30px 20px',
+}));
+
+export interface TypesetProps {
+ fontSizes: number[];
+ fontWeight?: number;
+ sampleText?: string;
+}
+
+export const Typeset: React.FunctionComponent = ({
+ fontSizes,
+ fontWeight,
+ sampleText,
+ ...props
+}) => {
+ const fontSizesReversed = fontSizes.reverse();
+ return (
+
+ {fontSizesReversed.map(num => (
+
+ {num}px
+
+ {sampleText || 'Was he a beast if music could move him so?'}
+
+
+ ))}
+
+ );
+};
diff --git a/lib/components/src/blocks/index.ts b/lib/components/src/blocks/index.ts
new file mode 100644
index 000000000000..3020d6ec5700
--- /dev/null
+++ b/lib/components/src/blocks/index.ts
@@ -0,0 +1,10 @@
+export * from './Description';
+export * from './DocsPage';
+export * from './Preview';
+export * from './PropsTable/PropsTable';
+export * from './Source';
+export * from './Story';
+export * from './IFrame';
+export * from './Typeset';
+export * from './ColorPalette';
+export * from './IconGallery';
diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
index 668975136c25..c986162212db 100644
--- a/lib/components/src/index.ts
+++ b/lib/components/src/index.ts
@@ -32,3 +32,6 @@ export { AddonPanel } from './addon-panel/addon-panel';
export { Icons } from './icon/icon';
export { StorybookLogo } from './brand/StorybookLogo';
export { StorybookIcon } from './brand/StorybookIcon';
+
+// Doc blocks
+export * from './blocks';
From 5b851b8be234bca7d03941905b87dffda1605611 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 16:13:53 +0800
Subject: [PATCH 125/371] Doc blocks container components
---
addons/docs/blocks.js | 1 +
addons/docs/package.json | 9 +-
addons/docs/src/blocks/Description.tsx | 69 ++++++++++++
addons/docs/src/blocks/DocsContainer.tsx | 52 +++++++++
addons/docs/src/blocks/DocsContext.ts | 13 +++
addons/docs/src/blocks/DocsPage.tsx | 136 +++++++++++++++++++++++
addons/docs/src/blocks/Meta.tsx | 16 +++
addons/docs/src/blocks/Preview.tsx | 48 ++++++++
addons/docs/src/blocks/Props.tsx | 57 ++++++++++
addons/docs/src/blocks/Source.tsx | 81 ++++++++++++++
addons/docs/src/blocks/Story.tsx | 56 ++++++++++
addons/docs/src/blocks/Wrapper.tsx | 9 ++
addons/docs/src/blocks/index.ts | 12 ++
addons/docs/src/blocks/shared.ts | 1 +
addons/docs/src/lib/getPropDefs.ts | 87 +++++++++++++++
15 files changed, 646 insertions(+), 1 deletion(-)
create mode 100644 addons/docs/blocks.js
create mode 100644 addons/docs/src/blocks/Description.tsx
create mode 100644 addons/docs/src/blocks/DocsContainer.tsx
create mode 100644 addons/docs/src/blocks/DocsContext.ts
create mode 100644 addons/docs/src/blocks/DocsPage.tsx
create mode 100644 addons/docs/src/blocks/Meta.tsx
create mode 100644 addons/docs/src/blocks/Preview.tsx
create mode 100644 addons/docs/src/blocks/Props.tsx
create mode 100644 addons/docs/src/blocks/Source.tsx
create mode 100644 addons/docs/src/blocks/Story.tsx
create mode 100644 addons/docs/src/blocks/Wrapper.tsx
create mode 100644 addons/docs/src/blocks/index.ts
create mode 100644 addons/docs/src/blocks/shared.ts
create mode 100644 addons/docs/src/lib/getPropDefs.ts
diff --git a/addons/docs/blocks.js b/addons/docs/blocks.js
new file mode 100644
index 000000000000..6f65c051a905
--- /dev/null
+++ b/addons/docs/blocks.js
@@ -0,0 +1 @@
+module.exports = require('./dist/blocks');
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 9ad9a19606b3..a7d12cec011b 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -24,9 +24,16 @@
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.23",
- "@storybook/api": "5.2.0-alpha.23"
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.27",
+ "@storybook/router": "5.2.0-alpha.27",
+ "@storybook/theming": "5.2.0-alpha.27",
+ "core-js": "^3.0.1",
+ "global": "^4.3.2",
+ "prop-types": "^15.7.2"
},
"devDependencies": {
+ "@types/prop-types": "^15.5.9",
"@types/util-deprecate": "^1.0.0",
"@types/webpack-env": "^1.13.7"
},
diff --git a/addons/docs/src/blocks/Description.tsx b/addons/docs/src/blocks/Description.tsx
new file mode 100644
index 000000000000..2cd715b22b4e
--- /dev/null
+++ b/addons/docs/src/blocks/Description.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { CURRENT_SELECTION } from './shared';
+
+export enum DescriptionType {
+ INFO = 'info',
+ NOTES = 'notes',
+ DOCGEN = 'docgen',
+ AUTO = 'auto',
+}
+
+interface DescriptionProps {
+ of?: any;
+ type?: DescriptionType;
+ markdown?: string;
+}
+
+type Notes = string | any;
+type Info = string | any;
+type Component = any;
+
+const getNotes = (notes?: Notes) =>
+ notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text);
+
+const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : info.text);
+
+const getDocgen = (component?: Component) =>
+ (component && component.__docgenInfo && component.__docgenInfo.description) || '';
+
+export const getDescriptionProps = (
+ { of, type, markdown }: DescriptionProps,
+ { parameters }: DocsContextProps
+): PureDescriptionProps => {
+ if (markdown) {
+ return { markdown };
+ }
+ const { component, notes, info } = parameters;
+ const target = of === CURRENT_SELECTION ? component : of;
+ switch (type) {
+ case DescriptionType.INFO:
+ return { markdown: getInfo(info) };
+ case DescriptionType.NOTES:
+ return { markdown: getNotes(notes) };
+ case DescriptionType.DOCGEN:
+ return { markdown: getDocgen(target) };
+ case DescriptionType.AUTO:
+ default:
+ return {
+ markdown: `
+${getNotes(notes) || getInfo(info) || ''}
+
+${getDocgen(target)}
+`.trim(),
+ };
+ }
+};
+
+const DescriptionContainer: React.FunctionComponent = props => (
+
+ {context => {
+ const { markdown } = getDescriptionProps(props, context);
+ return markdown && ;
+ }}
+
+);
+
+export { DescriptionContainer as Description };
diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
new file mode 100644
index 000000000000..746d6ec46bbc
--- /dev/null
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/destructuring-assignment */
+
+import React from 'react';
+// import { MDXProvider } from '@mdx-js/react';
+import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components';
+import { DocsContextProps, DocsContext } from './DocsContext';
+
+interface DocsContainerProps {
+ context: DocsContextProps;
+ content: React.ElementType;
+}
+
+const defaultComponents = {
+ // p: ({ children }) => {children} ,
+ wrapper: DocumentFormatting,
+};
+
+const globalWithOverflow = (args: any) => {
+ const global = createGlobal(args);
+ const { body, ...rest } = global;
+ const { overflow, ...bodyRest } = body;
+ return {
+ body: bodyRest,
+ ...rest,
+ };
+};
+
+export const DocsContainer: React.FunctionComponent = ({
+ context,
+ content: MDXContent,
+}) => {
+ const parameters = (context && context.parameters) || {};
+ const options = parameters.options || {};
+ const theme = ensureTheme(options.theme || {});
+ const { components: userComponents = null } = options.docs || {};
+ const components = { ...defaultComponents, ...userComponents };
+ return (
+
+
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+
+
+ );
+};
diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts
new file mode 100644
index 000000000000..5e1b5b04e9a9
--- /dev/null
+++ b/addons/docs/src/blocks/DocsContext.ts
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface DocsContextProps {
+ id?: string;
+ selectedKind?: string;
+ selectedStory?: string;
+ mdxKind?: string;
+ parameters?: any;
+ storyStore?: any;
+ forceRender?: () => void;
+}
+
+export const DocsContext: React.Context = React.createContext({});
diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx
new file mode 100644
index 000000000000..dbb422ac3343
--- /dev/null
+++ b/addons/docs/src/blocks/DocsPage.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+
+import { parseKind } from '@storybook/router';
+import { DocsPage as PureDocsPage, DocsPageProps } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { DocsContainer } from './DocsContainer';
+import { Description } from './Description';
+import { Story } from './Story';
+import { Preview } from './Preview';
+import { Props } from './Props';
+
+enum DocsStoriesType {
+ ALL = 'all',
+ PRIMARY = 'primary',
+ REST = 'rest',
+}
+
+interface DocsStoriesProps {
+ type?: DocsStoriesType;
+}
+
+interface DocsStoryProps {
+ id: string;
+ name: string;
+ description?: string;
+ expanded?: boolean;
+}
+
+interface StoryData {
+ id: string;
+ kind: string;
+ name: string;
+ parameters?: any;
+}
+
+const getDocsStories = (type: DocsStoriesType, componentStories: StoryData[]): DocsStoryProps[] => {
+ let stories = componentStories;
+ if (type !== DocsStoriesType.ALL) {
+ const primary = stories.find(s => s.parameters && s.parameters.primary);
+ const [first, ...rest] = stories;
+ if (type === DocsStoriesType.PRIMARY) {
+ stories = [primary || first];
+ } else {
+ stories = primary ? stories.filter(s => !s.parameters || !s.parameters.primary) : rest;
+ }
+ }
+ return stories.map(({ id, name, parameters: { notes, info } }) => ({
+ id,
+ name,
+ description: notes || info || null,
+ }));
+};
+
+const DocsStory: React.FunctionComponent = ({
+ id,
+ name,
+ description,
+ expanded = true,
+}) => (
+ <>
+ {expanded && {name} }
+ {expanded && description && }
+
+
+
+ >
+);
+
+const DocsStories: React.FunctionComponent = ({ type = DocsStoriesType.ALL }) => (
+
+ {({ selectedKind, storyStore }) => {
+ const componentStories = (storyStore.raw() as StoryData[]).filter(
+ s => s.kind === selectedKind
+ );
+ const stories = getDocsStories(type, componentStories);
+ if (stories.length === 0) {
+ return null;
+ }
+ const expanded = type !== DocsStoriesType.PRIMARY;
+ return (
+ <>
+ {expanded && Stories }
+ {stories.map(s => (
+
+ ))}
+ >
+ );
+ }}
+
+);
+
+const getDocsPageProps = (context: DocsContextProps): DocsPageProps => {
+ const { selectedKind, selectedStory, parameters } = context;
+ const {
+ hierarchyRootSeparator: rootSeparator,
+ hierarchySeparator: groupSeparator,
+ } = (parameters && parameters.options) || {
+ hierarchyRootSeparator: '|',
+ hierarchySeparator: '/',
+ };
+
+ const { groups } = parseKind(selectedKind, { rootSeparator, groupSeparator });
+ const title = (groups && groups[groups.length - 1]) || selectedKind;
+
+ return {
+ title,
+ subtitle: parameters && parameters.componentDescription,
+ };
+};
+
+const DocsPage: React.FunctionComponent = () => (
+
+ {context => {
+ const docsPageProps = getDocsPageProps(context);
+ return (
+
+
+
+
+
+
+ );
+ }}
+
+);
+
+interface DocsPageWrapperProps {
+ context: DocsContextProps;
+}
+
+const DocsPageWrapper: React.FunctionComponent = ({ context }) => (
+ /* eslint-disable react/destructuring-assignment */
+
+);
+
+export { DocsPageWrapper as DocsPage };
diff --git a/addons/docs/src/blocks/Meta.tsx b/addons/docs/src/blocks/Meta.tsx
new file mode 100644
index 000000000000..5308f9f0ea9e
--- /dev/null
+++ b/addons/docs/src/blocks/Meta.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Decorator = (...args: any) => any;
+
+interface MetaProps {
+ title: string;
+ decorators?: [Decorator];
+ parameters?: any;
+}
+
+/**
+ * This component is used to declare component metadata in docs
+ * and gets transformed into a default export underneath the hood.
+ * It doesn't actually render anything.
+ */
+export const Meta: React.FunctionComponent = props => null;
diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx
new file mode 100644
index 000000000000..bc18d47405c4
--- /dev/null
+++ b/addons/docs/src/blocks/Preview.tsx
@@ -0,0 +1,48 @@
+import React, { ReactNodeArray } from 'react';
+import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
+import { toId } from '@storybook/router';
+import { getSourceProps } from './Source';
+import { DocsContext, DocsContextProps } from './DocsContext';
+
+export enum SourceState {
+ OPEN = 'open',
+ CLOSED = 'closed',
+ NONE = 'none',
+}
+
+type PreviewProps = PurePreviewProps & {
+ withSource?: SourceState;
+};
+
+const getPreviewProps = (
+ {
+ withSource = SourceState.CLOSED,
+ children,
+ ...props
+ }: PreviewProps & { children?: React.ReactNode },
+ { mdxKind, storyStore }: DocsContextProps
+): PurePreviewProps => {
+ if (withSource === SourceState.NONE && !children) {
+ return props;
+ }
+ const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
+ const stories = childArray.filter(
+ (c: React.ReactElement) => c.props && (c.props.id || c.props.name)
+ ) as React.ReactElement[];
+ const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name));
+ const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
+ return {
+ ...props, // pass through columns etc.
+ withSource: sourceProps,
+ isExpanded: withSource === SourceState.OPEN,
+ };
+};
+
+export const Preview: React.FunctionComponent = props => (
+
+ {context => {
+ const previewProps = getPreviewProps(props, context);
+ return {props.children} ;
+ }}
+
+);
diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
new file mode 100644
index 000000000000..1104bbb40b3b
--- /dev/null
+++ b/addons/docs/src/blocks/Props.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { CURRENT_SELECTION } from './shared';
+import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
+
+interface PropsProps {
+ exclude?: string[];
+ of: any;
+}
+
+const inferPropDefs = (framework: string): PropDefGetter | null => {
+ switch (framework) {
+ case 'react':
+ case 'vue':
+ return autoPropDefs;
+ default:
+ return null;
+ }
+};
+
+export const getPropsTableProps = (
+ { exclude, of }: PropsProps,
+ { parameters }: DocsContextProps
+): PropsTableProps => {
+ const { component } = parameters;
+ try {
+ const target = of === CURRENT_SELECTION ? component : of;
+ if (!target) {
+ throw new Error(PropsTableError.NO_COMPONENT);
+ }
+
+ const { framework = null } = parameters || {};
+ const { getPropDefs = inferPropDefs(framework) } =
+ (parameters && parameters.options && parameters.options.docs) || {};
+
+ if (!getPropDefs) {
+ throw new Error(PropsTableError.PROPS_UNSUPPORTED);
+ }
+ const allRows = getPropDefs(target);
+ const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name));
+ return { rows };
+ } catch (err) {
+ return { error: err.message };
+ }
+};
+
+const PropsContainer: React.FunctionComponent = props => (
+
+ {context => {
+ const propsTableProps = getPropsTableProps(props, context);
+ return ;
+ }}
+
+);
+
+export { PropsContainer as Props };
diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
new file mode 100644
index 000000000000..6423b81ce832
--- /dev/null
+++ b/addons/docs/src/blocks/Source.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { CURRENT_SELECTION } from './shared';
+
+interface SourceProps {
+ language?: string;
+ code?: string;
+ id?: string;
+ ids?: string[];
+ name?: string;
+}
+
+interface Location {
+ line: number;
+ col: number;
+}
+
+interface StorySource {
+ source: string;
+ locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
+}
+
+const extract = (targetId: string, { source, locationsMap }: StorySource) => {
+ const location = locationsMap[targetId];
+ // FIXME: bad locationsMap generated for module export functions whose titles are overridden
+ if (!location) return null;
+ const { startBody: start, endBody: end } = location;
+ const lines = source.split('\n');
+ if (start.line === end.line) {
+ return lines[start.line - 1].substring(start.col, end.col);
+ }
+ // NOTE: storysource locations are 1-based not 0-based!
+ const startLine = lines[start.line - 1];
+ const endLine = lines[end.line - 1];
+ return [
+ startLine.substring(start.col),
+ ...lines.slice(start.line, end.line - 1),
+ endLine.substring(0, end.col),
+ ].join('\n');
+};
+
+export const getSourceProps = (
+ { language, code, name, id, ids }: SourceProps,
+ { id: currentId, mdxKind, storyStore }: DocsContextProps
+): PureSourceProps => {
+ let source = code; // prefer user-specified code
+ if (!source) {
+ const targetId = id === CURRENT_SELECTION ? currentId : id;
+ const targetIds = ids || [targetId];
+ source = targetIds
+ .map(sourceId => {
+ const data = storyStore.fromId(sourceId);
+ if (data && data.parameters) {
+ const { mdxSource, storySource } = data.parameters;
+ return mdxSource || (storySource && extract(sourceId, storySource));
+ }
+ return '';
+ })
+ .join('\n\n');
+ }
+ return source
+ ? { code: source, language: language || 'jsx' }
+ : { error: SourceError.SOURCE_UNAVAILABLE };
+};
+
+/**
+ * Story source doc block renders source code if provided,
+ * or the source for a story if `storyId` is provided, or
+ * the source for the current story if nothing is provided.
+ */
+const SourceContainer: React.FunctionComponent = props => (
+
+ {context => {
+ const sourceProps = getSourceProps(props, context);
+ return ;
+ }}
+
+);
+
+export { SourceContainer as Source };
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
new file mode 100644
index 000000000000..74f1ffe4094b
--- /dev/null
+++ b/addons/docs/src/blocks/Story.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { toId } from '@storybook/router';
+import { Story, StoryProps as PureStoryProps } from '@storybook/components';
+import { CURRENT_SELECTION } from './shared';
+
+import { DocsContext, DocsContextProps } from './DocsContext';
+
+interface StoryProps {
+ id?: string;
+ name?: string;
+ children?: React.ReactElement;
+ height?: string;
+}
+
+const inferInlineStories = (framework: string): boolean => {
+ switch (framework) {
+ case 'react':
+ return true;
+ default:
+ return false;
+ }
+};
+
+export const getStoryProps = (
+ { id, name, height }: StoryProps,
+ { id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
+): PureStoryProps => {
+ const previewId = id === CURRENT_SELECTION ? currentId : id || (name && toId(mdxKind, name));
+ const data = storyStore.fromId(previewId);
+ const { framework = null } = parameters || {};
+ const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
+ (parameters && parameters.options && parameters.options.docs) || {};
+ return {
+ inline: inlineStories,
+ id: previewId,
+ storyFn: data && data.getDecorated(),
+ height: height || iframeHeight,
+ title: data && data.name,
+ };
+};
+
+const StoryContainer: React.FunctionComponent = props => (
+
+ {context => {
+ const storyProps = getStoryProps(props, context);
+ return ;
+ }}
+
+);
+
+StoryContainer.defaultProps = {
+ children: null,
+ name: null,
+};
+
+export { StoryContainer as Story };
diff --git a/addons/docs/src/blocks/Wrapper.tsx b/addons/docs/src/blocks/Wrapper.tsx
new file mode 100644
index 000000000000..ff9506cb126a
--- /dev/null
+++ b/addons/docs/src/blocks/Wrapper.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface WrapperProps {
+ children: React.ReactElement;
+}
+
+export const Wrapper: React.FunctionComponent = ({ children }) => (
+ {children}
+);
diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts
new file mode 100644
index 000000000000..221fe9e567f6
--- /dev/null
+++ b/addons/docs/src/blocks/index.ts
@@ -0,0 +1,12 @@
+export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
+
+export * from './Description';
+export * from './DocsContext';
+export * from './DocsPage';
+export * from './DocsContainer';
+export * from './Meta';
+export * from './Preview';
+export * from './Props';
+export * from './Source';
+export * from './Story';
+export * from './Wrapper';
diff --git a/addons/docs/src/blocks/shared.ts b/addons/docs/src/blocks/shared.ts
new file mode 100644
index 000000000000..8a9a3eae6536
--- /dev/null
+++ b/addons/docs/src/blocks/shared.ts
@@ -0,0 +1 @@
+export const CURRENT_SELECTION = '.';
diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts
new file mode 100644
index 000000000000..80db3f671e4a
--- /dev/null
+++ b/addons/docs/src/lib/getPropDefs.ts
@@ -0,0 +1,87 @@
+/* eslint-disable no-underscore-dangle */
+
+import PropTypes from 'prop-types';
+import { PropDef } from '@storybook/components';
+
+interface PropDefMap {
+ [p: string]: PropDef;
+}
+
+export type PropDefGetter = (type: any) => PropDef[] | null;
+
+const propTypesMap = new Map();
+
+Object.keys(PropTypes).forEach(typeName => {
+ // @ts-ignore
+ const type = PropTypes[typeName];
+
+ propTypesMap.set(type, typeName);
+ propTypesMap.set(type.isRequired, typeName);
+});
+
+const hasDocgen = (obj: any) => obj && obj.props && Object.keys(obj.props).length > 0;
+
+const propsFromDocgen: PropDefGetter = type => {
+ const props: PropDefMap = {};
+ const docgenInfoProps = type.__docgenInfo.props;
+
+ Object.keys(docgenInfoProps).forEach(property => {
+ const docgenInfoProp = docgenInfoProps[property];
+ const defaultValueDesc = docgenInfoProp.defaultValue || {};
+ const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
+
+ props[property] = {
+ name: property,
+ type: propType,
+ required: docgenInfoProp.required,
+ description: docgenInfoProp.description,
+ defaultValue: defaultValueDesc.value,
+ };
+ });
+
+ return Object.values(props);
+};
+
+const propsFromPropTypes: PropDefGetter = type => {
+ const props: PropDefMap = {};
+
+ if (type.propTypes) {
+ Object.keys(type.propTypes).forEach(property => {
+ const typeInfo = type.propTypes[property];
+ const required = typeInfo.isRequired === undefined;
+ const docgenInfo =
+ type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
+ const description = docgenInfo ? docgenInfo.description : null;
+ let propType = propTypesMap.get(typeInfo) || 'other';
+
+ if (propType === 'other') {
+ if (docgenInfo && docgenInfo.type) {
+ propType = docgenInfo.type.name;
+ }
+ }
+
+ props[property] = { name: property, type: propType, required, description };
+ });
+ }
+
+ if (type.defaultProps) {
+ Object.keys(type.defaultProps).forEach(property => {
+ const value = type.defaultProps[property];
+
+ if (value === undefined) {
+ return;
+ }
+
+ if (!props[property]) {
+ props[property] = { name: property, type: 'any', required: false };
+ }
+
+ props[property].defaultValue = value;
+ });
+ }
+
+ return Object.values(props);
+};
+
+export const getPropDefs: PropDefGetter = type =>
+ hasDocgen(type.__docgenInfo) ? propsFromDocgen(type) : propsFromPropTypes(type);
From effc071e6c7a5cedfcda52ad72e69096200dda4b Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 16:14:54 +0800
Subject: [PATCH 126/371] Add DocsPage to official-storybook
---
examples/official-storybook/config.js | 4 +-
lib/ui/src/components/panel/panel.stories.js | 3 +
yarn.lock | 62 ++++++++++++++++++++
3 files changed, 68 insertions(+), 1 deletion(-)
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index a8c0cc7cba6f..0236582c8640 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,6 +1,7 @@
import React from 'react';
import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
+import { DocsPage } from '@storybook/addon-docs/blocks';
import { withCssResources } from '@storybook/addon-cssresources';
import { withA11y } from '@storybook/addon-a11y';
@@ -49,13 +50,14 @@ addParameters({
options: {
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: '|',
- theme: { base: 'light', brandTitle: 'Storybook!' },
+ theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
},
backgrounds: [
{ name: 'storybook app', value: themes.light.appBg, default: true },
{ name: 'light', value: '#eeeeee' },
{ name: 'dark', value: '#222222' },
],
+ docs: DocsPage,
});
let previousExports = {};
diff --git a/lib/ui/src/components/panel/panel.stories.js b/lib/ui/src/components/panel/panel.stories.js
index b271c1289b16..6c59dfafcbbc 100644
--- a/lib/ui/src/components/panel/panel.stories.js
+++ b/lib/ui/src/components/panel/panel.stories.js
@@ -32,6 +32,9 @@ const toggleVisibility = action('toggleVisibility');
const togglePosition = action('togglePosition');
storiesOf('UI|Panel', module)
+ .addParameters({
+ component: Panel,
+ })
.add('default', () => (
Date: Tue, 18 Jun 2019 16:56:21 +0800
Subject: [PATCH 127/371] Addon-docs: Fix no theme bug
---
addons/docs/src/blocks/DocsContainer.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
index 746d6ec46bbc..a94443b3503f 100644
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@@ -32,7 +32,7 @@ export const DocsContainer: React.FunctionComponent = ({
}) => {
const parameters = (context && context.parameters) || {};
const options = parameters.options || {};
- const theme = ensureTheme(options.theme || {});
+ const theme = ensureTheme(options.theme);
const { components: userComponents = null } = options.docs || {};
const components = { ...defaultComponents, ...userComponents };
return (
From 90b7e451f8b12fea375cf57786369fbd7cc7b546 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 16:56:36 +0800
Subject: [PATCH 128/371] Addon-docs: add to vue example
---
examples/vue-kitchen-sink/.storybook/addons.js | 1 +
examples/vue-kitchen-sink/.storybook/config.js | 3 +++
examples/vue-kitchen-sink/package.json | 1 +
3 files changed, 5 insertions(+)
diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js
index dae489be3483..232bc06d11e5 100644
--- a/examples/vue-kitchen-sink/.storybook/addons.js
+++ b/examples/vue-kitchen-sink/.storybook/addons.js
@@ -8,3 +8,4 @@ import '@storybook/addon-options/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-contexts/register';
+import '@storybook/addon-docs/register';
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index 292c33a24af5..a6e5cee86579 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -2,6 +2,8 @@ import { configure, addParameters, addDecorator } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex';
import { withA11y } from '@storybook/addon-a11y';
+import { DocsPage } from '@storybook/addon-docs/blocks';
+
import MyButton from '../src/stories/Button.vue';
addDecorator(withA11y);
@@ -12,6 +14,7 @@ addParameters({
options: {
hierarchyRootSeparator: /\|/,
},
+ docs: DocsPage,
});
function loadStories() {
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 5ee3052f862f..68e71bddc0a9 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -20,6 +20,7 @@
"@storybook/addon-backgrounds": "5.2.0-alpha.23",
"@storybook/addon-centered": "5.2.0-alpha.23",
"@storybook/addon-contexts": "5.2.0-alpha.23",
+ "@storybook/addon-docs": "5.2.0-alpha.23",
"@storybook/addon-knobs": "5.2.0-alpha.23",
"@storybook/addon-links": "5.2.0-alpha.23",
"@storybook/addon-notes": "5.2.0-alpha.23",
From 8399136bc70eb9338a63b1de0e0d4fd1496fe99a Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 17:02:16 +0800
Subject: [PATCH 129/371] Update snapshots
---
.../__snapshots__/storyshots.test.js.snap | 46660 ++++++++++++++++
.../syntaxhighlighter.stories.storyshot | 16 +-
2 files changed, 46668 insertions(+), 8 deletions(-)
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 55ea770a53a6..3fb986fbcef5 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -5417,6 +5417,46666 @@ exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
`;
+exports[`Storyshots Docs|ColorPalette defaultStyle 1`] = `
+.emotion-3 {
+ font-weight: 700;
+}
+
+.emotion-55 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-54 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-54 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-54 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-54 h3 {
+ font-size: 20px;
+}
+
+.emotion-54 h4 {
+ font-size: 16px;
+}
+
+.emotion-54 h5 {
+ font-size: 14px;
+}
+
+.emotion-54 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-54 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-54 pre pre,
+.emotion-54 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-54 pre pre code,
+.emotion-54 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-54 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-54 pre code,
+.emotion-54 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-54 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-54 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-54 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-54 a.absent {
+ color: #cc0000;
+}
+
+.emotion-54 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-54 h1,
+.emotion-54 h2,
+.emotion-54 h3,
+.emotion-54 h4,
+.emotion-54 h5,
+.emotion-54 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-54 h2:first-of-type,
+.emotion-54 h1:first-of-type,
+.emotion-54 h1:first-of-type + h2,
+.emotion-54 h3:first-of-type,
+.emotion-54 h4:first-of-type,
+.emotion-54 h5:first-of-type,
+.emotion-54 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 h1:hover a.anchor,
+.emotion-54 h2:hover a.anchor,
+.emotion-54 h3:hover a.anchor,
+.emotion-54 h4:hover a.anchor,
+.emotion-54 h5:hover a.anchor,
+.emotion-54 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-54 h1 tt,
+.emotion-54 h1 code {
+ font-size: inherit;
+}
+
+.emotion-54 h2 tt,
+.emotion-54 h2 code {
+ font-size: inherit;
+}
+
+.emotion-54 h3 tt,
+.emotion-54 h3 code {
+ font-size: inherit;
+}
+
+.emotion-54 h4 tt,
+.emotion-54 h4 code {
+ font-size: inherit;
+}
+
+.emotion-54 h5 tt,
+.emotion-54 h5 code {
+ font-size: inherit;
+}
+
+.emotion-54 h6 tt,
+.emotion-54 h6 code {
+ font-size: inherit;
+}
+
+.emotion-54 p,
+.emotion-54 blockquote,
+.emotion-54 ul,
+.emotion-54 ol,
+.emotion-54 dl,
+.emotion-54 li,
+.emotion-54 table,
+.emotion-54 pre {
+ margin: 15px 0;
+}
+
+.emotion-54 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-54 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h3:first-of-type,
+.emotion-54 body > h4:first-of-type,
+.emotion-54 body > h5:first-of-type,
+.emotion-54 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 a:first-of-type h1,
+.emotion-54 a:first-of-type h2,
+.emotion-54 a:first-of-type h3,
+.emotion-54 a:first-of-type h4,
+.emotion-54 a:first-of-type h5,
+.emotion-54 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 h1 p,
+.emotion-54 h2 p,
+.emotion-54 h3 p,
+.emotion-54 h4 p,
+.emotion-54 h5 p,
+.emotion-54 h6 p {
+ margin-top: 0;
+}
+
+.emotion-54 li p.first {
+ display: inline-block;
+}
+
+.emotion-54 ul,
+.emotion-54 ol {
+ padding-left: 30px;
+}
+
+.emotion-54 ul :first-of-type,
+.emotion-54 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 ul :last-child,
+.emotion-54 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 dl {
+ padding: 0;
+}
+
+.emotion-54 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-54 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-54 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-54 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-54 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-54 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-54 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-54 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-54 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-54 table tr th :first-of-type,
+.emotion-54 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 table tr th :last-child,
+.emotion-54 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 img {
+ max-width: 100%;
+}
+
+.emotion-54 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-54 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-54 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-54 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-54 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-54 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-54 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-54 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-54 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-54 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-54 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-54 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-54 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-54 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-54 code,
+.emotion-54 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-53 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-bottom: 20px;
+ font-weight: 700;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-0 {
+ -webkit-flex: 0 0 30%;
+ -ms-flex: 0 0 30%;
+ flex: 0 0 30%;
+}
+
+.emotion-1 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.emotion-16 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+}
+
+.emotion-5 {
+ -webkit-flex: 0 0 30%;
+ -ms-flex: 0 0 30%;
+ flex: 0 0 30%;
+ line-height: 20px;
+ margin-top: 5px;
+}
+
+.emotion-4 {
+ color: rgba(51,51,51,0.8);
+}
+
+.emotion-15 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.emotion-14 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ position: relative;
+ margin-bottom: 30px;
+}
+
+.emotion-9 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ height: 50px;
+ margin-bottom: 5px;
+ overflow: hidden;
+}
+
+.emotion-13 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.emotion-10 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-align: center;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 12px;
+ line-height: 1;
+ overflow: hidden;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-10 > div {
+ display: inline-block;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.emotion-3 {
+ font-weight: 700;
+}
+
+.emotion-55 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-54 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-54 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-54 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-54 h3 {
+ font-size: 20px;
+}
+
+.emotion-54 h4 {
+ font-size: 16px;
+}
+
+.emotion-54 h5 {
+ font-size: 14px;
+}
+
+.emotion-54 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-54 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-54 pre pre,
+.emotion-54 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-54 pre pre code,
+.emotion-54 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-54 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-54 pre code,
+.emotion-54 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-54 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-54 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-54 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-54 a.absent {
+ color: #cc0000;
+}
+
+.emotion-54 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-54 h1,
+.emotion-54 h2,
+.emotion-54 h3,
+.emotion-54 h4,
+.emotion-54 h5,
+.emotion-54 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-54 h2:first-of-type,
+.emotion-54 h1:first-of-type,
+.emotion-54 h1:first-of-type + h2,
+.emotion-54 h3:first-of-type,
+.emotion-54 h4:first-of-type,
+.emotion-54 h5:first-of-type,
+.emotion-54 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 h1:hover a.anchor,
+.emotion-54 h2:hover a.anchor,
+.emotion-54 h3:hover a.anchor,
+.emotion-54 h4:hover a.anchor,
+.emotion-54 h5:hover a.anchor,
+.emotion-54 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-54 h1 tt,
+.emotion-54 h1 code {
+ font-size: inherit;
+}
+
+.emotion-54 h2 tt,
+.emotion-54 h2 code {
+ font-size: inherit;
+}
+
+.emotion-54 h3 tt,
+.emotion-54 h3 code {
+ font-size: inherit;
+}
+
+.emotion-54 h4 tt,
+.emotion-54 h4 code {
+ font-size: inherit;
+}
+
+.emotion-54 h5 tt,
+.emotion-54 h5 code {
+ font-size: inherit;
+}
+
+.emotion-54 h6 tt,
+.emotion-54 h6 code {
+ font-size: inherit;
+}
+
+.emotion-54 p,
+.emotion-54 blockquote,
+.emotion-54 ul,
+.emotion-54 ol,
+.emotion-54 dl,
+.emotion-54 li,
+.emotion-54 table,
+.emotion-54 pre {
+ margin: 15px 0;
+}
+
+.emotion-54 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-54 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 body > h3:first-of-type,
+.emotion-54 body > h4:first-of-type,
+.emotion-54 body > h5:first-of-type,
+.emotion-54 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 a:first-of-type h1,
+.emotion-54 a:first-of-type h2,
+.emotion-54 a:first-of-type h3,
+.emotion-54 a:first-of-type h4,
+.emotion-54 a:first-of-type h5,
+.emotion-54 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-54 h1 p,
+.emotion-54 h2 p,
+.emotion-54 h3 p,
+.emotion-54 h4 p,
+.emotion-54 h5 p,
+.emotion-54 h6 p {
+ margin-top: 0;
+}
+
+.emotion-54 li p.first {
+ display: inline-block;
+}
+
+.emotion-54 ul,
+.emotion-54 ol {
+ padding-left: 30px;
+}
+
+.emotion-54 ul :first-of-type,
+.emotion-54 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 ul :last-child,
+.emotion-54 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 dl {
+ padding: 0;
+}
+
+.emotion-54 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-54 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-54 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-54 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-54 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-54 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-54 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-54 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-54 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-54 table tr th :first-of-type,
+.emotion-54 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-54 table tr th :last-child,
+.emotion-54 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-54 img {
+ max-width: 100%;
+}
+
+.emotion-54 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-54 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-54 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-54 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-54 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-54 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-54 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-54 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-54 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-54 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-54 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-54 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-54 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-54 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-54 code,
+.emotion-54 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-53 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-bottom: 20px;
+ font-weight: 700;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-0 {
+ -webkit-flex: 0 0 30%;
+ -ms-flex: 0 0 30%;
+ flex: 0 0 30%;
+}
+
+.emotion-1 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.emotion-16 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+}
+
+.emotion-5 {
+ -webkit-flex: 0 0 30%;
+ -ms-flex: 0 0 30%;
+ flex: 0 0 30%;
+ line-height: 20px;
+ margin-top: 5px;
+}
+
+.emotion-4 {
+ color: rgba(51,51,51,0.8);
+}
+
+.emotion-15 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.emotion-14 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ position: relative;
+ margin-bottom: 30px;
+}
+
+.emotion-9 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ height: 50px;
+ margin-bottom: 5px;
+ overflow: hidden;
+}
+
+.emotion-13 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.emotion-10 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ text-align: center;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 12px;
+ line-height: 1;
+ overflow: hidden;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-10 > div {
+ display: inline-block;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+
+
+
+
+
+ Name
+
+
+ Swatches
+
+
+
+
+
+ theme.color.greyscale
+
+
+ Some of the greys
+
+
+
+
+
+
+
+ theme.color.primary
+
+
+ Coral
+
+
+
+
+
+
+
+ theme.color.secondary
+
+
+ Ocean
+
+
+
+
+
+
+
+ theme.color.positive
+
+
+ Green
+
+
+
+
+
+
+
+
+ rgba(102,191,60,1)
+
+
+
+
+ rgba(102,191,60,.8)
+
+
+
+
+ rgba(102,191,60,.6)
+
+
+
+
+ rgba(102,191,60,.3)
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Description markdown 1`] = `
+.emotion-1 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-0 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-0 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-0 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-0 h3 {
+ font-size: 20px;
+}
+
+.emotion-0 h4 {
+ font-size: 16px;
+}
+
+.emotion-0 h5 {
+ font-size: 14px;
+}
+
+.emotion-0 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-0 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-0 pre pre,
+.emotion-0 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-0 pre pre code,
+.emotion-0 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-0 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-0 pre code,
+.emotion-0 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-0 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-0 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-0 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 a.absent {
+ color: #cc0000;
+}
+
+.emotion-0 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-0 h1,
+.emotion-0 h2,
+.emotion-0 h3,
+.emotion-0 h4,
+.emotion-0 h5,
+.emotion-0 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-0 h2:first-of-type,
+.emotion-0 h1:first-of-type,
+.emotion-0 h1:first-of-type + h2,
+.emotion-0 h3:first-of-type,
+.emotion-0 h4:first-of-type,
+.emotion-0 h5:first-of-type,
+.emotion-0 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1:hover a.anchor,
+.emotion-0 h2:hover a.anchor,
+.emotion-0 h3:hover a.anchor,
+.emotion-0 h4:hover a.anchor,
+.emotion-0 h5:hover a.anchor,
+.emotion-0 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 h1 tt,
+.emotion-0 h1 code {
+ font-size: inherit;
+}
+
+.emotion-0 h2 tt,
+.emotion-0 h2 code {
+ font-size: inherit;
+}
+
+.emotion-0 h3 tt,
+.emotion-0 h3 code {
+ font-size: inherit;
+}
+
+.emotion-0 h4 tt,
+.emotion-0 h4 code {
+ font-size: inherit;
+}
+
+.emotion-0 h5 tt,
+.emotion-0 h5 code {
+ font-size: inherit;
+}
+
+.emotion-0 h6 tt,
+.emotion-0 h6 code {
+ font-size: inherit;
+}
+
+.emotion-0 p,
+.emotion-0 blockquote,
+.emotion-0 ul,
+.emotion-0 ol,
+.emotion-0 dl,
+.emotion-0 li,
+.emotion-0 table,
+.emotion-0 pre {
+ margin: 15px 0;
+}
+
+.emotion-0 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-0 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h3:first-of-type,
+.emotion-0 body > h4:first-of-type,
+.emotion-0 body > h5:first-of-type,
+.emotion-0 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 a:first-of-type h1,
+.emotion-0 a:first-of-type h2,
+.emotion-0 a:first-of-type h3,
+.emotion-0 a:first-of-type h4,
+.emotion-0 a:first-of-type h5,
+.emotion-0 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1 p,
+.emotion-0 h2 p,
+.emotion-0 h3 p,
+.emotion-0 h4 p,
+.emotion-0 h5 p,
+.emotion-0 h6 p {
+ margin-top: 0;
+}
+
+.emotion-0 li p.first {
+ display: inline-block;
+}
+
+.emotion-0 ul,
+.emotion-0 ol {
+ padding-left: 30px;
+}
+
+.emotion-0 ul :first-of-type,
+.emotion-0 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 ul :last-child,
+.emotion-0 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl {
+ padding: 0;
+}
+
+.emotion-0 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-0 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-0 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-0 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-0 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-0 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-0 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-0 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr th :first-of-type,
+.emotion-0 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 table tr th :last-child,
+.emotion-0 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 img {
+ max-width: 100%;
+}
+
+.emotion-0 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-0 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-0 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-0 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-0 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-0 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-0 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-0 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-0 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-0 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-0 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-0 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-0 code,
+.emotion-0 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-1 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-0 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-0 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-0 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-0 h3 {
+ font-size: 20px;
+}
+
+.emotion-0 h4 {
+ font-size: 16px;
+}
+
+.emotion-0 h5 {
+ font-size: 14px;
+}
+
+.emotion-0 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-0 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-0 pre pre,
+.emotion-0 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-0 pre pre code,
+.emotion-0 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-0 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-0 pre code,
+.emotion-0 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-0 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-0 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-0 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 a.absent {
+ color: #cc0000;
+}
+
+.emotion-0 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-0 h1,
+.emotion-0 h2,
+.emotion-0 h3,
+.emotion-0 h4,
+.emotion-0 h5,
+.emotion-0 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-0 h2:first-of-type,
+.emotion-0 h1:first-of-type,
+.emotion-0 h1:first-of-type + h2,
+.emotion-0 h3:first-of-type,
+.emotion-0 h4:first-of-type,
+.emotion-0 h5:first-of-type,
+.emotion-0 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1:hover a.anchor,
+.emotion-0 h2:hover a.anchor,
+.emotion-0 h3:hover a.anchor,
+.emotion-0 h4:hover a.anchor,
+.emotion-0 h5:hover a.anchor,
+.emotion-0 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 h1 tt,
+.emotion-0 h1 code {
+ font-size: inherit;
+}
+
+.emotion-0 h2 tt,
+.emotion-0 h2 code {
+ font-size: inherit;
+}
+
+.emotion-0 h3 tt,
+.emotion-0 h3 code {
+ font-size: inherit;
+}
+
+.emotion-0 h4 tt,
+.emotion-0 h4 code {
+ font-size: inherit;
+}
+
+.emotion-0 h5 tt,
+.emotion-0 h5 code {
+ font-size: inherit;
+}
+
+.emotion-0 h6 tt,
+.emotion-0 h6 code {
+ font-size: inherit;
+}
+
+.emotion-0 p,
+.emotion-0 blockquote,
+.emotion-0 ul,
+.emotion-0 ol,
+.emotion-0 dl,
+.emotion-0 li,
+.emotion-0 table,
+.emotion-0 pre {
+ margin: 15px 0;
+}
+
+.emotion-0 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-0 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h3:first-of-type,
+.emotion-0 body > h4:first-of-type,
+.emotion-0 body > h5:first-of-type,
+.emotion-0 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 a:first-of-type h1,
+.emotion-0 a:first-of-type h2,
+.emotion-0 a:first-of-type h3,
+.emotion-0 a:first-of-type h4,
+.emotion-0 a:first-of-type h5,
+.emotion-0 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1 p,
+.emotion-0 h2 p,
+.emotion-0 h3 p,
+.emotion-0 h4 p,
+.emotion-0 h5 p,
+.emotion-0 h6 p {
+ margin-top: 0;
+}
+
+.emotion-0 li p.first {
+ display: inline-block;
+}
+
+.emotion-0 ul,
+.emotion-0 ol {
+ padding-left: 30px;
+}
+
+.emotion-0 ul :first-of-type,
+.emotion-0 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 ul :last-child,
+.emotion-0 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl {
+ padding: 0;
+}
+
+.emotion-0 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-0 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-0 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-0 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-0 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-0 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-0 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-0 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr th :first-of-type,
+.emotion-0 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 table tr th :last-child,
+.emotion-0 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 img {
+ max-width: 100%;
+}
+
+.emotion-0 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-0 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-0 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-0 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-0 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-0 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-0 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-0 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-0 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-0 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-0 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-0 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-0 code,
+.emotion-0 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+
+`;
+
+exports[`Storyshots Docs|Description text 1`] = `
+.emotion-1 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-0 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-0 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-0 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-0 h3 {
+ font-size: 20px;
+}
+
+.emotion-0 h4 {
+ font-size: 16px;
+}
+
+.emotion-0 h5 {
+ font-size: 14px;
+}
+
+.emotion-0 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-0 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-0 pre pre,
+.emotion-0 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-0 pre pre code,
+.emotion-0 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-0 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-0 pre code,
+.emotion-0 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-0 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-0 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-0 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 a.absent {
+ color: #cc0000;
+}
+
+.emotion-0 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-0 h1,
+.emotion-0 h2,
+.emotion-0 h3,
+.emotion-0 h4,
+.emotion-0 h5,
+.emotion-0 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-0 h2:first-of-type,
+.emotion-0 h1:first-of-type,
+.emotion-0 h1:first-of-type + h2,
+.emotion-0 h3:first-of-type,
+.emotion-0 h4:first-of-type,
+.emotion-0 h5:first-of-type,
+.emotion-0 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1:hover a.anchor,
+.emotion-0 h2:hover a.anchor,
+.emotion-0 h3:hover a.anchor,
+.emotion-0 h4:hover a.anchor,
+.emotion-0 h5:hover a.anchor,
+.emotion-0 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 h1 tt,
+.emotion-0 h1 code {
+ font-size: inherit;
+}
+
+.emotion-0 h2 tt,
+.emotion-0 h2 code {
+ font-size: inherit;
+}
+
+.emotion-0 h3 tt,
+.emotion-0 h3 code {
+ font-size: inherit;
+}
+
+.emotion-0 h4 tt,
+.emotion-0 h4 code {
+ font-size: inherit;
+}
+
+.emotion-0 h5 tt,
+.emotion-0 h5 code {
+ font-size: inherit;
+}
+
+.emotion-0 h6 tt,
+.emotion-0 h6 code {
+ font-size: inherit;
+}
+
+.emotion-0 p,
+.emotion-0 blockquote,
+.emotion-0 ul,
+.emotion-0 ol,
+.emotion-0 dl,
+.emotion-0 li,
+.emotion-0 table,
+.emotion-0 pre {
+ margin: 15px 0;
+}
+
+.emotion-0 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-0 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h3:first-of-type,
+.emotion-0 body > h4:first-of-type,
+.emotion-0 body > h5:first-of-type,
+.emotion-0 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 a:first-of-type h1,
+.emotion-0 a:first-of-type h2,
+.emotion-0 a:first-of-type h3,
+.emotion-0 a:first-of-type h4,
+.emotion-0 a:first-of-type h5,
+.emotion-0 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1 p,
+.emotion-0 h2 p,
+.emotion-0 h3 p,
+.emotion-0 h4 p,
+.emotion-0 h5 p,
+.emotion-0 h6 p {
+ margin-top: 0;
+}
+
+.emotion-0 li p.first {
+ display: inline-block;
+}
+
+.emotion-0 ul,
+.emotion-0 ol {
+ padding-left: 30px;
+}
+
+.emotion-0 ul :first-of-type,
+.emotion-0 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 ul :last-child,
+.emotion-0 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl {
+ padding: 0;
+}
+
+.emotion-0 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-0 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-0 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-0 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-0 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-0 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-0 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-0 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr th :first-of-type,
+.emotion-0 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 table tr th :last-child,
+.emotion-0 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 img {
+ max-width: 100%;
+}
+
+.emotion-0 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-0 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-0 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-0 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-0 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-0 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-0 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-0 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-0 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-0 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-0 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-0 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-0 code,
+.emotion-0 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-1 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-0 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-0 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-0 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-0 h3 {
+ font-size: 20px;
+}
+
+.emotion-0 h4 {
+ font-size: 16px;
+}
+
+.emotion-0 h5 {
+ font-size: 14px;
+}
+
+.emotion-0 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-0 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-0 pre pre,
+.emotion-0 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-0 pre pre code,
+.emotion-0 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-0 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-0 pre code,
+.emotion-0 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-0 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-0 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-0 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 a.absent {
+ color: #cc0000;
+}
+
+.emotion-0 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-0 h1,
+.emotion-0 h2,
+.emotion-0 h3,
+.emotion-0 h4,
+.emotion-0 h5,
+.emotion-0 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-0 h2:first-of-type,
+.emotion-0 h1:first-of-type,
+.emotion-0 h1:first-of-type + h2,
+.emotion-0 h3:first-of-type,
+.emotion-0 h4:first-of-type,
+.emotion-0 h5:first-of-type,
+.emotion-0 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1:hover a.anchor,
+.emotion-0 h2:hover a.anchor,
+.emotion-0 h3:hover a.anchor,
+.emotion-0 h4:hover a.anchor,
+.emotion-0 h5:hover a.anchor,
+.emotion-0 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-0 h1 tt,
+.emotion-0 h1 code {
+ font-size: inherit;
+}
+
+.emotion-0 h2 tt,
+.emotion-0 h2 code {
+ font-size: inherit;
+}
+
+.emotion-0 h3 tt,
+.emotion-0 h3 code {
+ font-size: inherit;
+}
+
+.emotion-0 h4 tt,
+.emotion-0 h4 code {
+ font-size: inherit;
+}
+
+.emotion-0 h5 tt,
+.emotion-0 h5 code {
+ font-size: inherit;
+}
+
+.emotion-0 h6 tt,
+.emotion-0 h6 code {
+ font-size: inherit;
+}
+
+.emotion-0 p,
+.emotion-0 blockquote,
+.emotion-0 ul,
+.emotion-0 ol,
+.emotion-0 dl,
+.emotion-0 li,
+.emotion-0 table,
+.emotion-0 pre {
+ margin: 15px 0;
+}
+
+.emotion-0 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-0 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 body > h3:first-of-type,
+.emotion-0 body > h4:first-of-type,
+.emotion-0 body > h5:first-of-type,
+.emotion-0 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 a:first-of-type h1,
+.emotion-0 a:first-of-type h2,
+.emotion-0 a:first-of-type h3,
+.emotion-0 a:first-of-type h4,
+.emotion-0 a:first-of-type h5,
+.emotion-0 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-0 h1 p,
+.emotion-0 h2 p,
+.emotion-0 h3 p,
+.emotion-0 h4 p,
+.emotion-0 h5 p,
+.emotion-0 h6 p {
+ margin-top: 0;
+}
+
+.emotion-0 li p.first {
+ display: inline-block;
+}
+
+.emotion-0 ul,
+.emotion-0 ol {
+ padding-left: 30px;
+}
+
+.emotion-0 ul :first-of-type,
+.emotion-0 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 ul :last-child,
+.emotion-0 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl {
+ padding: 0;
+}
+
+.emotion-0 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-0 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-0 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-0 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-0 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-0 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-0 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-0 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-0 table tr th :first-of-type,
+.emotion-0 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-0 table tr th :last-child,
+.emotion-0 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-0 img {
+ max-width: 100%;
+}
+
+.emotion-0 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-0 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-0 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-0 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-0 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-0 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-0 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-0 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-0 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-0 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-0 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-0 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-0 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-0 code,
+.emotion-0 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+
+
+
+ That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.
+
+
+
+`;
+
+exports[`Storyshots Docs|DocsPage empty 1`] = `
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ No component or story to display
+
+
+ No component found
+
+
+ Oh no! The source is not available.
+
+
+
+`;
+
+exports[`Storyshots Docs|DocsPage markdown 1`] = `
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+
+
+
+ markdown
+
+
+ HTML Mock
+
+
+
+
+
+
+ Name
+
+
+ Description
+
+
+ Default
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|DocsPage no text 1`] = `
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+
+
+
+ no text
+
+
+
+
+
+
+ Name
+
+
+ Description
+
+
+ Default
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|DocsPage text 1`] = `
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-13 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-13 code {
+ padding-right: 10px;
+}
+
+.emotion-13 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-13 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-13 * .token.string {
+ color: #A31515;
+}
+
+.emotion-13 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-13 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-13 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-13 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-13 * .token.function {
+ color: #393A34;
+}
+
+.emotion-13 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-13 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-13 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-13 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-13 * .token.tag {
+ color: #800000;
+}
+
+.emotion-13 * .token.selector {
+ color: #800000;
+}
+
+.emotion-13 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-13 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-13 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-13 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-13 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-12 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-11 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-15 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-14 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-14:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-14 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-14:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-1 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-1 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-1 svg path {
+ fill: currentColor;
+}
+
+.emotion-1:hover {
+ background: #059dfd;
+}
+
+.emotion-1:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-1:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-1:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-18 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-17 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-17 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-17 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-17 h3 {
+ font-size: 20px;
+}
+
+.emotion-17 h4 {
+ font-size: 16px;
+}
+
+.emotion-17 h5 {
+ font-size: 14px;
+}
+
+.emotion-17 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-17 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-17 pre pre,
+.emotion-17 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-17 pre pre code,
+.emotion-17 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-17 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-17 pre code,
+.emotion-17 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-17 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-17 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-17 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 a.absent {
+ color: #cc0000;
+}
+
+.emotion-17 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-17 h1,
+.emotion-17 h2,
+.emotion-17 h3,
+.emotion-17 h4,
+.emotion-17 h5,
+.emotion-17 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-17 h2:first-of-type,
+.emotion-17 h1:first-of-type,
+.emotion-17 h1:first-of-type + h2,
+.emotion-17 h3:first-of-type,
+.emotion-17 h4:first-of-type,
+.emotion-17 h5:first-of-type,
+.emotion-17 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1:hover a.anchor,
+.emotion-17 h2:hover a.anchor,
+.emotion-17 h3:hover a.anchor,
+.emotion-17 h4:hover a.anchor,
+.emotion-17 h5:hover a.anchor,
+.emotion-17 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-17 h1 tt,
+.emotion-17 h1 code {
+ font-size: inherit;
+}
+
+.emotion-17 h2 tt,
+.emotion-17 h2 code {
+ font-size: inherit;
+}
+
+.emotion-17 h3 tt,
+.emotion-17 h3 code {
+ font-size: inherit;
+}
+
+.emotion-17 h4 tt,
+.emotion-17 h4 code {
+ font-size: inherit;
+}
+
+.emotion-17 h5 tt,
+.emotion-17 h5 code {
+ font-size: inherit;
+}
+
+.emotion-17 h6 tt,
+.emotion-17 h6 code {
+ font-size: inherit;
+}
+
+.emotion-17 p,
+.emotion-17 blockquote,
+.emotion-17 ul,
+.emotion-17 ol,
+.emotion-17 dl,
+.emotion-17 li,
+.emotion-17 table,
+.emotion-17 pre {
+ margin: 15px 0;
+}
+
+.emotion-17 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-17 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 body > h3:first-of-type,
+.emotion-17 body > h4:first-of-type,
+.emotion-17 body > h5:first-of-type,
+.emotion-17 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 a:first-of-type h1,
+.emotion-17 a:first-of-type h2,
+.emotion-17 a:first-of-type h3,
+.emotion-17 a:first-of-type h4,
+.emotion-17 a:first-of-type h5,
+.emotion-17 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-17 h1 p,
+.emotion-17 h2 p,
+.emotion-17 h3 p,
+.emotion-17 h4 p,
+.emotion-17 h5 p,
+.emotion-17 h6 p {
+ margin-top: 0;
+}
+
+.emotion-17 li p.first {
+ display: inline-block;
+}
+
+.emotion-17 ul,
+.emotion-17 ol {
+ padding-left: 30px;
+}
+
+.emotion-17 ul :first-of-type,
+.emotion-17 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 ul :last-child,
+.emotion-17 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl {
+ padding: 0;
+}
+
+.emotion-17 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-17 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-17 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-17 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-17 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-17 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-17 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-17 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-17 table tr th :first-of-type,
+.emotion-17 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-17 table tr th :last-child,
+.emotion-17 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-17 img {
+ max-width: 100%;
+}
+
+.emotion-17 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-17 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-17 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-17 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-17 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-17 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-17 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-17 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-17 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-17 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-17 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-17 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-17 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-17 code,
+.emotion-17 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-4 {
+ margin: 25px 0 40px;
+}
+
+.emotion-3 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-2 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-10.emotion-10 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-10.emotion-10 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-10.emotion-10 td,
+.emotion-10.emotion-10 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-10.emotion-10 th:first-of-type,
+.emotion-10.emotion-10 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-10.emotion-10 th:last-of-type,
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-10.emotion-10 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-10.emotion-10 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-10.emotion-10 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-10.emotion-10 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-10.emotion-10 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-10.emotion-10 tbody tr {
+ background: transparent;
+}
+
+.emotion-10.emotion-10 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10.emotion-10 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-5 {
+ font-weight: bold;
+}
+
+.emotion-6 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-7 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-16 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-16 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+
+
+
+ Sensorium
+
+
+ That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.
+
+
+
+
+
+
+ Name
+
+
+ Description
+
+
+ Default
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|DocsPage withSubtitle 1`] = `
+.emotion-14 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-14 code {
+ padding-right: 10px;
+}
+
+.emotion-14 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-14 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.string {
+ color: #A31515;
+}
+
+.emotion-14 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-14 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-14 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.function {
+ color: #393A34;
+}
+
+.emotion-14 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-14 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-14 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-14 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-14 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-14 * .token.tag {
+ color: #800000;
+}
+
+.emotion-14 * .token.selector {
+ color: #800000;
+}
+
+.emotion-14 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-14 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-14 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-14 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-14 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-13 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-12 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-16 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-15 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-15:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-15 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-15:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-2 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-2 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-2 svg path {
+ fill: currentColor;
+}
+
+.emotion-2:hover {
+ background: #059dfd;
+}
+
+.emotion-2:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-2:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-2:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-19 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-18 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-18 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-18 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-18 h3 {
+ font-size: 20px;
+}
+
+.emotion-18 h4 {
+ font-size: 16px;
+}
+
+.emotion-18 h5 {
+ font-size: 14px;
+}
+
+.emotion-18 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-18 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-18 pre pre,
+.emotion-18 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-18 pre pre code,
+.emotion-18 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-18 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-18 pre code,
+.emotion-18 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-18 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-18 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-18 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-18 a.absent {
+ color: #cc0000;
+}
+
+.emotion-18 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-18 h1,
+.emotion-18 h2,
+.emotion-18 h3,
+.emotion-18 h4,
+.emotion-18 h5,
+.emotion-18 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-18 h2:first-of-type,
+.emotion-18 h1:first-of-type,
+.emotion-18 h1:first-of-type + h2,
+.emotion-18 h3:first-of-type,
+.emotion-18 h4:first-of-type,
+.emotion-18 h5:first-of-type,
+.emotion-18 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 h1:hover a.anchor,
+.emotion-18 h2:hover a.anchor,
+.emotion-18 h3:hover a.anchor,
+.emotion-18 h4:hover a.anchor,
+.emotion-18 h5:hover a.anchor,
+.emotion-18 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-18 h1 tt,
+.emotion-18 h1 code {
+ font-size: inherit;
+}
+
+.emotion-18 h2 tt,
+.emotion-18 h2 code {
+ font-size: inherit;
+}
+
+.emotion-18 h3 tt,
+.emotion-18 h3 code {
+ font-size: inherit;
+}
+
+.emotion-18 h4 tt,
+.emotion-18 h4 code {
+ font-size: inherit;
+}
+
+.emotion-18 h5 tt,
+.emotion-18 h5 code {
+ font-size: inherit;
+}
+
+.emotion-18 h6 tt,
+.emotion-18 h6 code {
+ font-size: inherit;
+}
+
+.emotion-18 p,
+.emotion-18 blockquote,
+.emotion-18 ul,
+.emotion-18 ol,
+.emotion-18 dl,
+.emotion-18 li,
+.emotion-18 table,
+.emotion-18 pre {
+ margin: 15px 0;
+}
+
+.emotion-18 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-18 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h3:first-of-type,
+.emotion-18 body > h4:first-of-type,
+.emotion-18 body > h5:first-of-type,
+.emotion-18 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 a:first-of-type h1,
+.emotion-18 a:first-of-type h2,
+.emotion-18 a:first-of-type h3,
+.emotion-18 a:first-of-type h4,
+.emotion-18 a:first-of-type h5,
+.emotion-18 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 h1 p,
+.emotion-18 h2 p,
+.emotion-18 h3 p,
+.emotion-18 h4 p,
+.emotion-18 h5 p,
+.emotion-18 h6 p {
+ margin-top: 0;
+}
+
+.emotion-18 li p.first {
+ display: inline-block;
+}
+
+.emotion-18 ul,
+.emotion-18 ol {
+ padding-left: 30px;
+}
+
+.emotion-18 ul :first-of-type,
+.emotion-18 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 ul :last-child,
+.emotion-18 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 dl {
+ padding: 0;
+}
+
+.emotion-18 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-18 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-18 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-18 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-18 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-18 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-18 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-18 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-18 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-18 table tr th :first-of-type,
+.emotion-18 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 table tr th :last-child,
+.emotion-18 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 img {
+ max-width: 100%;
+}
+
+.emotion-18 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-18 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-18 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-18 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-18 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-18 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-18 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-18 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-18 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-18 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-18 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-18 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-18 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-18 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-18 code,
+.emotion-18 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-3 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-11.emotion-11 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-11.emotion-11 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-11.emotion-11 td,
+.emotion-11.emotion-11 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-11.emotion-11 th:first-of-type,
+.emotion-11.emotion-11 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-11.emotion-11 th:last-of-type,
+.emotion-11.emotion-11 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-11.emotion-11 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-11.emotion-11 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-11.emotion-11 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-11.emotion-11 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-11.emotion-11 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-11.emotion-11 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-11.emotion-11 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-11.emotion-11 tbody tr {
+ background: transparent;
+}
+
+.emotion-11.emotion-11 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-11.emotion-11 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-6 {
+ font-weight: bold;
+}
+
+.emotion-7 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-8 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-17 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-17 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.75);
+}
+
+.emotion-1.emotion-1 {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ border-bottom: none;
+ margin-bottom: 15px;
+}
+
+@media (min-width:600px) {
+ .emotion-1.emotion-1 {
+ font-size: 20px;
+ line-height: 28px;
+ margin-bottom: 25px;
+ }
+}
+
+.emotion-14 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-14 code {
+ padding-right: 10px;
+}
+
+.emotion-14 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-14 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-14 * .token.string {
+ color: #A31515;
+}
+
+.emotion-14 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-14 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-14 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-14 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-14 * .token.function {
+ color: #393A34;
+}
+
+.emotion-14 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-14 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-14 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-14 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-14 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-14 * .token.tag {
+ color: #800000;
+}
+
+.emotion-14 * .token.selector {
+ color: #800000;
+}
+
+.emotion-14 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-14 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-14 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-14 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-14 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-14 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-13 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-12 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-16 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-15 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-15:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-15 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-15:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-2 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-2 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-2 svg path {
+ fill: currentColor;
+}
+
+.emotion-2:hover {
+ background: #059dfd;
+}
+
+.emotion-2:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-2:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-2:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-19 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-18 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-18 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-18 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-18 h3 {
+ font-size: 20px;
+}
+
+.emotion-18 h4 {
+ font-size: 16px;
+}
+
+.emotion-18 h5 {
+ font-size: 14px;
+}
+
+.emotion-18 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-18 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-18 pre pre,
+.emotion-18 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-18 pre pre code,
+.emotion-18 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-18 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-18 pre code,
+.emotion-18 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-18 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-18 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-18 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-18 a.absent {
+ color: #cc0000;
+}
+
+.emotion-18 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-18 h1,
+.emotion-18 h2,
+.emotion-18 h3,
+.emotion-18 h4,
+.emotion-18 h5,
+.emotion-18 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-18 h2:first-of-type,
+.emotion-18 h1:first-of-type,
+.emotion-18 h1:first-of-type + h2,
+.emotion-18 h3:first-of-type,
+.emotion-18 h4:first-of-type,
+.emotion-18 h5:first-of-type,
+.emotion-18 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 h1:hover a.anchor,
+.emotion-18 h2:hover a.anchor,
+.emotion-18 h3:hover a.anchor,
+.emotion-18 h4:hover a.anchor,
+.emotion-18 h5:hover a.anchor,
+.emotion-18 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-18 h1 tt,
+.emotion-18 h1 code {
+ font-size: inherit;
+}
+
+.emotion-18 h2 tt,
+.emotion-18 h2 code {
+ font-size: inherit;
+}
+
+.emotion-18 h3 tt,
+.emotion-18 h3 code {
+ font-size: inherit;
+}
+
+.emotion-18 h4 tt,
+.emotion-18 h4 code {
+ font-size: inherit;
+}
+
+.emotion-18 h5 tt,
+.emotion-18 h5 code {
+ font-size: inherit;
+}
+
+.emotion-18 h6 tt,
+.emotion-18 h6 code {
+ font-size: inherit;
+}
+
+.emotion-18 p,
+.emotion-18 blockquote,
+.emotion-18 ul,
+.emotion-18 ol,
+.emotion-18 dl,
+.emotion-18 li,
+.emotion-18 table,
+.emotion-18 pre {
+ margin: 15px 0;
+}
+
+.emotion-18 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-18 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 body > h3:first-of-type,
+.emotion-18 body > h4:first-of-type,
+.emotion-18 body > h5:first-of-type,
+.emotion-18 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 a:first-of-type h1,
+.emotion-18 a:first-of-type h2,
+.emotion-18 a:first-of-type h3,
+.emotion-18 a:first-of-type h4,
+.emotion-18 a:first-of-type h5,
+.emotion-18 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-18 h1 p,
+.emotion-18 h2 p,
+.emotion-18 h3 p,
+.emotion-18 h4 p,
+.emotion-18 h5 p,
+.emotion-18 h6 p {
+ margin-top: 0;
+}
+
+.emotion-18 li p.first {
+ display: inline-block;
+}
+
+.emotion-18 ul,
+.emotion-18 ol {
+ padding-left: 30px;
+}
+
+.emotion-18 ul :first-of-type,
+.emotion-18 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 ul :last-child,
+.emotion-18 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 dl {
+ padding: 0;
+}
+
+.emotion-18 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-18 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-18 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-18 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-18 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-18 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-18 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-18 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-18 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-18 table tr th :first-of-type,
+.emotion-18 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-18 table tr th :last-child,
+.emotion-18 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-18 img {
+ max-width: 100%;
+}
+
+.emotion-18 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-18 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-18 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-18 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-18 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-18 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-18 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-18 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-18 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-18 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-18 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-18 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-18 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-18 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-18 code,
+.emotion-18 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0.emotion-0 {
+ font-size: 28px;
+ line-height: 32px;
+}
+
+@media (min-width:600px) {
+ .emotion-0.emotion-0 {
+ font-size: 32px;
+ line-height: 36px;
+ }
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-3 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-11.emotion-11 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-11.emotion-11 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-11.emotion-11 td,
+.emotion-11.emotion-11 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-11.emotion-11 th:first-of-type,
+.emotion-11.emotion-11 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-11.emotion-11 th:last-of-type,
+.emotion-11.emotion-11 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-11.emotion-11 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-11.emotion-11 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-11.emotion-11 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-11.emotion-11 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-11.emotion-11 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-11.emotion-11 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-11.emotion-11 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-11.emotion-11 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-11.emotion-11 tbody tr {
+ background: transparent;
+}
+
+.emotion-11.emotion-11 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-11.emotion-11 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-6 {
+ font-weight: bold;
+}
+
+.emotion-7 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-8 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-17 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-17 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.75);
+}
+
+.emotion-1.emotion-1 {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ border-bottom: none;
+ margin-bottom: 15px;
+}
+
+@media (min-width:600px) {
+ .emotion-1.emotion-1 {
+ font-size: 20px;
+ line-height: 28px;
+ margin-bottom: 25px;
+ }
+}
+
+
+
+
+ SimStim
+
+
+ A digital representation of the thoughts and feelings of another person.
+
+
+ That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.
+
+
+
+
+
+
+ Name
+
+
+ Description
+
+
+ Default
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|EmptyBlock error 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ Generic error message
+
+
+
+`;
+
+exports[`Storyshots Docs|IconGallery defaultStyle 1`] = `
+.emotion-1 {
+ shape-rendering: inherit;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ display: block;
+}
+
+.emotion-0 {
+ fill: currentColor;
+}
+
+.emotion-28 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-27 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-27 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-27 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-27 h3 {
+ font-size: 20px;
+}
+
+.emotion-27 h4 {
+ font-size: 16px;
+}
+
+.emotion-27 h5 {
+ font-size: 14px;
+}
+
+.emotion-27 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-27 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-27 pre pre,
+.emotion-27 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-27 pre pre code,
+.emotion-27 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-27 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-27 pre code,
+.emotion-27 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-27 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-27 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-27 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-27 a.absent {
+ color: #cc0000;
+}
+
+.emotion-27 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-27 h1,
+.emotion-27 h2,
+.emotion-27 h3,
+.emotion-27 h4,
+.emotion-27 h5,
+.emotion-27 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-27 h2:first-of-type,
+.emotion-27 h1:first-of-type,
+.emotion-27 h1:first-of-type + h2,
+.emotion-27 h3:first-of-type,
+.emotion-27 h4:first-of-type,
+.emotion-27 h5:first-of-type,
+.emotion-27 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 h1:hover a.anchor,
+.emotion-27 h2:hover a.anchor,
+.emotion-27 h3:hover a.anchor,
+.emotion-27 h4:hover a.anchor,
+.emotion-27 h5:hover a.anchor,
+.emotion-27 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-27 h1 tt,
+.emotion-27 h1 code {
+ font-size: inherit;
+}
+
+.emotion-27 h2 tt,
+.emotion-27 h2 code {
+ font-size: inherit;
+}
+
+.emotion-27 h3 tt,
+.emotion-27 h3 code {
+ font-size: inherit;
+}
+
+.emotion-27 h4 tt,
+.emotion-27 h4 code {
+ font-size: inherit;
+}
+
+.emotion-27 h5 tt,
+.emotion-27 h5 code {
+ font-size: inherit;
+}
+
+.emotion-27 h6 tt,
+.emotion-27 h6 code {
+ font-size: inherit;
+}
+
+.emotion-27 p,
+.emotion-27 blockquote,
+.emotion-27 ul,
+.emotion-27 ol,
+.emotion-27 dl,
+.emotion-27 li,
+.emotion-27 table,
+.emotion-27 pre {
+ margin: 15px 0;
+}
+
+.emotion-27 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-27 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h3:first-of-type,
+.emotion-27 body > h4:first-of-type,
+.emotion-27 body > h5:first-of-type,
+.emotion-27 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 a:first-of-type h1,
+.emotion-27 a:first-of-type h2,
+.emotion-27 a:first-of-type h3,
+.emotion-27 a:first-of-type h4,
+.emotion-27 a:first-of-type h5,
+.emotion-27 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 h1 p,
+.emotion-27 h2 p,
+.emotion-27 h3 p,
+.emotion-27 h4 p,
+.emotion-27 h5 p,
+.emotion-27 h6 p {
+ margin-top: 0;
+}
+
+.emotion-27 li p.first {
+ display: inline-block;
+}
+
+.emotion-27 ul,
+.emotion-27 ol {
+ padding-left: 30px;
+}
+
+.emotion-27 ul :first-of-type,
+.emotion-27 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 ul :last-child,
+.emotion-27 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 dl {
+ padding: 0;
+}
+
+.emotion-27 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-27 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-27 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-27 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-27 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-27 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-27 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-27 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-27 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-27 table tr th :first-of-type,
+.emotion-27 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 table tr th :last-child,
+.emotion-27 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 img {
+ max-width: 100%;
+}
+
+.emotion-27 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-27 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-27 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-27 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-27 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-27 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-27 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-27 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-27 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-27 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-27 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-27 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-27 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-27 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-27 code,
+.emotion-27 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-26 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+.emotion-4 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex: 0 1 calc(20% - 10px);
+ -ms-flex: 0 1 calc(20% - 10px);
+ flex: 0 1 calc(20% - 10px);
+ min-width: 120px;
+ margin: 0px 10px 30px 0;
+}
+
+.emotion-2 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ overflow: hidden;
+ height: 40px;
+ width: 40px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex: none;
+ -ms-flex: none;
+ flex: none;
+}
+
+.emotion-2 > img,
+.emotion-2 > svg {
+ width: 20px;
+ height: 20px;
+}
+
+.emotion-3 {
+ margin-left: 10px;
+ line-height: 1.2;
+}
+
+.emotion-1 {
+ shape-rendering: inherit;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ display: block;
+}
+
+.emotion-0 {
+ fill: currentColor;
+}
+
+.emotion-28 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-27 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-27 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-27 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-27 h3 {
+ font-size: 20px;
+}
+
+.emotion-27 h4 {
+ font-size: 16px;
+}
+
+.emotion-27 h5 {
+ font-size: 14px;
+}
+
+.emotion-27 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-27 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-27 pre pre,
+.emotion-27 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-27 pre pre code,
+.emotion-27 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-27 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-27 pre code,
+.emotion-27 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-27 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-27 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-27 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-27 a.absent {
+ color: #cc0000;
+}
+
+.emotion-27 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-27 h1,
+.emotion-27 h2,
+.emotion-27 h3,
+.emotion-27 h4,
+.emotion-27 h5,
+.emotion-27 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-27 h2:first-of-type,
+.emotion-27 h1:first-of-type,
+.emotion-27 h1:first-of-type + h2,
+.emotion-27 h3:first-of-type,
+.emotion-27 h4:first-of-type,
+.emotion-27 h5:first-of-type,
+.emotion-27 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 h1:hover a.anchor,
+.emotion-27 h2:hover a.anchor,
+.emotion-27 h3:hover a.anchor,
+.emotion-27 h4:hover a.anchor,
+.emotion-27 h5:hover a.anchor,
+.emotion-27 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-27 h1 tt,
+.emotion-27 h1 code {
+ font-size: inherit;
+}
+
+.emotion-27 h2 tt,
+.emotion-27 h2 code {
+ font-size: inherit;
+}
+
+.emotion-27 h3 tt,
+.emotion-27 h3 code {
+ font-size: inherit;
+}
+
+.emotion-27 h4 tt,
+.emotion-27 h4 code {
+ font-size: inherit;
+}
+
+.emotion-27 h5 tt,
+.emotion-27 h5 code {
+ font-size: inherit;
+}
+
+.emotion-27 h6 tt,
+.emotion-27 h6 code {
+ font-size: inherit;
+}
+
+.emotion-27 p,
+.emotion-27 blockquote,
+.emotion-27 ul,
+.emotion-27 ol,
+.emotion-27 dl,
+.emotion-27 li,
+.emotion-27 table,
+.emotion-27 pre {
+ margin: 15px 0;
+}
+
+.emotion-27 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-27 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 body > h3:first-of-type,
+.emotion-27 body > h4:first-of-type,
+.emotion-27 body > h5:first-of-type,
+.emotion-27 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 a:first-of-type h1,
+.emotion-27 a:first-of-type h2,
+.emotion-27 a:first-of-type h3,
+.emotion-27 a:first-of-type h4,
+.emotion-27 a:first-of-type h5,
+.emotion-27 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-27 h1 p,
+.emotion-27 h2 p,
+.emotion-27 h3 p,
+.emotion-27 h4 p,
+.emotion-27 h5 p,
+.emotion-27 h6 p {
+ margin-top: 0;
+}
+
+.emotion-27 li p.first {
+ display: inline-block;
+}
+
+.emotion-27 ul,
+.emotion-27 ol {
+ padding-left: 30px;
+}
+
+.emotion-27 ul :first-of-type,
+.emotion-27 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 ul :last-child,
+.emotion-27 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 dl {
+ padding: 0;
+}
+
+.emotion-27 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-27 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-27 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-27 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-27 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-27 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-27 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-27 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-27 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-27 table tr th :first-of-type,
+.emotion-27 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-27 table tr th :last-child,
+.emotion-27 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-27 img {
+ max-width: 100%;
+}
+
+.emotion-27 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-27 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-27 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-27 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-27 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-27 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-27 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-27 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-27 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-27 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-27 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-27 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-27 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-27 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-27 code,
+.emotion-27 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-26 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+.emotion-4 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex: 0 1 calc(20% - 10px);
+ -ms-flex: 0 1 calc(20% - 10px);
+ flex: 0 1 calc(20% - 10px);
+ min-width: 120px;
+ margin: 0px 10px 30px 0;
+}
+
+.emotion-2 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ overflow: hidden;
+ height: 40px;
+ width: 40px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex: none;
+ -ms-flex: none;
+ flex: none;
+}
+
+.emotion-2 > img,
+.emotion-2 > svg {
+ width: 20px;
+ height: 20px;
+}
+
+.emotion-3 {
+ margin-left: 10px;
+ line-height: 1.2;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ bar
+
+
+
+
+
+
+
+ bar
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview codeCollapsed 1`] = `
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+
+`;
+
+exports[`Storyshots Docs|Preview codeError 1`] = `
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-8 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-7 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-7 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-7 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-7 h3 {
+ font-size: 20px;
+}
+
+.emotion-7 h4 {
+ font-size: 16px;
+}
+
+.emotion-7 h5 {
+ font-size: 14px;
+}
+
+.emotion-7 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-7 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-7 pre pre,
+.emotion-7 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-7 pre pre code,
+.emotion-7 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-7 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-7 pre code,
+.emotion-7 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-7 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-7 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-7 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-7 a.absent {
+ color: #cc0000;
+}
+
+.emotion-7 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-7 h1,
+.emotion-7 h2,
+.emotion-7 h3,
+.emotion-7 h4,
+.emotion-7 h5,
+.emotion-7 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-7 h2:first-of-type,
+.emotion-7 h1:first-of-type,
+.emotion-7 h1:first-of-type + h2,
+.emotion-7 h3:first-of-type,
+.emotion-7 h4:first-of-type,
+.emotion-7 h5:first-of-type,
+.emotion-7 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 h1:hover a.anchor,
+.emotion-7 h2:hover a.anchor,
+.emotion-7 h3:hover a.anchor,
+.emotion-7 h4:hover a.anchor,
+.emotion-7 h5:hover a.anchor,
+.emotion-7 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-7 h1 tt,
+.emotion-7 h1 code {
+ font-size: inherit;
+}
+
+.emotion-7 h2 tt,
+.emotion-7 h2 code {
+ font-size: inherit;
+}
+
+.emotion-7 h3 tt,
+.emotion-7 h3 code {
+ font-size: inherit;
+}
+
+.emotion-7 h4 tt,
+.emotion-7 h4 code {
+ font-size: inherit;
+}
+
+.emotion-7 h5 tt,
+.emotion-7 h5 code {
+ font-size: inherit;
+}
+
+.emotion-7 h6 tt,
+.emotion-7 h6 code {
+ font-size: inherit;
+}
+
+.emotion-7 p,
+.emotion-7 blockquote,
+.emotion-7 ul,
+.emotion-7 ol,
+.emotion-7 dl,
+.emotion-7 li,
+.emotion-7 table,
+.emotion-7 pre {
+ margin: 15px 0;
+}
+
+.emotion-7 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-7 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h3:first-of-type,
+.emotion-7 body > h4:first-of-type,
+.emotion-7 body > h5:first-of-type,
+.emotion-7 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 a:first-of-type h1,
+.emotion-7 a:first-of-type h2,
+.emotion-7 a:first-of-type h3,
+.emotion-7 a:first-of-type h4,
+.emotion-7 a:first-of-type h5,
+.emotion-7 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 h1 p,
+.emotion-7 h2 p,
+.emotion-7 h3 p,
+.emotion-7 h4 p,
+.emotion-7 h5 p,
+.emotion-7 h6 p {
+ margin-top: 0;
+}
+
+.emotion-7 li p.first {
+ display: inline-block;
+}
+
+.emotion-7 ul,
+.emotion-7 ol {
+ padding-left: 30px;
+}
+
+.emotion-7 ul :first-of-type,
+.emotion-7 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 ul :last-child,
+.emotion-7 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 dl {
+ padding: 0;
+}
+
+.emotion-7 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-7 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-7 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-7 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-7 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-7 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-7 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-7 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-7 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-7 table tr th :first-of-type,
+.emotion-7 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 table tr th :last-child,
+.emotion-7 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 img {
+ max-width: 100%;
+}
+
+.emotion-7 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-7 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-7 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-7 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-7 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-7 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-7 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-7 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-7 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-7 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-7 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-7 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-7 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-7 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-7 code,
+.emotion-7 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-6 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.emotion-5 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+ margin: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border: none;
+ background: rgba(0,0,0,0.85);
+ color: #FFFFFF;
+}
+
+.emotion-5 button {
+ background: rgba(0,0,0,0.85);
+}
+
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-8 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-7 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-7 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-7 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-7 h3 {
+ font-size: 20px;
+}
+
+.emotion-7 h4 {
+ font-size: 16px;
+}
+
+.emotion-7 h5 {
+ font-size: 14px;
+}
+
+.emotion-7 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-7 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-7 pre pre,
+.emotion-7 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-7 pre pre code,
+.emotion-7 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-7 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-7 pre code,
+.emotion-7 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-7 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-7 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-7 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-7 a.absent {
+ color: #cc0000;
+}
+
+.emotion-7 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-7 h1,
+.emotion-7 h2,
+.emotion-7 h3,
+.emotion-7 h4,
+.emotion-7 h5,
+.emotion-7 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-7 h2:first-of-type,
+.emotion-7 h1:first-of-type,
+.emotion-7 h1:first-of-type + h2,
+.emotion-7 h3:first-of-type,
+.emotion-7 h4:first-of-type,
+.emotion-7 h5:first-of-type,
+.emotion-7 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 h1:hover a.anchor,
+.emotion-7 h2:hover a.anchor,
+.emotion-7 h3:hover a.anchor,
+.emotion-7 h4:hover a.anchor,
+.emotion-7 h5:hover a.anchor,
+.emotion-7 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-7 h1 tt,
+.emotion-7 h1 code {
+ font-size: inherit;
+}
+
+.emotion-7 h2 tt,
+.emotion-7 h2 code {
+ font-size: inherit;
+}
+
+.emotion-7 h3 tt,
+.emotion-7 h3 code {
+ font-size: inherit;
+}
+
+.emotion-7 h4 tt,
+.emotion-7 h4 code {
+ font-size: inherit;
+}
+
+.emotion-7 h5 tt,
+.emotion-7 h5 code {
+ font-size: inherit;
+}
+
+.emotion-7 h6 tt,
+.emotion-7 h6 code {
+ font-size: inherit;
+}
+
+.emotion-7 p,
+.emotion-7 blockquote,
+.emotion-7 ul,
+.emotion-7 ol,
+.emotion-7 dl,
+.emotion-7 li,
+.emotion-7 table,
+.emotion-7 pre {
+ margin: 15px 0;
+}
+
+.emotion-7 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-7 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 body > h3:first-of-type,
+.emotion-7 body > h4:first-of-type,
+.emotion-7 body > h5:first-of-type,
+.emotion-7 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 a:first-of-type h1,
+.emotion-7 a:first-of-type h2,
+.emotion-7 a:first-of-type h3,
+.emotion-7 a:first-of-type h4,
+.emotion-7 a:first-of-type h5,
+.emotion-7 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-7 h1 p,
+.emotion-7 h2 p,
+.emotion-7 h3 p,
+.emotion-7 h4 p,
+.emotion-7 h5 p,
+.emotion-7 h6 p {
+ margin-top: 0;
+}
+
+.emotion-7 li p.first {
+ display: inline-block;
+}
+
+.emotion-7 ul,
+.emotion-7 ol {
+ padding-left: 30px;
+}
+
+.emotion-7 ul :first-of-type,
+.emotion-7 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 ul :last-child,
+.emotion-7 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 dl {
+ padding: 0;
+}
+
+.emotion-7 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-7 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-7 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-7 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-7 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-7 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-7 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-7 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-7 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-7 table tr th :first-of-type,
+.emotion-7 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-7 table tr th :last-child,
+.emotion-7 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-7 img {
+ max-width: 100%;
+}
+
+.emotion-7 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-7 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-7 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-7 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-7 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-7 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-7 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-7 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-7 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-7 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-7 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-7 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-7 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-7 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-7 code,
+.emotion-7 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-6 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.emotion-5 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+ margin: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border: none;
+ background: rgba(0,0,0,0.85);
+ color: #FFFFFF;
+}
+
+.emotion-5 button {
+ background: rgba(0,0,0,0.85);
+}
+
+
+
+
+
+
+ Oh no! The source is not available.
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview codeExpanded 1`] = `
+.emotion-6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-5 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-13 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-12 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-12 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-12 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-12 h3 {
+ font-size: 20px;
+}
+
+.emotion-12 h4 {
+ font-size: 16px;
+}
+
+.emotion-12 h5 {
+ font-size: 14px;
+}
+
+.emotion-12 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-12 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-12 pre pre,
+.emotion-12 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-12 pre pre code,
+.emotion-12 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-12 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-12 pre code,
+.emotion-12 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-12 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-12 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-12 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-12 a.absent {
+ color: #cc0000;
+}
+
+.emotion-12 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-12 h1,
+.emotion-12 h2,
+.emotion-12 h3,
+.emotion-12 h4,
+.emotion-12 h5,
+.emotion-12 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-12 h2:first-of-type,
+.emotion-12 h1:first-of-type,
+.emotion-12 h1:first-of-type + h2,
+.emotion-12 h3:first-of-type,
+.emotion-12 h4:first-of-type,
+.emotion-12 h5:first-of-type,
+.emotion-12 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 h1:hover a.anchor,
+.emotion-12 h2:hover a.anchor,
+.emotion-12 h3:hover a.anchor,
+.emotion-12 h4:hover a.anchor,
+.emotion-12 h5:hover a.anchor,
+.emotion-12 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-12 h1 tt,
+.emotion-12 h1 code {
+ font-size: inherit;
+}
+
+.emotion-12 h2 tt,
+.emotion-12 h2 code {
+ font-size: inherit;
+}
+
+.emotion-12 h3 tt,
+.emotion-12 h3 code {
+ font-size: inherit;
+}
+
+.emotion-12 h4 tt,
+.emotion-12 h4 code {
+ font-size: inherit;
+}
+
+.emotion-12 h5 tt,
+.emotion-12 h5 code {
+ font-size: inherit;
+}
+
+.emotion-12 h6 tt,
+.emotion-12 h6 code {
+ font-size: inherit;
+}
+
+.emotion-12 p,
+.emotion-12 blockquote,
+.emotion-12 ul,
+.emotion-12 ol,
+.emotion-12 dl,
+.emotion-12 li,
+.emotion-12 table,
+.emotion-12 pre {
+ margin: 15px 0;
+}
+
+.emotion-12 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-12 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h3:first-of-type,
+.emotion-12 body > h4:first-of-type,
+.emotion-12 body > h5:first-of-type,
+.emotion-12 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 a:first-of-type h1,
+.emotion-12 a:first-of-type h2,
+.emotion-12 a:first-of-type h3,
+.emotion-12 a:first-of-type h4,
+.emotion-12 a:first-of-type h5,
+.emotion-12 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 h1 p,
+.emotion-12 h2 p,
+.emotion-12 h3 p,
+.emotion-12 h4 p,
+.emotion-12 h5 p,
+.emotion-12 h6 p {
+ margin-top: 0;
+}
+
+.emotion-12 li p.first {
+ display: inline-block;
+}
+
+.emotion-12 ul,
+.emotion-12 ol {
+ padding-left: 30px;
+}
+
+.emotion-12 ul :first-of-type,
+.emotion-12 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 ul :last-child,
+.emotion-12 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 dl {
+ padding: 0;
+}
+
+.emotion-12 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-12 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-12 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-12 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-12 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-12 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-12 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-12 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-12 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-12 table tr th :first-of-type,
+.emotion-12 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 table tr th :last-child,
+.emotion-12 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 img {
+ max-width: 100%;
+}
+
+.emotion-12 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-12 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-12 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-12 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-12 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-12 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-12 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-12 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-12 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-12 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-12 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-12 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-12 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-12 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-12 code,
+.emotion-12 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-11 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.emotion-10 {
+ position: relative;
+ overflow: hidden;
+ color: #FFFFFF;
+ border: 1px solid rgba(255,255,255,.1);
+ background: #333333;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.20) 0 2px 5px 0;
+ margin: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border: none;
+ background: rgba(0,0,0,0.85);
+ color: #FFFFFF;
+}
+
+.emotion-10 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-10 button {
+ background: rgba(0,0,0,0.85);
+}
+
+.emotion-7 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-7 code {
+ padding-right: 10px;
+}
+
+.emotion-7 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-7 * .token.comment {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.prolog {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.doctype {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.cdata {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.string {
+ color: #92C379;
+}
+
+.emotion-7 * .token.punctuation {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.operator {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.url {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.symbol {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.number {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.boolean {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.variable {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.constant {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.inserted {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.atrule {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.keyword {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.attr-value {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.function {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-7 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-7 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-7 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-7 * .token.class-name {
+ color: #FFFFB6;
+}
+
+.emotion-7 * .token.tag {
+ color: #A8FF60;
+}
+
+.emotion-7 * .token.selector {
+ color: #A8FF60;
+}
+
+.emotion-7 * .token.attr-name {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.property {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.regex {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.entity {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #EDEDED;
+}
+
+.emotion-7 * .language-json .token.boolean {
+ color: #B474DD;
+}
+
+.emotion-7 * .language-json .token.number {
+ color: #B474DD;
+}
+
+.emotion-7 * .language-json .token.property {
+ color: #FFFFB6;
+}
+
+.emotion-7 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-9 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #333;
+ z-index: 1;
+}
+
+.emotion-8 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #FFFFFF;
+ background: #333;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(255,255,255,.1);
+ border-left: 1px solid rgba(255,255,255,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-8:not(:last-child) {
+ border-right: 1px solid rgba(255,255,255,.1);
+}
+
+.emotion-8 + * {
+ border-left: 1px solid rgba(255,255,255,.1);
+ border-radius: 0;
+}
+
+.emotion-8:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-5 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-2 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-2:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-2:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-13 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-12 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-12 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-12 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-12 h3 {
+ font-size: 20px;
+}
+
+.emotion-12 h4 {
+ font-size: 16px;
+}
+
+.emotion-12 h5 {
+ font-size: 14px;
+}
+
+.emotion-12 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-12 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-12 pre pre,
+.emotion-12 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-12 pre pre code,
+.emotion-12 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-12 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-12 pre code,
+.emotion-12 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-12 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-12 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-12 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-12 a.absent {
+ color: #cc0000;
+}
+
+.emotion-12 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-12 h1,
+.emotion-12 h2,
+.emotion-12 h3,
+.emotion-12 h4,
+.emotion-12 h5,
+.emotion-12 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-12 h2:first-of-type,
+.emotion-12 h1:first-of-type,
+.emotion-12 h1:first-of-type + h2,
+.emotion-12 h3:first-of-type,
+.emotion-12 h4:first-of-type,
+.emotion-12 h5:first-of-type,
+.emotion-12 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 h1:hover a.anchor,
+.emotion-12 h2:hover a.anchor,
+.emotion-12 h3:hover a.anchor,
+.emotion-12 h4:hover a.anchor,
+.emotion-12 h5:hover a.anchor,
+.emotion-12 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-12 h1 tt,
+.emotion-12 h1 code {
+ font-size: inherit;
+}
+
+.emotion-12 h2 tt,
+.emotion-12 h2 code {
+ font-size: inherit;
+}
+
+.emotion-12 h3 tt,
+.emotion-12 h3 code {
+ font-size: inherit;
+}
+
+.emotion-12 h4 tt,
+.emotion-12 h4 code {
+ font-size: inherit;
+}
+
+.emotion-12 h5 tt,
+.emotion-12 h5 code {
+ font-size: inherit;
+}
+
+.emotion-12 h6 tt,
+.emotion-12 h6 code {
+ font-size: inherit;
+}
+
+.emotion-12 p,
+.emotion-12 blockquote,
+.emotion-12 ul,
+.emotion-12 ol,
+.emotion-12 dl,
+.emotion-12 li,
+.emotion-12 table,
+.emotion-12 pre {
+ margin: 15px 0;
+}
+
+.emotion-12 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-12 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 body > h3:first-of-type,
+.emotion-12 body > h4:first-of-type,
+.emotion-12 body > h5:first-of-type,
+.emotion-12 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 a:first-of-type h1,
+.emotion-12 a:first-of-type h2,
+.emotion-12 a:first-of-type h3,
+.emotion-12 a:first-of-type h4,
+.emotion-12 a:first-of-type h5,
+.emotion-12 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-12 h1 p,
+.emotion-12 h2 p,
+.emotion-12 h3 p,
+.emotion-12 h4 p,
+.emotion-12 h5 p,
+.emotion-12 h6 p {
+ margin-top: 0;
+}
+
+.emotion-12 li p.first {
+ display: inline-block;
+}
+
+.emotion-12 ul,
+.emotion-12 ol {
+ padding-left: 30px;
+}
+
+.emotion-12 ul :first-of-type,
+.emotion-12 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 ul :last-child,
+.emotion-12 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 dl {
+ padding: 0;
+}
+
+.emotion-12 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-12 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-12 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-12 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-12 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-12 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-12 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-12 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-12 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-12 table tr th :first-of-type,
+.emotion-12 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-12 table tr th :last-child,
+.emotion-12 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-12 img {
+ max-width: 100%;
+}
+
+.emotion-12 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-12 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-12 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-12 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-12 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-12 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-12 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-12 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-12 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-12 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-12 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-12 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-12 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-12 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-12 code,
+.emotion-12 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-11 {
+ margin: 25px 0 40px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.emotion-10 {
+ position: relative;
+ overflow: hidden;
+ color: #FFFFFF;
+ border: 1px solid rgba(255,255,255,.1);
+ background: #333333;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.20) 0 2px 5px 0;
+ margin: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border: none;
+ background: rgba(0,0,0,0.85);
+ color: #FFFFFF;
+}
+
+.emotion-10 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-10 button {
+ background: rgba(0,0,0,0.85);
+}
+
+.emotion-7 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-7 code {
+ padding-right: 10px;
+}
+
+.emotion-7 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-7 * .token.comment {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.prolog {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.doctype {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.cdata {
+ color: #7C7C7C;
+ font-style: italic;
+}
+
+.emotion-7 * .token.string {
+ color: #92C379;
+}
+
+.emotion-7 * .token.punctuation {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.operator {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.url {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.symbol {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.number {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.boolean {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.variable {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.constant {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.inserted {
+ color: #C6C5FE;
+}
+
+.emotion-7 * .token.atrule {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.keyword {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.attr-value {
+ color: #B474DD;
+}
+
+.emotion-7 * .token.function {
+ color: #EDEDED;
+}
+
+.emotion-7 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-7 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-7 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-7 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-7 * .token.class-name {
+ color: #FFFFB6;
+}
+
+.emotion-7 * .token.tag {
+ color: #A8FF60;
+}
+
+.emotion-7 * .token.selector {
+ color: #A8FF60;
+}
+
+.emotion-7 * .token.attr-name {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.property {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.regex {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.entity {
+ color: #96CBFE;
+}
+
+.emotion-7 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #EDEDED;
+}
+
+.emotion-7 * .language-json .token.boolean {
+ color: #B474DD;
+}
+
+.emotion-7 * .language-json .token.number {
+ color: #B474DD;
+}
+
+.emotion-7 * .language-json .token.property {
+ color: #FFFFB6;
+}
+
+.emotion-7 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-9 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #333;
+ z-index: 1;
+}
+
+.emotion-8 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #FFFFFF;
+ background: #333;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(255,255,255,.1);
+ border-left: 1px solid rgba(255,255,255,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-8:not(:last-child) {
+ border-right: 1px solid rgba(255,255,255,.1);
+}
+
+.emotion-8 + * {
+ border-left: 1px solid rgba(255,255,255,.1);
+ border-radius: 0;
+}
+
+.emotion-8:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview column 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-top: -20px;
+}
+
+.emotion-3 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ margin: 25px 0 40px;
+}
+
+.emotion-4 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-top: -20px;
+}
+
+.emotion-3 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+
+
+
+
+
+
+
+ Button 1
+
+
+
+
+ Button 2
+
+
+
+
+ Button 3
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview gridWith3Columns 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-24 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-23 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-23 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-23 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-23 h3 {
+ font-size: 20px;
+}
+
+.emotion-23 h4 {
+ font-size: 16px;
+}
+
+.emotion-23 h5 {
+ font-size: 14px;
+}
+
+.emotion-23 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-23 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-23 pre pre,
+.emotion-23 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-23 pre pre code,
+.emotion-23 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-23 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-23 pre code,
+.emotion-23 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-23 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-23 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-23 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-23 a.absent {
+ color: #cc0000;
+}
+
+.emotion-23 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-23 h1,
+.emotion-23 h2,
+.emotion-23 h3,
+.emotion-23 h4,
+.emotion-23 h5,
+.emotion-23 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-23 h2:first-of-type,
+.emotion-23 h1:first-of-type,
+.emotion-23 h1:first-of-type + h2,
+.emotion-23 h3:first-of-type,
+.emotion-23 h4:first-of-type,
+.emotion-23 h5:first-of-type,
+.emotion-23 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 h1:hover a.anchor,
+.emotion-23 h2:hover a.anchor,
+.emotion-23 h3:hover a.anchor,
+.emotion-23 h4:hover a.anchor,
+.emotion-23 h5:hover a.anchor,
+.emotion-23 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-23 h1 tt,
+.emotion-23 h1 code {
+ font-size: inherit;
+}
+
+.emotion-23 h2 tt,
+.emotion-23 h2 code {
+ font-size: inherit;
+}
+
+.emotion-23 h3 tt,
+.emotion-23 h3 code {
+ font-size: inherit;
+}
+
+.emotion-23 h4 tt,
+.emotion-23 h4 code {
+ font-size: inherit;
+}
+
+.emotion-23 h5 tt,
+.emotion-23 h5 code {
+ font-size: inherit;
+}
+
+.emotion-23 h6 tt,
+.emotion-23 h6 code {
+ font-size: inherit;
+}
+
+.emotion-23 p,
+.emotion-23 blockquote,
+.emotion-23 ul,
+.emotion-23 ol,
+.emotion-23 dl,
+.emotion-23 li,
+.emotion-23 table,
+.emotion-23 pre {
+ margin: 15px 0;
+}
+
+.emotion-23 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-23 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h3:first-of-type,
+.emotion-23 body > h4:first-of-type,
+.emotion-23 body > h5:first-of-type,
+.emotion-23 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 a:first-of-type h1,
+.emotion-23 a:first-of-type h2,
+.emotion-23 a:first-of-type h3,
+.emotion-23 a:first-of-type h4,
+.emotion-23 a:first-of-type h5,
+.emotion-23 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 h1 p,
+.emotion-23 h2 p,
+.emotion-23 h3 p,
+.emotion-23 h4 p,
+.emotion-23 h5 p,
+.emotion-23 h6 p {
+ margin-top: 0;
+}
+
+.emotion-23 li p.first {
+ display: inline-block;
+}
+
+.emotion-23 ul,
+.emotion-23 ol {
+ padding-left: 30px;
+}
+
+.emotion-23 ul :first-of-type,
+.emotion-23 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 ul :last-child,
+.emotion-23 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 dl {
+ padding: 0;
+}
+
+.emotion-23 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-23 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-23 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-23 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-23 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-23 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-23 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-23 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-23 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-23 table tr th :first-of-type,
+.emotion-23 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 table tr th :last-child,
+.emotion-23 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 img {
+ max-width: 100%;
+}
+
+.emotion-23 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-23 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-23 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-23 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-23 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-23 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-23 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-23 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-23 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-23 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-23 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-23 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-23 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-23 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-23 code,
+.emotion-23 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-22 {
+ margin: 25px 0 40px;
+}
+
+.emotion-21 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-20 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-20 > * {
+ -webkit-flex: 1 1 calc(100%/3 - 20px);
+ -ms-flex: 1 1 calc(100%/3 - 20px);
+ flex: 1 1 calc(100%/3 - 20px);
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-24 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-23 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-23 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-23 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-23 h3 {
+ font-size: 20px;
+}
+
+.emotion-23 h4 {
+ font-size: 16px;
+}
+
+.emotion-23 h5 {
+ font-size: 14px;
+}
+
+.emotion-23 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-23 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-23 pre pre,
+.emotion-23 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-23 pre pre code,
+.emotion-23 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-23 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-23 pre code,
+.emotion-23 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-23 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-23 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-23 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-23 a.absent {
+ color: #cc0000;
+}
+
+.emotion-23 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-23 h1,
+.emotion-23 h2,
+.emotion-23 h3,
+.emotion-23 h4,
+.emotion-23 h5,
+.emotion-23 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-23 h2:first-of-type,
+.emotion-23 h1:first-of-type,
+.emotion-23 h1:first-of-type + h2,
+.emotion-23 h3:first-of-type,
+.emotion-23 h4:first-of-type,
+.emotion-23 h5:first-of-type,
+.emotion-23 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 h1:hover a.anchor,
+.emotion-23 h2:hover a.anchor,
+.emotion-23 h3:hover a.anchor,
+.emotion-23 h4:hover a.anchor,
+.emotion-23 h5:hover a.anchor,
+.emotion-23 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-23 h1 tt,
+.emotion-23 h1 code {
+ font-size: inherit;
+}
+
+.emotion-23 h2 tt,
+.emotion-23 h2 code {
+ font-size: inherit;
+}
+
+.emotion-23 h3 tt,
+.emotion-23 h3 code {
+ font-size: inherit;
+}
+
+.emotion-23 h4 tt,
+.emotion-23 h4 code {
+ font-size: inherit;
+}
+
+.emotion-23 h5 tt,
+.emotion-23 h5 code {
+ font-size: inherit;
+}
+
+.emotion-23 h6 tt,
+.emotion-23 h6 code {
+ font-size: inherit;
+}
+
+.emotion-23 p,
+.emotion-23 blockquote,
+.emotion-23 ul,
+.emotion-23 ol,
+.emotion-23 dl,
+.emotion-23 li,
+.emotion-23 table,
+.emotion-23 pre {
+ margin: 15px 0;
+}
+
+.emotion-23 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-23 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 body > h3:first-of-type,
+.emotion-23 body > h4:first-of-type,
+.emotion-23 body > h5:first-of-type,
+.emotion-23 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 a:first-of-type h1,
+.emotion-23 a:first-of-type h2,
+.emotion-23 a:first-of-type h3,
+.emotion-23 a:first-of-type h4,
+.emotion-23 a:first-of-type h5,
+.emotion-23 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-23 h1 p,
+.emotion-23 h2 p,
+.emotion-23 h3 p,
+.emotion-23 h4 p,
+.emotion-23 h5 p,
+.emotion-23 h6 p {
+ margin-top: 0;
+}
+
+.emotion-23 li p.first {
+ display: inline-block;
+}
+
+.emotion-23 ul,
+.emotion-23 ol {
+ padding-left: 30px;
+}
+
+.emotion-23 ul :first-of-type,
+.emotion-23 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 ul :last-child,
+.emotion-23 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 dl {
+ padding: 0;
+}
+
+.emotion-23 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-23 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-23 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-23 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-23 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-23 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-23 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-23 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-23 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-23 table tr th :first-of-type,
+.emotion-23 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-23 table tr th :last-child,
+.emotion-23 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-23 img {
+ max-width: 100%;
+}
+
+.emotion-23 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-23 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-23 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-23 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-23 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-23 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-23 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-23 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-23 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-23 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-23 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-23 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-23 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-23 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-23 code,
+.emotion-23 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-22 {
+ margin: 25px 0 40px;
+}
+
+.emotion-21 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-20 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-20 > * {
+ -webkit-flex: 1 1 calc(100%/3 - 20px);
+ -ms-flex: 1 1 calc(100%/3 - 20px);
+ flex: 1 1 calc(100%/3 - 20px);
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+
+
+
+
+
+
+
+ Button 1
+
+
+
+
+ Button 2
+
+
+
+
+ Button 3
+
+
+
+
+ Button 4
+
+
+
+
+ Button 5
+
+
+
+
+ Button 6
+
+
+
+
+ Button 7 long long long long long title
+
+
+
+
+ Button 8
+
+
+
+
+ Button 9
+
+
+
+
+ Button 10
+
+
+
+
+ Button 11
+
+
+
+
+ Button 12
+
+
+
+
+ Button 13
+
+
+
+
+ Button 14
+
+
+
+
+ Button 15
+
+
+
+
+ Button 16
+
+
+
+
+ Button 17
+
+
+
+
+ Button 18
+
+
+
+
+ Button 19
+
+
+
+
+ Button 20
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview row 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-11 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-10 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-10 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-10 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10 h3 {
+ font-size: 20px;
+}
+
+.emotion-10 h4 {
+ font-size: 16px;
+}
+
+.emotion-10 h5 {
+ font-size: 14px;
+}
+
+.emotion-10 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-10 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-10 pre pre,
+.emotion-10 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-10 pre pre code,
+.emotion-10 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-10 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-10 pre code,
+.emotion-10 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-10 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-10 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-10 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-10 a.absent {
+ color: #cc0000;
+}
+
+.emotion-10 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-10 h1,
+.emotion-10 h2,
+.emotion-10 h3,
+.emotion-10 h4,
+.emotion-10 h5,
+.emotion-10 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-10 h2:first-of-type,
+.emotion-10 h1:first-of-type,
+.emotion-10 h1:first-of-type + h2,
+.emotion-10 h3:first-of-type,
+.emotion-10 h4:first-of-type,
+.emotion-10 h5:first-of-type,
+.emotion-10 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 h1:hover a.anchor,
+.emotion-10 h2:hover a.anchor,
+.emotion-10 h3:hover a.anchor,
+.emotion-10 h4:hover a.anchor,
+.emotion-10 h5:hover a.anchor,
+.emotion-10 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-10 h1 tt,
+.emotion-10 h1 code {
+ font-size: inherit;
+}
+
+.emotion-10 h2 tt,
+.emotion-10 h2 code {
+ font-size: inherit;
+}
+
+.emotion-10 h3 tt,
+.emotion-10 h3 code {
+ font-size: inherit;
+}
+
+.emotion-10 h4 tt,
+.emotion-10 h4 code {
+ font-size: inherit;
+}
+
+.emotion-10 h5 tt,
+.emotion-10 h5 code {
+ font-size: inherit;
+}
+
+.emotion-10 h6 tt,
+.emotion-10 h6 code {
+ font-size: inherit;
+}
+
+.emotion-10 p,
+.emotion-10 blockquote,
+.emotion-10 ul,
+.emotion-10 ol,
+.emotion-10 dl,
+.emotion-10 li,
+.emotion-10 table,
+.emotion-10 pre {
+ margin: 15px 0;
+}
+
+.emotion-10 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-10 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h3:first-of-type,
+.emotion-10 body > h4:first-of-type,
+.emotion-10 body > h5:first-of-type,
+.emotion-10 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 a:first-of-type h1,
+.emotion-10 a:first-of-type h2,
+.emotion-10 a:first-of-type h3,
+.emotion-10 a:first-of-type h4,
+.emotion-10 a:first-of-type h5,
+.emotion-10 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 h1 p,
+.emotion-10 h2 p,
+.emotion-10 h3 p,
+.emotion-10 h4 p,
+.emotion-10 h5 p,
+.emotion-10 h6 p {
+ margin-top: 0;
+}
+
+.emotion-10 li p.first {
+ display: inline-block;
+}
+
+.emotion-10 ul,
+.emotion-10 ol {
+ padding-left: 30px;
+}
+
+.emotion-10 ul :first-of-type,
+.emotion-10 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 ul :last-child,
+.emotion-10 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 dl {
+ padding: 0;
+}
+
+.emotion-10 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-10 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-10 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-10 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-10 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-10 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-10 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-10 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-10 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-10 table tr th :first-of-type,
+.emotion-10 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 table tr th :last-child,
+.emotion-10 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 img {
+ max-width: 100%;
+}
+
+.emotion-10 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-10 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-10 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-10 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-10 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-10 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-10 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-10 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-10 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-10 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-10 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-10 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-10 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-10 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-10 code,
+.emotion-10 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-9 {
+ margin: 25px 0 40px;
+}
+
+.emotion-8 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-7 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-11 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-10 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-10 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-10 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-10 h3 {
+ font-size: 20px;
+}
+
+.emotion-10 h4 {
+ font-size: 16px;
+}
+
+.emotion-10 h5 {
+ font-size: 14px;
+}
+
+.emotion-10 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-10 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-10 pre pre,
+.emotion-10 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-10 pre pre code,
+.emotion-10 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-10 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-10 pre code,
+.emotion-10 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-10 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-10 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-10 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-10 a.absent {
+ color: #cc0000;
+}
+
+.emotion-10 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-10 h1,
+.emotion-10 h2,
+.emotion-10 h3,
+.emotion-10 h4,
+.emotion-10 h5,
+.emotion-10 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-10 h2:first-of-type,
+.emotion-10 h1:first-of-type,
+.emotion-10 h1:first-of-type + h2,
+.emotion-10 h3:first-of-type,
+.emotion-10 h4:first-of-type,
+.emotion-10 h5:first-of-type,
+.emotion-10 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 h1:hover a.anchor,
+.emotion-10 h2:hover a.anchor,
+.emotion-10 h3:hover a.anchor,
+.emotion-10 h4:hover a.anchor,
+.emotion-10 h5:hover a.anchor,
+.emotion-10 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-10 h1 tt,
+.emotion-10 h1 code {
+ font-size: inherit;
+}
+
+.emotion-10 h2 tt,
+.emotion-10 h2 code {
+ font-size: inherit;
+}
+
+.emotion-10 h3 tt,
+.emotion-10 h3 code {
+ font-size: inherit;
+}
+
+.emotion-10 h4 tt,
+.emotion-10 h4 code {
+ font-size: inherit;
+}
+
+.emotion-10 h5 tt,
+.emotion-10 h5 code {
+ font-size: inherit;
+}
+
+.emotion-10 h6 tt,
+.emotion-10 h6 code {
+ font-size: inherit;
+}
+
+.emotion-10 p,
+.emotion-10 blockquote,
+.emotion-10 ul,
+.emotion-10 ol,
+.emotion-10 dl,
+.emotion-10 li,
+.emotion-10 table,
+.emotion-10 pre {
+ margin: 15px 0;
+}
+
+.emotion-10 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-10 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 body > h3:first-of-type,
+.emotion-10 body > h4:first-of-type,
+.emotion-10 body > h5:first-of-type,
+.emotion-10 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 a:first-of-type h1,
+.emotion-10 a:first-of-type h2,
+.emotion-10 a:first-of-type h3,
+.emotion-10 a:first-of-type h4,
+.emotion-10 a:first-of-type h5,
+.emotion-10 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-10 h1 p,
+.emotion-10 h2 p,
+.emotion-10 h3 p,
+.emotion-10 h4 p,
+.emotion-10 h5 p,
+.emotion-10 h6 p {
+ margin-top: 0;
+}
+
+.emotion-10 li p.first {
+ display: inline-block;
+}
+
+.emotion-10 ul,
+.emotion-10 ol {
+ padding-left: 30px;
+}
+
+.emotion-10 ul :first-of-type,
+.emotion-10 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 ul :last-child,
+.emotion-10 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 dl {
+ padding: 0;
+}
+
+.emotion-10 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-10 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-10 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-10 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-10 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-10 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-10 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-10 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-10 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-10 table tr th :first-of-type,
+.emotion-10 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-10 table tr th :last-child,
+.emotion-10 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-10 img {
+ max-width: 100%;
+}
+
+.emotion-10 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-10 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-10 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-10 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-10 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-10 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-10 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-10 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-10 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-10 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-10 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-10 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-10 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-10 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-10 code,
+.emotion-10 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-9 {
+ margin: 25px 0 40px;
+}
+
+.emotion-8 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-7 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+
+
+
+
+
+
+
+ Button 1
+
+
+
+
+ Button 2
+
+
+
+
+ Button 3
+
+
+
+
+ Button 4
+
+
+
+
+ Button 5
+
+
+
+
+ Button 6
+
+
+
+
+ Button 7
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Preview single 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3 {
+ margin: 25px 0 40px;
+}
+
+.emotion-2 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3 {
+ margin: 25px 0 40px;
+}
+
+.emotion-2 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ padding: 30px 20px;
+ position: relative;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin-top: -20px;
+}
+
+.emotion-1 > * {
+ -webkit-flex: 1 1 0%;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ margin-right: 20px;
+ margin-top: 20px;
+}
+
+
+`;
+
+exports[`Storyshots Docs|PropRow arrayOf 1`] = `
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someOArray
+
+
+
+
+ array of a certain type
+
+
+
+ [ number ]
+
+
+
+
+
+ {"value":"[1, 2, 3]","computed":false}
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow complex 1`] = `
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someComplex
+
+
+
+
+ A very complex \`objectOf\` propType.
+
+
+
+ objectOf({ id: number, func: func, arr: [ { index: number } ] })
+
+
+
+
+
+ {"value":"{\\n thing: {\\n id: 2,\\n func: () => {},\\n arr: [],\\n },\\n}","computed":false}
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow longDesc 1`] = `
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ really long description that takes up a lot of space. sometimes this happens.
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow longName 1`] = `
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ reallyLongStringThatTakesUpSpace
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow number 1`] = `
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow objectOf 1`] = `
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-4 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-3 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-3 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-3 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 h3 {
+ font-size: 20px;
+}
+
+.emotion-3 h4 {
+ font-size: 16px;
+}
+
+.emotion-3 h5 {
+ font-size: 14px;
+}
+
+.emotion-3 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-3 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-3 pre pre,
+.emotion-3 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-3 pre pre code,
+.emotion-3 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-3 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-3 pre code,
+.emotion-3 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-3 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-3 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-3 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 a.absent {
+ color: #cc0000;
+}
+
+.emotion-3 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-3 h1,
+.emotion-3 h2,
+.emotion-3 h3,
+.emotion-3 h4,
+.emotion-3 h5,
+.emotion-3 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-3 h2:first-of-type,
+.emotion-3 h1:first-of-type,
+.emotion-3 h1:first-of-type + h2,
+.emotion-3 h3:first-of-type,
+.emotion-3 h4:first-of-type,
+.emotion-3 h5:first-of-type,
+.emotion-3 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1:hover a.anchor,
+.emotion-3 h2:hover a.anchor,
+.emotion-3 h3:hover a.anchor,
+.emotion-3 h4:hover a.anchor,
+.emotion-3 h5:hover a.anchor,
+.emotion-3 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-3 h1 tt,
+.emotion-3 h1 code {
+ font-size: inherit;
+}
+
+.emotion-3 h2 tt,
+.emotion-3 h2 code {
+ font-size: inherit;
+}
+
+.emotion-3 h3 tt,
+.emotion-3 h3 code {
+ font-size: inherit;
+}
+
+.emotion-3 h4 tt,
+.emotion-3 h4 code {
+ font-size: inherit;
+}
+
+.emotion-3 h5 tt,
+.emotion-3 h5 code {
+ font-size: inherit;
+}
+
+.emotion-3 h6 tt,
+.emotion-3 h6 code {
+ font-size: inherit;
+}
+
+.emotion-3 p,
+.emotion-3 blockquote,
+.emotion-3 ul,
+.emotion-3 ol,
+.emotion-3 dl,
+.emotion-3 li,
+.emotion-3 table,
+.emotion-3 pre {
+ margin: 15px 0;
+}
+
+.emotion-3 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-3 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 body > h3:first-of-type,
+.emotion-3 body > h4:first-of-type,
+.emotion-3 body > h5:first-of-type,
+.emotion-3 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 a:first-of-type h1,
+.emotion-3 a:first-of-type h2,
+.emotion-3 a:first-of-type h3,
+.emotion-3 a:first-of-type h4,
+.emotion-3 a:first-of-type h5,
+.emotion-3 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-3 h1 p,
+.emotion-3 h2 p,
+.emotion-3 h3 p,
+.emotion-3 h4 p,
+.emotion-3 h5 p,
+.emotion-3 h6 p {
+ margin-top: 0;
+}
+
+.emotion-3 li p.first {
+ display: inline-block;
+}
+
+.emotion-3 ul,
+.emotion-3 ol {
+ padding-left: 30px;
+}
+
+.emotion-3 ul :first-of-type,
+.emotion-3 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 ul :last-child,
+.emotion-3 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl {
+ padding: 0;
+}
+
+.emotion-3 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-3 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-3 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-3 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-3 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-3 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-3 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-3 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-3 table tr th :first-of-type,
+.emotion-3 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-3 table tr th :last-child,
+.emotion-3 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-3 img {
+ max-width: 100%;
+}
+
+.emotion-3 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-3 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-3 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-3 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-3 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-3 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-3 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-3 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-3 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-3 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-3 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-3 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-3 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-3 code,
+.emotion-3 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-2.emotion-2 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-2.emotion-2 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-2.emotion-2 td,
+.emotion-2.emotion-2 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-2.emotion-2 th:first-of-type,
+.emotion-2.emotion-2 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-2.emotion-2 th:last-of-type,
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-2.emotion-2 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-2.emotion-2 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-2.emotion-2 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-2.emotion-2 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-2.emotion-2 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-2.emotion-2 tbody tr {
+ background: transparent;
+}
+
+.emotion-2.emotion-2 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-2.emotion-2 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someObject
+
+
+
+
+ A simple \`objectOf\` propType.
+
+
+
+ objectOf(number)
+
+
+
+
+
+ {"value":"{ key: 1 }","computed":false}
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropRow string 1`] = `
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-5 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-4 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-4 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-4 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4 h3 {
+ font-size: 20px;
+}
+
+.emotion-4 h4 {
+ font-size: 16px;
+}
+
+.emotion-4 h5 {
+ font-size: 14px;
+}
+
+.emotion-4 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-4 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-4 pre pre,
+.emotion-4 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-4 pre pre code,
+.emotion-4 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-4 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-4 pre code,
+.emotion-4 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-4 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-4 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-4 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 a.absent {
+ color: #cc0000;
+}
+
+.emotion-4 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-4 h1,
+.emotion-4 h2,
+.emotion-4 h3,
+.emotion-4 h4,
+.emotion-4 h5,
+.emotion-4 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-4 h2:first-of-type,
+.emotion-4 h1:first-of-type,
+.emotion-4 h1:first-of-type + h2,
+.emotion-4 h3:first-of-type,
+.emotion-4 h4:first-of-type,
+.emotion-4 h5:first-of-type,
+.emotion-4 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1:hover a.anchor,
+.emotion-4 h2:hover a.anchor,
+.emotion-4 h3:hover a.anchor,
+.emotion-4 h4:hover a.anchor,
+.emotion-4 h5:hover a.anchor,
+.emotion-4 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-4 h1 tt,
+.emotion-4 h1 code {
+ font-size: inherit;
+}
+
+.emotion-4 h2 tt,
+.emotion-4 h2 code {
+ font-size: inherit;
+}
+
+.emotion-4 h3 tt,
+.emotion-4 h3 code {
+ font-size: inherit;
+}
+
+.emotion-4 h4 tt,
+.emotion-4 h4 code {
+ font-size: inherit;
+}
+
+.emotion-4 h5 tt,
+.emotion-4 h5 code {
+ font-size: inherit;
+}
+
+.emotion-4 h6 tt,
+.emotion-4 h6 code {
+ font-size: inherit;
+}
+
+.emotion-4 p,
+.emotion-4 blockquote,
+.emotion-4 ul,
+.emotion-4 ol,
+.emotion-4 dl,
+.emotion-4 li,
+.emotion-4 table,
+.emotion-4 pre {
+ margin: 15px 0;
+}
+
+.emotion-4 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-4 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 body > h3:first-of-type,
+.emotion-4 body > h4:first-of-type,
+.emotion-4 body > h5:first-of-type,
+.emotion-4 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 a:first-of-type h1,
+.emotion-4 a:first-of-type h2,
+.emotion-4 a:first-of-type h3,
+.emotion-4 a:first-of-type h4,
+.emotion-4 a:first-of-type h5,
+.emotion-4 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-4 h1 p,
+.emotion-4 h2 p,
+.emotion-4 h3 p,
+.emotion-4 h4 p,
+.emotion-4 h5 p,
+.emotion-4 h6 p {
+ margin-top: 0;
+}
+
+.emotion-4 li p.first {
+ display: inline-block;
+}
+
+.emotion-4 ul,
+.emotion-4 ol {
+ padding-left: 30px;
+}
+
+.emotion-4 ul :first-of-type,
+.emotion-4 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 ul :last-child,
+.emotion-4 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl {
+ padding: 0;
+}
+
+.emotion-4 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-4 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-4 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-4 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-4 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-4 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-4 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-4 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-4 table tr th :first-of-type,
+.emotion-4 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-4 table tr th :last-child,
+.emotion-4 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-4 img {
+ max-width: 100%;
+}
+
+.emotion-4 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-4 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-4 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-4 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-4 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-4 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-4 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-4 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-4 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-4 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-4 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-4 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-4 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-4 code,
+.emotion-4 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-3.emotion-3 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-3.emotion-3 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-3.emotion-3 td,
+.emotion-3.emotion-3 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-3.emotion-3 th:first-of-type,
+.emotion-3.emotion-3 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-3.emotion-3 th:last-of-type,
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-3.emotion-3 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-3.emotion-3 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-3.emotion-3 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-3.emotion-3 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-3.emotion-3 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-3.emotion-3 tbody tr {
+ background: transparent;
+}
+
+.emotion-3.emotion-3 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3.emotion-3 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|PropTable empty 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ No props found for this component
+
+
+
+`;
+
+exports[`Storyshots Docs|PropTable error 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ No component found
+
+
+
+`;
+
+exports[`Storyshots Docs|PropTable normal 1`] = `
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5.emotion-5 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-5.emotion-5 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-5.emotion-5 td,
+.emotion-5.emotion-5 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-5.emotion-5 th:first-of-type,
+.emotion-5.emotion-5 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-5.emotion-5 th:last-of-type,
+.emotion-5.emotion-5 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-5.emotion-5 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-5.emotion-5 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-5.emotion-5 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-5.emotion-5 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-5.emotion-5 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-5.emotion-5 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-5.emotion-5 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-5.emotion-5 tbody tr {
+ background: transparent;
+}
+
+.emotion-5.emotion-5 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5.emotion-5 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5.emotion-5 {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ width: 100%;
+ margin-top: 25px;
+ margin-bottom: 40px;
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.emotion-5.emotion-5 tr {
+ border: none;
+ background: none;
+}
+
+.emotion-5.emotion-5 td,
+.emotion-5.emotion-5 th {
+ padding: 0;
+ border: none;
+}
+
+.emotion-5.emotion-5 th:first-of-type,
+.emotion-5.emotion-5 td:first-of-type {
+ padding-left: 20px;
+}
+
+.emotion-5.emotion-5 th:last-of-type,
+.emotion-5.emotion-5 td:last-of-type {
+ padding-right: 20px;
+ width: 20%;
+}
+
+.emotion-5.emotion-5 th {
+ color: rgba(51,51,51,0.6);
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.emotion-5.emotion-5 th:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-5.emotion-5 td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
+
+.emotion-5.emotion-5 td:not(:first-of-type) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.emotion-5.emotion-5 td:last-of-type {
+ padding-right: 20px;
+}
+
+.emotion-5.emotion-5 tr:first-child td:first-child {
+ border-top-left-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:first-child td:last-child {
+ border-top-right-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:last-child td:first-child {
+ border-bottom-left-radius: 4px;
+}
+
+.emotion-5.emotion-5 tr:last-child td:last-child {
+ border-bottom-right-radius: 4px;
+}
+
+.emotion-5.emotion-5 tbody {
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 1px, rgba(0,0,0,0.065) 0 0 0 1px;
+ border-radius: 4px;
+}
+
+.emotion-5.emotion-5 tbody tr {
+ background: transparent;
+}
+
+.emotion-5.emotion-5 tbody tr:not(:first-child) {
+ border-top: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5.emotion-5 tbody td {
+ background: #FFFFFF;
+}
+
+.emotion-0 {
+ font-weight: bold;
+}
+
+.emotion-1 {
+ color: #FF4400;
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+}
+
+.emotion-2 {
+ color: rgba(51,51,51,0.6);
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ font-size: 90%;
+}
+
+
+
+
+
+
+
+ Name
+
+
+ Description
+
+
+ Default
+
+
+
+
+
+
+
+ someString
+
+
+ *
+
+
+
+
+ someString description
+
+
+
+ string
+
+
+
+
+
+ "fixme"
+
+
+
+
+
+
+ someNumber
+
+
+
+
+ someNumber description
+
+
+
+ number
+
+
+
+
+
+ 0
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Source css 1`] = `
+.emotion-2 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-2 code {
+ padding-right: 10px;
+}
+
+.emotion-2 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-2 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.string {
+ color: #A31515;
+}
+
+.emotion-2 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-2 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-2 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.function {
+ color: #393A34;
+}
+
+.emotion-2 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-2 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-2 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-2 * .token.tag {
+ color: #800000;
+}
+
+.emotion-2 * .token.selector {
+ color: #800000;
+}
+
+.emotion-2 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-2 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-2 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-0 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-4 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-3 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-3:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-3:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-5 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-2 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-2 code {
+ padding-right: 10px;
+}
+
+.emotion-2 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-2 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.string {
+ color: #A31515;
+}
+
+.emotion-2 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-2 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-2 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.function {
+ color: #393A34;
+}
+
+.emotion-2 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-2 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-2 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-2 * .token.tag {
+ color: #800000;
+}
+
+.emotion-2 * .token.selector {
+ color: #800000;
+}
+
+.emotion-2 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-2 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-2 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-0 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-4 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-3 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-3:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-3:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-5 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @-webkit-keyframes
+
+ blinker
+
+
+
+ {
+
+
+
+
+ from
+
+
+
+ {
+
+
+
+ opacity
+
+
+ :
+
+ 1.0
+
+ ;
+
+
+
+ }
+
+
+
+
+ to
+
+
+
+ {
+
+
+
+ opacity
+
+
+ :
+
+ 0.0
+
+ ;
+
+
+
+ }
+
+
+
+
+ }
+
+
+
+
+
+ .waitingForConnection
+
+
+
+ {
+
+
+
+
+ -webkit-animation-name
+
+
+ :
+
+ blinker
+
+ ;
+
+
+
+
+ -webkit-animation-iteration-count
+
+
+ :
+
+ infinite
+
+ ;
+
+
+
+
+ -webkit-animation-timing-function
+
+
+ :
+
+
+
+ cubic-bezier
+
+
+ (
+
+ .5
+
+ ,
+
+ 0
+
+ ,
+
+ 1
+
+ ,
+
+ 1
+
+ )
+
+
+ ;
+
+
+
+
+ -webkit-animation-duration
+
+
+ :
+
+ 1.7s
+
+ ;
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Source jsx 1`] = `
+.emotion-2 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-2 code {
+ padding-right: 10px;
+}
+
+.emotion-2 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-2 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.string {
+ color: #A31515;
+}
+
+.emotion-2 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-2 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-2 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.function {
+ color: #393A34;
+}
+
+.emotion-2 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-2 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-2 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-2 * .token.tag {
+ color: #800000;
+}
+
+.emotion-2 * .token.selector {
+ color: #800000;
+}
+
+.emotion-2 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-2 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-2 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-0 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-4 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-3 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-3:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-3:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-5 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+.emotion-2 {
+ overflow-y: auto;
+ height: 100%;
+ overflow-x: auto;
+ width: 100%;
+ position: relative;
+}
+
+.emotion-2 code {
+ padding-right: 10px;
+}
+
+.emotion-2 * .token {
+ font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
+ -webkit-font-smoothing: antialiased;
+}
+
+.emotion-2 * .token.comment {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.prolog {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.doctype {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.cdata {
+ color: #008000;
+ font-style: italic;
+}
+
+.emotion-2 * .token.string {
+ color: #A31515;
+}
+
+.emotion-2 * .token.punctuation {
+ color: #393A34;
+}
+
+.emotion-2 * .token.operator {
+ color: #393A34;
+}
+
+.emotion-2 * .token.url {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.symbol {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.number {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.boolean {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.variable {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.constant {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.inserted {
+ color: #36acaa;
+}
+
+.emotion-2 * .token.atrule {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.keyword {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.attr-value {
+ color: #0000ff;
+}
+
+.emotion-2 * .token.function {
+ color: #393A34;
+}
+
+.emotion-2 * .token.deleted {
+ color: #9a050f;
+}
+
+.emotion-2 * .token.important {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.bold {
+ font-weight: bold;
+}
+
+.emotion-2 * .token.italic {
+ font-style: italic;
+}
+
+.emotion-2 * .token.class-name {
+ color: #2B91AF;
+}
+
+.emotion-2 * .token.tag {
+ color: #800000;
+}
+
+.emotion-2 * .token.selector {
+ color: #800000;
+}
+
+.emotion-2 * .token.attr-name {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.property {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.regex {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.entity {
+ color: #ff0000;
+}
+
+.emotion-2 * .token.directive.tag .tag {
+ background: #ffff00;
+ color: #393A34;
+}
+
+.emotion-2 * .language-json .token.boolean {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.number {
+ color: #0000ff;
+}
+
+.emotion-2 * .language-json .token.property {
+ color: #2B91AF;
+}
+
+.emotion-2 * .namespace {
+ opacity: 0.7;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ margin: 0;
+ padding: 10px;
+}
+
+.emotion-0 {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+ opacity: 1;
+}
+
+.emotion-4 {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #FFFFFF;
+ z-index: 1;
+}
+
+.emotion-3 {
+ border: 0 none;
+ padding: 4px 10px;
+ cursor: pointer;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #333333;
+ background: #FFFFFF;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 700;
+ border-top: 1px solid rgba(0,0,0,.1);
+ border-left: 1px solid rgba(0,0,0,.1);
+ margin-left: -1px;
+ border-radius: 4px 0 0 0;
+}
+
+.emotion-3:not(:last-child) {
+ border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3 + * {
+ border-left: 1px solid rgba(0,0,0,.1);
+ border-radius: 0;
+}
+
+.emotion-3:focus {
+ box-shadow: #1EA7FD 0 -3px 0 0 inset;
+ outline: 0 none;
+}
+
+.emotion-7 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-6 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-6 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-6 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6 h3 {
+ font-size: 20px;
+}
+
+.emotion-6 h4 {
+ font-size: 16px;
+}
+
+.emotion-6 h5 {
+ font-size: 14px;
+}
+
+.emotion-6 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-6 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-6 pre pre,
+.emotion-6 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-6 pre pre code,
+.emotion-6 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-6 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-6 pre code,
+.emotion-6 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-6 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-6 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-6 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 a.absent {
+ color: #cc0000;
+}
+
+.emotion-6 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-6 h1,
+.emotion-6 h2,
+.emotion-6 h3,
+.emotion-6 h4,
+.emotion-6 h5,
+.emotion-6 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-6 h2:first-of-type,
+.emotion-6 h1:first-of-type,
+.emotion-6 h1:first-of-type + h2,
+.emotion-6 h3:first-of-type,
+.emotion-6 h4:first-of-type,
+.emotion-6 h5:first-of-type,
+.emotion-6 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1:hover a.anchor,
+.emotion-6 h2:hover a.anchor,
+.emotion-6 h3:hover a.anchor,
+.emotion-6 h4:hover a.anchor,
+.emotion-6 h5:hover a.anchor,
+.emotion-6 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-6 h1 tt,
+.emotion-6 h1 code {
+ font-size: inherit;
+}
+
+.emotion-6 h2 tt,
+.emotion-6 h2 code {
+ font-size: inherit;
+}
+
+.emotion-6 h3 tt,
+.emotion-6 h3 code {
+ font-size: inherit;
+}
+
+.emotion-6 h4 tt,
+.emotion-6 h4 code {
+ font-size: inherit;
+}
+
+.emotion-6 h5 tt,
+.emotion-6 h5 code {
+ font-size: inherit;
+}
+
+.emotion-6 h6 tt,
+.emotion-6 h6 code {
+ font-size: inherit;
+}
+
+.emotion-6 p,
+.emotion-6 blockquote,
+.emotion-6 ul,
+.emotion-6 ol,
+.emotion-6 dl,
+.emotion-6 li,
+.emotion-6 table,
+.emotion-6 pre {
+ margin: 15px 0;
+}
+
+.emotion-6 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-6 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 body > h3:first-of-type,
+.emotion-6 body > h4:first-of-type,
+.emotion-6 body > h5:first-of-type,
+.emotion-6 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 a:first-of-type h1,
+.emotion-6 a:first-of-type h2,
+.emotion-6 a:first-of-type h3,
+.emotion-6 a:first-of-type h4,
+.emotion-6 a:first-of-type h5,
+.emotion-6 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-6 h1 p,
+.emotion-6 h2 p,
+.emotion-6 h3 p,
+.emotion-6 h4 p,
+.emotion-6 h5 p,
+.emotion-6 h6 p {
+ margin-top: 0;
+}
+
+.emotion-6 li p.first {
+ display: inline-block;
+}
+
+.emotion-6 ul,
+.emotion-6 ol {
+ padding-left: 30px;
+}
+
+.emotion-6 ul :first-of-type,
+.emotion-6 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 ul :last-child,
+.emotion-6 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl {
+ padding: 0;
+}
+
+.emotion-6 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-6 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-6 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-6 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-6 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-6 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-6 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-6 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-6 table tr th :first-of-type,
+.emotion-6 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-6 table tr th :last-child,
+.emotion-6 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-6 img {
+ max-width: 100%;
+}
+
+.emotion-6 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-6 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-6 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-6 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-6 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-6 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-6 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-6 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-6 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-6 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-6 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-6 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-6 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-6 code,
+.emotion-6 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #333333;
+ border: 1px solid rgba(0,0,0,.1);
+ background: #FFFFFF;
+ margin: 25px 0 40px;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+}
+
+.emotion-5 pre.hljs {
+ padding: 20px;
+ background: inherit;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+ MyComponent
+
+
+
+
+ boolProp
+
+
+
+ scalarProp
+
+
+
+ =
+
+
+ {
+
+
+ 1
+
+
+ }
+
+
+
+
+ complexProp
+
+
+
+ =
+
+
+ {
+
+
+ {
+
+ foo
+
+ :
+
+
+
+ 1
+
+
+ ,
+
+ bar
+
+ :
+
+
+
+ '2'
+
+
+
+ }
+
+
+ }
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ <
+
+
+ SomeOtherComponent
+
+
+
+
+ funcProp
+
+
+
+ =
+
+
+ {
+
+
+ (
+
+
+ a
+
+
+ )
+
+
+
+ =>
+
+ a
+
+ .
+
+ id
+
+ }
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+ </
+
+
+ MyComponent
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Source no story 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ There’s no story here.
+
+
+
+`;
+
+exports[`Storyshots Docs|Source source unavailable 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ Oh no! The source is not available.
+
+
+
+`;
+
+exports[`Storyshots Docs|Story error 1`] = `
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ background-color: rgba(0,0,0,.01);
+ border-radius: 4px;
+ border: 1px dashed rgba(0,0,0,.1);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 20px;
+ margin: 25px 0 40px;
+ color: rgba(51,51,51,0.6);
+}
+
+
+
+
+ No component or story to display
+
+
+
+`;
+
+exports[`Storyshots Docs|Story inline 1`] = `
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-0 {
+ border: 0;
+ border-radius: 3em;
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ padding: 13px 20px;
+ position: relative;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease-out;
+ transition: all 150ms ease-out;
+ -webkit-transform: translate3d(0,0,0);
+ -ms-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ vertical-align: top;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 1;
+ margin: 0;
+ background: transparent;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1;
+ background: #1EA7FD;
+ color: #FFFFFF;
+}
+
+.emotion-0 svg {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ vertical-align: top;
+ margin-right: 6px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ pointer-events: none;
+}
+
+.emotion-0 svg path {
+ fill: currentColor;
+}
+
+.emotion-0:hover {
+ background: #059dfd;
+}
+
+.emotion-0:active {
+ box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
+}
+
+.emotion-0:focus {
+ box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
+}
+
+.emotion-0:focus:hover {
+ box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
+}
+
+.emotion-2 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-1 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-1 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-1 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1 h3 {
+ font-size: 20px;
+}
+
+.emotion-1 h4 {
+ font-size: 16px;
+}
+
+.emotion-1 h5 {
+ font-size: 14px;
+}
+
+.emotion-1 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-1 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-1 pre pre,
+.emotion-1 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-1 pre pre code,
+.emotion-1 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-1 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-1 pre code,
+.emotion-1 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-1 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-1 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-1 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 a.absent {
+ color: #cc0000;
+}
+
+.emotion-1 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-1 h1,
+.emotion-1 h2,
+.emotion-1 h3,
+.emotion-1 h4,
+.emotion-1 h5,
+.emotion-1 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-1 h2:first-of-type,
+.emotion-1 h1:first-of-type,
+.emotion-1 h1:first-of-type + h2,
+.emotion-1 h3:first-of-type,
+.emotion-1 h4:first-of-type,
+.emotion-1 h5:first-of-type,
+.emotion-1 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1:hover a.anchor,
+.emotion-1 h2:hover a.anchor,
+.emotion-1 h3:hover a.anchor,
+.emotion-1 h4:hover a.anchor,
+.emotion-1 h5:hover a.anchor,
+.emotion-1 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-1 h1 tt,
+.emotion-1 h1 code {
+ font-size: inherit;
+}
+
+.emotion-1 h2 tt,
+.emotion-1 h2 code {
+ font-size: inherit;
+}
+
+.emotion-1 h3 tt,
+.emotion-1 h3 code {
+ font-size: inherit;
+}
+
+.emotion-1 h4 tt,
+.emotion-1 h4 code {
+ font-size: inherit;
+}
+
+.emotion-1 h5 tt,
+.emotion-1 h5 code {
+ font-size: inherit;
+}
+
+.emotion-1 h6 tt,
+.emotion-1 h6 code {
+ font-size: inherit;
+}
+
+.emotion-1 p,
+.emotion-1 blockquote,
+.emotion-1 ul,
+.emotion-1 ol,
+.emotion-1 dl,
+.emotion-1 li,
+.emotion-1 table,
+.emotion-1 pre {
+ margin: 15px 0;
+}
+
+.emotion-1 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-1 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 body > h3:first-of-type,
+.emotion-1 body > h4:first-of-type,
+.emotion-1 body > h5:first-of-type,
+.emotion-1 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 a:first-of-type h1,
+.emotion-1 a:first-of-type h2,
+.emotion-1 a:first-of-type h3,
+.emotion-1 a:first-of-type h4,
+.emotion-1 a:first-of-type h5,
+.emotion-1 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-1 h1 p,
+.emotion-1 h2 p,
+.emotion-1 h3 p,
+.emotion-1 h4 p,
+.emotion-1 h5 p,
+.emotion-1 h6 p {
+ margin-top: 0;
+}
+
+.emotion-1 li p.first {
+ display: inline-block;
+}
+
+.emotion-1 ul,
+.emotion-1 ol {
+ padding-left: 30px;
+}
+
+.emotion-1 ul :first-of-type,
+.emotion-1 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 ul :last-child,
+.emotion-1 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl {
+ padding: 0;
+}
+
+.emotion-1 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-1 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-1 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-1 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-1 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-1 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-1 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-1 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-1 table tr th :first-of-type,
+.emotion-1 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-1 table tr th :last-child,
+.emotion-1 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-1 img {
+ max-width: 100%;
+}
+
+.emotion-1 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-1 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-1 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-1 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-1 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-1 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-1 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-1 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-1 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-1 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-1 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-1 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-1 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-1 code,
+.emotion-1 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+
+`;
+
+exports[`Storyshots Docs|Typeset withFontSizes 1`] = `
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+
+
+
+
+ 48px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 40px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 32px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 24px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 20px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 16px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 14px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 12px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Typeset withFontWeight 1`] = `
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+
+
+
+
+ 12px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 14px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 16px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 20px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 24px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 32px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 40px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+ 48px
+
+
+ Was he a beast if music could move him so?
+
+
+
+
+
+`;
+
+exports[`Storyshots Docs|Typeset withWeightText 1`] = `
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-26 {
+ background: #FFFFFF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 4rem 20px;
+}
+
+.emotion-25 {
+ font-size: 14px;
+ line-height: 1.6;
+ max-width: 800px;
+ width: 100%;
+}
+
+.emotion-25 h1 {
+ font-size: 32px;
+ font-weight: 900;
+}
+
+.emotion-25 h2 {
+ font-size: 24px;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-25 h3 {
+ font-size: 20px;
+}
+
+.emotion-25 h4 {
+ font-size: 16px;
+}
+
+.emotion-25 h5 {
+ font-size: 14px;
+}
+
+.emotion-25 h6 {
+ font-size: 14px;
+ color: #666666;
+}
+
+.emotion-25 pre:not(.hljs) {
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.emotion-25 pre pre,
+.emotion-25 pre.hljs {
+ padding: 15px;
+ margin: 0;
+ white-space: pre-wrap;
+ color: inherit;
+ font-size: 13px;
+ line-height: 19px;
+}
+
+.emotion-25 pre pre code,
+.emotion-25 pre.hljs code {
+ color: inherit;
+ font-size: inherit;
+}
+
+.emotion-25 pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+}
+
+.emotion-25 pre code,
+.emotion-25 pre tt {
+ background-color: transparent;
+ border: none;
+}
+
+.emotion-25 body > *:first-of-type {
+ margin-top: 0 !important;
+}
+
+.emotion-25 body > *:last-child {
+ margin-bottom: 0 !important;
+}
+
+.emotion-25 a {
+ color: #1EA7FD;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 a.absent {
+ color: #cc0000;
+}
+
+.emotion-25 a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+}
+
+.emotion-25 h1,
+.emotion-25 h2,
+.emotion-25 h3,
+.emotion-25 h4,
+.emotion-25 h5,
+.emotion-25 h6 {
+ margin: 20px 0 10px;
+ padding: 0;
+ cursor: text;
+ position: relative;
+}
+
+.emotion-25 h2:first-of-type,
+.emotion-25 h1:first-of-type,
+.emotion-25 h1:first-of-type + h2,
+.emotion-25 h3:first-of-type,
+.emotion-25 h4:first-of-type,
+.emotion-25 h5:first-of-type,
+.emotion-25 h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1:hover a.anchor,
+.emotion-25 h2:hover a.anchor,
+.emotion-25 h3:hover a.anchor,
+.emotion-25 h4:hover a.anchor,
+.emotion-25 h5:hover a.anchor,
+.emotion-25 h6:hover a.anchor {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.emotion-25 h1 tt,
+.emotion-25 h1 code {
+ font-size: inherit;
+}
+
+.emotion-25 h2 tt,
+.emotion-25 h2 code {
+ font-size: inherit;
+}
+
+.emotion-25 h3 tt,
+.emotion-25 h3 code {
+ font-size: inherit;
+}
+
+.emotion-25 h4 tt,
+.emotion-25 h4 code {
+ font-size: inherit;
+}
+
+.emotion-25 h5 tt,
+.emotion-25 h5 code {
+ font-size: inherit;
+}
+
+.emotion-25 h6 tt,
+.emotion-25 h6 code {
+ font-size: inherit;
+}
+
+.emotion-25 p,
+.emotion-25 blockquote,
+.emotion-25 ul,
+.emotion-25 ol,
+.emotion-25 dl,
+.emotion-25 li,
+.emotion-25 table,
+.emotion-25 pre {
+ margin: 15px 0;
+}
+
+.emotion-25 hr {
+ border: 0 none;
+ color: rgba(0,0,0,.1);
+ height: 4px;
+ padding: 0;
+}
+
+.emotion-25 body > h2:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h1:first-of-type + h2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 body > h3:first-of-type,
+.emotion-25 body > h4:first-of-type,
+.emotion-25 body > h5:first-of-type,
+.emotion-25 body > h6:first-of-type {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 a:first-of-type h1,
+.emotion-25 a:first-of-type h2,
+.emotion-25 a:first-of-type h3,
+.emotion-25 a:first-of-type h4,
+.emotion-25 a:first-of-type h5,
+.emotion-25 a:first-of-type h6 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.emotion-25 h1 p,
+.emotion-25 h2 p,
+.emotion-25 h3 p,
+.emotion-25 h4 p,
+.emotion-25 h5 p,
+.emotion-25 h6 p {
+ margin-top: 0;
+}
+
+.emotion-25 li p.first {
+ display: inline-block;
+}
+
+.emotion-25 ul,
+.emotion-25 ol {
+ padding-left: 30px;
+}
+
+.emotion-25 ul :first-of-type,
+.emotion-25 ol :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 ul :last-child,
+.emotion-25 ol :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl {
+ padding: 0;
+}
+
+.emotion-25 dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px;
+}
+
+.emotion-25 dl dt:first-of-type {
+ padding: 0;
+}
+
+.emotion-25 dl dt > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dt > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px;
+}
+
+.emotion-25 dl dd > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 dl dd > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 blockquote {
+ border-left: 4px solid #DDDDDD;
+ padding: 0 15px;
+ color: #666666;
+}
+
+.emotion-25 blockquote > :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 table {
+ padding: 0;
+ border-collapse: collapse;
+}
+
+.emotion-25 table tr {
+ border-top: 1px solid rgba(0,0,0,.1);
+ background-color: white;
+ margin: 0;
+ padding: 0;
+}
+
+.emotion-25 table tr:nth-of-type(2n) {
+ background-color: #F8F8F8;
+}
+
+.emotion-25 table tr th {
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr td {
+ border: 1px solid rgba(0,0,0,.1);
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px;
+}
+
+.emotion-25 table tr th :first-of-type,
+.emotion-25 table tr td :first-of-type {
+ margin-top: 0;
+}
+
+.emotion-25 table tr th :last-child,
+.emotion-25 table tr td :last-child {
+ margin-bottom: 0;
+}
+
+.emotion-25 img {
+ max-width: 100%;
+}
+
+.emotion-25 span.frame {
+ display: block;
+ overflow: hidden;
+}
+
+.emotion-25 span.frame > span {
+ border: 1px solid #DDDDDD;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto;
+}
+
+.emotion-25 span.frame span img {
+ display: block;
+ float: left;
+}
+
+.emotion-25 span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0;
+}
+
+.emotion-25 span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center;
+}
+
+.emotion-25 span.align-center span img {
+ margin: 0 auto;
+ text-align: center;
+}
+
+.emotion-25 span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+}
+
+.emotion-25 span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right;
+}
+
+.emotion-25 span.align-right span img {
+ margin: 0;
+ text-align: right;
+}
+
+.emotion-25 span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+}
+
+.emotion-25 span.float-left span {
+ margin: 13px 0 0;
+}
+
+.emotion-25 span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+}
+
+.emotion-25 span.float-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+}
+
+.emotion-25 code,
+.emotion-25 tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #EEEEEE;
+ background-color: #F8F8F8;
+ border-radius: 3px;
+}
+
+.emotion-24 {
+ border-radius: 4px;
+ background: #FFFFFF;
+ box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
+ border: 1px solid rgba(0,0,0,.1);
+ margin: 25px 0 40px;
+ padding: 30px 20px;
+}
+
+.emotion-2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.emotion-2:not(:last-child) {
+ margin-bottom: 1rem;
+}
+
+.emotion-0 {
+ margin-right: 30px;
+ font-size: 12px;
+ color: rgba(51,51,51,0.6);
+}
+
+.emotion-1 {
+ line-height: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+
+
+
+
+ 48px
+
+
+ Heading
+
+
+
+
+ 40px
+
+
+ Heading
+
+
+
+
+ 32px
+
+
+ Heading
+
+
+
+
+ 24px
+
+
+ Heading
+
+
+
+
+ 20px
+
+
+ Heading
+
+
+
+
+ 16px
+
+
+ Heading
+
+
+
+
+ 14px
+
+
+ Heading
+
+
+
+
+ 12px
+
+
+ Heading
+
+
+
+
+
+`;
+
exports[`Storyshots UI|Notifications/Item longText 1`] = `
.emotion-0 {
display: block;
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
index 5e6799e34e1e..946591470588 100644
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -795,14 +795,6 @@ exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
opacity: 1;
}
-.emotion-5 {
- position: relative;
- overflow: hidden;
- color: #FFFFFF;
- border: 1px solid rgba(255,255,255,.1);
- background: #333333;
-}
-
.emotion-2 {
overflow-y: auto;
height: 100%;
@@ -1011,6 +1003,14 @@ exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
outline: 0 none;
}
+.emotion-5 {
+ position: relative;
+ overflow: hidden;
+ color: #FFFFFF;
+ border: 1px solid rgba(255,255,255,.1);
+ background: #333333;
+}
+
From acc030904b3080bf71ecfcd03aebc6407bb834e1 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Tue, 18 Jun 2019 10:42:16 +0000
Subject: [PATCH 130/371] Bump babel-plugin-styled-components from 1.10.0 to
1.10.1 in /docs
Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 1.10.0 to 1.10.1.
- [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases)
- [Commits](https://github.com/styled-components/babel-plugin-styled-components/compare/v1.10.0...v1.10.1)
Signed-off-by: dependabot-preview[bot]
---
docs/package.json | 2 +-
docs/yarn.lock | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index 5168568d94a4..cafec38329bd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,7 +18,7 @@
"@storybook/components": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"babel-loader": "^6.4.1",
- "babel-plugin-styled-components": "^1.10.0",
+ "babel-plugin-styled-components": "^1.10.1",
"bootstrap": "^4.3.1",
"common-tags": "^1.8.0",
"gatsby": "^1.9.279",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 6af46929b909..fa5fc6f8cc35 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1009,15 +1009,15 @@ babel-plugin-macros@^2.0.0:
cosmiconfig "^5.2.0"
resolve "^1.10.0"
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.0:
- version "1.10.0"
- resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
- integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.1:
+ version "1.10.1"
+ resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.1.tgz#cc89ac5a13476ce675e13fbe53a826f9bb0ca4cd"
+ integrity sha512-F6R2TnPGNN6iuXCs0xQ+EsrunwNoWI55J5I8Pkd/+fzzbv1I4gFgTaZepMOVpLobYWU2XaLIm+73L0zD3CnOdQ==
dependencies:
"@babel/helper-annotate-as-pure" "^7.0.0"
"@babel/helper-module-imports" "^7.0.0"
babel-plugin-syntax-jsx "^6.18.0"
- lodash "^4.17.10"
+ lodash "^4.17.11"
babel-plugin-syntax-async-functions@^6.8.0:
version "6.13.0"
From 2723991f4fd05a3d36299c48f910b15536bfca66 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
Date: Tue, 18 Jun 2019 10:42:55 +0000
Subject: [PATCH 131/371] Bump polished from 3.4.0 to 3.4.1 in /docs
Bumps [polished](https://github.com/styled-components/polished) from 3.4.0 to 3.4.1.
- [Release notes](https://github.com/styled-components/polished/releases)
- [Commits](https://github.com/styled-components/polished/compare/v3.4.0...v3.4.1)
Signed-off-by: dependabot-preview[bot]
---
docs/package.json | 2 +-
docs/yarn.lock | 19 ++++++-------------
2 files changed, 7 insertions(+), 14 deletions(-)
diff --git a/docs/package.json b/docs/package.json
index 5168568d94a4..ab219e80a732 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -37,7 +37,7 @@
"is-builtin-module": "^3.0.0",
"lodash": "^4.17.11",
"marked": "^0.6.2",
- "polished": "^3.4.0",
+ "polished": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-document-title": "^2.0.3",
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 6af46929b909..42e2e55ca576 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -23,20 +23,13 @@
dependencies:
regenerator-runtime "^0.12.0"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
dependencies:
regenerator-runtime "^0.13.2"
-"@babel/runtime@^7.4.2":
- version "7.4.4"
- resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
- integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
- dependencies:
- regenerator-runtime "^0.13.2"
-
"@babel/types@^7.0.0":
version "7.3.4"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
@@ -8805,12 +8798,12 @@ pngquant-bin@^3.0.0:
bin-wrapper "^3.0.0"
logalot "^2.0.0"
-polished@^3.3.1, polished@^3.4.0:
- version "3.4.0"
- resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.0.tgz#29b2a028ee0408df5dded55a2a25e913bc6749a9"
- integrity sha512-GiuavmunMIKMOEoSPkXoqBYM2ZcI4YIwCaiwmTOQ55Zq4HG2kD0YZt3WlLZ2l3U9XhJ1LM/fgjCFHHffiZP0YQ==
+polished@^3.3.1, polished@^3.4.1:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
+ integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
dependencies:
- "@babel/runtime" "^7.4.4"
+ "@babel/runtime" "^7.4.5"
popper.js@^1.14.4, popper.js@^1.14.7:
version "1.15.0"
From dc4b7f0f1e54dbc8f4f0b34919bd4ef4d4c1b29a Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 18 Jun 2019 23:16:31 +0800
Subject: [PATCH 132/371] Fix typo
---
addons/docs/package.json | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/addons/docs/package.json b/addons/docs/package.json
index a7d12cec011b..ec56c61947fd 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -25,9 +25,9 @@
"dependencies": {
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/api": "5.2.0-alpha.23",
- "@storybook/components": "5.2.0-alpha.27",
- "@storybook/router": "5.2.0-alpha.27",
- "@storybook/theming": "5.2.0-alpha.27",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/router": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
"prop-types": "^15.7.2"
From e34cc35279c04455cf79cbb19d9b06cbf5699c78 Mon Sep 17 00:00:00 2001
From: Piper
Date: Tue, 18 Jun 2019 09:31:55 -0700
Subject: [PATCH 133/371] docs: it's -> its
---
docs/src/pages/configurations/custom-webpack-config/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md
index b193a99315c3..8d56ee109d84 100644
--- a/docs/src/pages/configurations/custom-webpack-config/index.md
+++ b/docs/src/pages/configurations/custom-webpack-config/index.md
@@ -153,7 +153,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an
- Create a `.storybook/webpack.config.js` file.
-- Edit it's contents:
+- Edit its contents:
```js
module.exports = async ({ config }) => console.dir(config.plugins, { depth: null }) || config;
```
From eb24874088fcab281c73e67965cc785e5f73a08e Mon Sep 17 00:00:00 2001
From: Matthew Lehner
Date: Tue, 18 Jun 2019 11:57:42 -0700
Subject: [PATCH 134/371] Fixes a small typo
---
docs/src/pages/configurations/custom-webpack-config/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/pages/configurations/custom-webpack-config/index.md b/docs/src/pages/configurations/custom-webpack-config/index.md
index b193a99315c3..8d56ee109d84 100644
--- a/docs/src/pages/configurations/custom-webpack-config/index.md
+++ b/docs/src/pages/configurations/custom-webpack-config/index.md
@@ -153,7 +153,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an
- Create a `.storybook/webpack.config.js` file.
-- Edit it's contents:
+- Edit its contents:
```js
module.exports = async ({ config }) => console.dir(config.plugins, { depth: null }) || config;
```
From 0e2d46c2856c966d040f7e3f6eadb276db9b9651 Mon Sep 17 00:00:00 2001
From: Jen Downs
Date: Tue, 18 Jun 2019 14:13:13 -0500
Subject: [PATCH 135/371] fix(addons-info): change stylesheetBase info from
110vh to 100vh
---
addons/info/src/components/Story.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 61d61cdda461..1be74625b32c 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -38,7 +38,7 @@ const stylesheetBase = {
background: 'white',
top: 0,
left: 0,
- height: '110vh',
+ height: '100vh',
width: '100vw',
overflow: 'auto',
zIndex: 99999,
From 8caaf2fe85864441bd94263f560d810ae1c558f8 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 05:45:37 +0800
Subject: [PATCH 136/371] Update yarn.lock
---
yarn.lock | 62 -------------------------------------------------------
1 file changed, 62 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index 9fcc529d01e8..de3157fb024e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3332,68 +3332,6 @@
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
-"@storybook/client-logger@5.2.0-alpha.27":
- version "5.2.0-alpha.27"
- resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.27.tgz#030fbbf58ed0a9aff773bab2457676df87085a2c"
- integrity sha512-3ZVK/RCgj3HIvOxaE6fXZML6dsJnlANphu9IkUDD70efWrPGq05YiipznQ8FYZ9z1JsQ/VepPOp0p2p7BLlZnQ==
- dependencies:
- core-js "^3.0.1"
-
-"@storybook/components@5.2.0-alpha.27":
- version "5.2.0-alpha.27"
- resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.27.tgz#f88fcebe51b9bfb1eaabbc71f712c3c3fb51ec3d"
- integrity sha512-FbmIu2FJp8KOggzyBl9+fi7x2319DwQ9ObbZ3DyAJdJp5prQLmEqzde/wrWGD3kjPyt6WxLx5Enx2GFyBUw4TQ==
- dependencies:
- "@storybook/client-logger" "5.2.0-alpha.27"
- "@storybook/router" "5.2.0-alpha.27"
- "@storybook/theming" "5.2.0-alpha.27"
- core-js "^3.0.1"
- global "^4.3.2"
- markdown-to-jsx "^6.9.1"
- memoizerific "^1.11.3"
- polished "^3.3.1"
- popper.js "^1.14.7"
- prop-types "^15.7.2"
- react "^16.8.3"
- react-addons-create-fragment "^15.6.2"
- react-dom "^16.8.3"
- react-focus-lock "^1.18.3"
- react-helmet-async "^1.0.2"
- react-popper-tooltip "^2.8.3"
- react-syntax-highlighter "^8.0.1"
- react-textarea-autosize "^7.1.0"
- recompose "^0.30.0"
- simplebar-react "^1.0.0-alpha.6"
-
-"@storybook/router@5.2.0-alpha.27":
- version "5.2.0-alpha.27"
- resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.0-alpha.27.tgz#2a245b0d54208d7f993f6849a66f83dbbbb4d41d"
- integrity sha512-w8beZZ7CqUJCsiJ+0p48T0U9leK4MuPt1ho8fJTgXblmj0G18yFGeCSR7ZuLQtG0kwyj9/Q8KvZ7t6NwFegUyg==
- dependencies:
- "@reach/router" "^1.2.1"
- core-js "^3.0.1"
- global "^4.3.2"
- memoizerific "^1.11.3"
- qs "^6.6.0"
-
-"@storybook/theming@5.2.0-alpha.27":
- version "5.2.0-alpha.27"
- resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.27.tgz#d8dd85ca705ef6b613013b2b72f639f68b9279f4"
- integrity sha512-nBrE2I9oayi0BpDyV0amRJCa5OeI8YDYcJTAWicIzKoYOjVE2p0EdlFiKSM9QA9JKcIwjGkI+eXgJRnxszD8KA==
- dependencies:
- "@emotion/core" "^10.0.9"
- "@emotion/styled" "^10.0.7"
- "@storybook/client-logger" "5.2.0-alpha.27"
- common-tags "^1.8.0"
- core-js "^3.0.1"
- deep-object-diff "^1.1.0"
- emotion-theming "^10.0.9"
- global "^4.3.2"
- memoizerific "^1.11.3"
- polished "^3.3.1"
- prop-types "^15.7.2"
- resolve-from "^5.0.0"
-
"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
From 783e56dceeb6527a8595852b5c077953e6913727 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 10:25:34 +0800
Subject: [PATCH 137/371] MDX compiler
---
addons/docs/README.md | 85 +++
.../mdx-compiler-plugin.test.js.snap | 539 ++++++++++++++++++
addons/docs/common/index.js | 2 +
addons/docs/common/preset.js | 82 +++
addons/docs/fixtures/decorators.mdx | 13 +
addons/docs/fixtures/parameters.mdx | 12 +
addons/docs/fixtures/previews.mdx | 19 +
addons/docs/fixtures/story-current.mdx | 5 +
addons/docs/fixtures/story-def-text-only.mdx | 7 +
addons/docs/fixtures/story-definitions.mdx | 14 +
addons/docs/fixtures/story-missing-props.mdx | 10 +
addons/docs/fixtures/story-object.mdx | 19 +
addons/docs/fixtures/story-references.mdx | 5 +
addons/docs/fixtures/vanilla.mdx | 7 +
addons/docs/mdx-compiler-plugin.js | 201 +++++++
addons/docs/mdx-compiler-plugin.test.js | 71 +++
addons/docs/package.json | 6 +
addons/docs/react/index.js | 1 +
addons/docs/react/preset.js | 1 +
addons/docs/vue/index.js | 1 +
addons/docs/vue/preset.js | 1 +
yarn.lock | 319 ++++++++++-
22 files changed, 1409 insertions(+), 11 deletions(-)
create mode 100644 addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
create mode 100644 addons/docs/common/index.js
create mode 100644 addons/docs/common/preset.js
create mode 100644 addons/docs/fixtures/decorators.mdx
create mode 100644 addons/docs/fixtures/parameters.mdx
create mode 100644 addons/docs/fixtures/previews.mdx
create mode 100644 addons/docs/fixtures/story-current.mdx
create mode 100644 addons/docs/fixtures/story-def-text-only.mdx
create mode 100644 addons/docs/fixtures/story-definitions.mdx
create mode 100644 addons/docs/fixtures/story-missing-props.mdx
create mode 100644 addons/docs/fixtures/story-object.mdx
create mode 100644 addons/docs/fixtures/story-references.mdx
create mode 100644 addons/docs/fixtures/vanilla.mdx
create mode 100644 addons/docs/mdx-compiler-plugin.js
create mode 100644 addons/docs/mdx-compiler-plugin.test.js
create mode 100644 addons/docs/react/index.js
create mode 100644 addons/docs/react/preset.js
create mode 100644 addons/docs/vue/index.js
create mode 100644 addons/docs/vue/preset.js
diff --git a/addons/docs/README.md b/addons/docs/README.md
index 5946e6cc71d3..57252453dc0d 100644
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@@ -1,3 +1,88 @@
# Storybook Docs
Living documentation for your components.
+
+- [Sneak peak article](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+
+## View layer support
+
+Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific
+features as well. This chart captures the current state of support
+
+| | React | Vue | Angular | Polymer | Mithril | HTML | Marko | Svelte | Riot | Ember | Preact |
+| -------------- | :---: | :-: | :-----: | :-----: | :-----: | :--: | :---: | :----: | :--: | :---: | :----: |
+| MDX stories | + | + | + | + | + | + | + | + | + | + | + |
+| Module stories | + | + | + | + | + | + | + | + | + | + | + |
+| Legacy stories | + | + | + | + | + | + | + | + | + | + | + |
+| Source \* | + | + | + | + | + | + | + | + | + | + | + |
+| Notes / Info | + | + | + | + | + | + | + | + | + | + | + |
+| Props table | + | # | # | | | | | | | | |
+| Docgen | + | # | # | | | | | | | | |
+| Inline stories | + | # | | | | | | | | | |
+
+**Notes:**
+
+- `#` denotes planned/WIP support
+- \* Source supports legacy `JS storiesOf` and `MDX` stories. `Typescript` and new `module format` support is WIP
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs
+```
+
+The add the following line to your `.storybook/presets.js` file:
+
+```js
+module.exports = ['@storybook/addon-docs/react/preset'];
+```
+
+Finally, import your stories and MDX files in `.storybook/config.js`:
+
+```js
+import { load } from '@storybook/react';
+
+// standard configuration here
+// ...
+
+// wherever your story files are located
+load(require.context('../src', true, /\.stories\.js$/), module);
+load(require.context('../src', true, /\.stories\.mdx$/), module);
+```
+
+## Manual configuration
+
+Docs uses Storybook presets as a configuration shortcut. To configure "the long way", first register the addon in `.storybook/addons.js`:
+
+```js
+import '@storybook/addon-docs/register';
+```
+
+Then configure Storybook's webpack loader to understand MDX files in `.storybook/webpack.config.js`:
+
+```js
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
+
+module.exports = async ({ config }) => {
+ config.module.rules.push({
+ test: /\.mdx$/,
+ use: [
+ {
+ loader: 'babel-loader',
+ // may or may not need this line depending on your app's setup
+ plugins: ['@babel/plugin-transform-react-jsx'],
+ },
+ {
+ loader: '@mdx-js/loader',
+ options: {
+ compilers: [createCompiler({})],
+ },
+ },
+ ],
+ });
+ return config;
+};
+```
diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
new file mode 100644
index 000000000000..dd2d97579edb
--- /dev/null
+++ b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
@@ -0,0 +1,539 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin supports "smart" current story 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+ {\`Current story\`}
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = {};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports decorators 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+ (
+
+ {storyFn()}
+
+ ),
+ ]}
+ mdxType=\\"Meta\\"
+ />
+ {\`Decorated story\`}
+
+ One
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const one = () => One ;
+one.parameters = { mdxSource: \`One \` };
+
+const componentMeta = {
+ title: 'Button',
+ decorators: [
+ storyFn => (
+
+ {storyFn()}
+
+ ),
+ ],
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports object-style story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Welcome, Button } from '@storybook/angular/demo';
+import { linkTo } from '@storybook/addon-links';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+
+ {\`Story object\`}
+
+ {{
+ template: \` \`,
+ props: {
+ showApp: linkTo('Button'),
+ },
+ moduleMetadata: {
+ declarations: [Welcome],
+ },
+ }}
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const toStorybook = () => ({
+ template: \` \`,
+ props: {
+ showApp: linkTo('Button'),
+ },
+ moduleMetadata: {
+ declarations: [Welcome],
+ },
+});
+toStorybook.title = 'to storybook';
+toStorybook.parameters = {
+ mdxSource: \`{
+ template: \\\\\` \\\\\`,
+ props: {
+ showApp: linkTo('Button')
+ },
+ moduleMetadata: {
+ declarations: [Welcome]
+ }
+}\`,
+};
+
+const componentMeta = { title: 'MDX|Welcome' };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports parameters 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+
+
+ Component notes
+
+
+ Story notes
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const componentNotes = () => Component notes ;
+componentNotes.title = 'component notes';
+componentNotes.parameters = { mdxSource: \`Component notes \` };
+
+export const storyNotes = () => Story notes ;
+storyNotes.title = 'story notes';
+storyNotes.parameters = {
+ mdxSource: \`Story notes \`,
+ ...{
+ notes: 'story notes',
+ },
+};
+
+const componentMeta = {
+ title: 'Button',
+ parameters: {
+ component: Button,
+ notes: 'component notes',
+ },
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports previews 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+
+ {\`Preview\`}
+ {\`Previews can contain normal components, stories, and story references\`}
+
+ Just a button
+
+ Hello button
+
+
+ Two
+
+
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const helloButton = () => Hello button ;
+helloButton.title = 'hello button';
+helloButton.parameters = { mdxSource: \`Hello button \` };
+
+export const two = () => Two ;
+two.parameters = { mdxSource: \`Two \` };
+
+const componentMeta = {
+ title: 'Button',
+ parameters: {
+ component: Button,
+ notes: 'component notes',
+ },
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+
+ {\`Story definition\`}
+
+ One
+
+
+ Hello button
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const one = () => One ;
+one.parameters = { mdxSource: \`One \` };
+
+export const helloStory = () => Hello button ;
+helloStory.title = 'hello story';
+helloStory.parameters = { mdxSource: \`Hello button \` };
+
+const componentMeta = { title: 'Button' };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports story references 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+ {\`Story reference\`}
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = {};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports text-only story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+
+ {\`Story definition\`}
+
+ Plain text
+
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const text = () => 'Plain text';
+text.parameters = { mdxSource: \`'Plain text'\` };
+
+const componentMeta = { title: 'Text' };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports vanilla mdx 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+
+const makeShortcode = name =>
+ function MDXDefaultShortcode(props) {
+ console.warn(
+ 'Component ' +
+ name +
+ ' was not imported, exported, or provided by MDXProvider as global scope'
+ );
+ return
;
+ };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+ return (
+
+ {\`Hello MDX\`}
+ {\`This is some random content.\`}
+ Hello button
+
+ );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = {};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
diff --git a/addons/docs/common/index.js b/addons/docs/common/index.js
new file mode 100644
index 000000000000..ab2313695b6d
--- /dev/null
+++ b/addons/docs/common/index.js
@@ -0,0 +1,2 @@
+// FIXME: move this to typescript and src/react folder
+module.exports = require('../dist/lib/getPropDefs');
diff --git a/addons/docs/common/preset.js b/addons/docs/common/preset.js
new file mode 100644
index 000000000000..da25537f1083
--- /dev/null
+++ b/addons/docs/common/preset.js
@@ -0,0 +1,82 @@
+const createCompiler = require('../mdx-compiler-plugin');
+
+function createBabelOptions({ babelOptions, configureJSX }) {
+ if (!configureJSX) {
+ return babelOptions;
+ }
+
+ return {
+ ...babelOptions,
+ // for frameworks that are not working with react, we need to configure
+ // the jsx to transpile mdx, for now there will be a flag for that
+ // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
+ plugins: [...babelOptions.plugins, '@babel/plugin-transform-react-jsx'],
+ };
+}
+
+function webpack(webpackConfig = {}, options = {}) {
+ const { module = {} } = webpackConfig;
+ // it will reuse babel options that are already in use in storybook
+ // also, these babel options are chained with other presets.
+ const { babelOptions, configureJSX } = options;
+
+ return {
+ ...webpackConfig,
+ module: {
+ ...module,
+ rules: [
+ ...(module.rules || []),
+ // {
+ // test: [/\.stories\.(jsx?$|ts?$)/],
+ // enforce: 'pre',
+ // use: [
+ // {
+ // loader: require.resolve('@storybook/addon-storysource/loader'),
+ // options: {
+ // injectParameters: true,
+ // },
+ // },
+ // ],
+ // },
+ {
+ test: /\.stories.mdx$/,
+ use: [
+ {
+ loader: 'babel-loader',
+ options: createBabelOptions({ babelOptions, configureJSX }),
+ },
+ {
+ loader: '@mdx-js/loader',
+ options: {
+ compilers: [createCompiler(options)],
+ },
+ },
+ ],
+ },
+ {
+ test: /\.mdx$/,
+ exclude: /\.stories.mdx$/,
+ use: [
+ {
+ loader: 'babel-loader',
+ options: createBabelOptions({ babelOptions, configureJSX }),
+ },
+ {
+ loader: '@mdx-js/loader',
+ },
+ ],
+ },
+ ],
+ },
+ };
+}
+
+function addons(entry = []) {
+ return [
+ ...entry,
+ // require.resolve('@storybook/addon-storysource/register'),
+ require.resolve('../register'),
+ ];
+}
+
+module.exports = { webpack, addons };
diff --git a/addons/docs/fixtures/decorators.mdx b/addons/docs/fixtures/decorators.mdx
new file mode 100644
index 000000000000..2f4e84e6ded0
--- /dev/null
+++ b/addons/docs/fixtures/decorators.mdx
@@ -0,0 +1,13 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+ {storyFn()}
]}
+/>
+
+# Decorated story
+
+
+ One
+
diff --git a/addons/docs/fixtures/parameters.mdx b/addons/docs/fixtures/parameters.mdx
new file mode 100644
index 000000000000..0805466b38cd
--- /dev/null
+++ b/addons/docs/fixtures/parameters.mdx
@@ -0,0 +1,12 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+
+
+
+ Component notes
+
+
+
+ Story notes
+
diff --git a/addons/docs/fixtures/previews.mdx b/addons/docs/fixtures/previews.mdx
new file mode 100644
index 000000000000..80601eed2ed0
--- /dev/null
+++ b/addons/docs/fixtures/previews.mdx
@@ -0,0 +1,19 @@
+import { Button } from '@storybook/react/demo';
+import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Preview
+
+Previews can contain normal components, stories, and story references
+
+
+ Just a button
+
+ Hello button
+
+
+ Two
+
+
+
diff --git a/addons/docs/fixtures/story-current.mdx b/addons/docs/fixtures/story-current.mdx
new file mode 100644
index 000000000000..d5b62cc6edab
--- /dev/null
+++ b/addons/docs/fixtures/story-current.mdx
@@ -0,0 +1,5 @@
+import { Story } from '@storybook/addon-docs/blocks';
+
+# Current story
+
+
diff --git a/addons/docs/fixtures/story-def-text-only.mdx b/addons/docs/fixtures/story-def-text-only.mdx
new file mode 100644
index 000000000000..78ebd50215ee
--- /dev/null
+++ b/addons/docs/fixtures/story-def-text-only.mdx
@@ -0,0 +1,7 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Story definition
+
+Plain text
diff --git a/addons/docs/fixtures/story-definitions.mdx b/addons/docs/fixtures/story-definitions.mdx
new file mode 100644
index 000000000000..ee5c355b9892
--- /dev/null
+++ b/addons/docs/fixtures/story-definitions.mdx
@@ -0,0 +1,14 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Story definition
+
+
+ One
+
+
+
+ Hello button
+
diff --git a/addons/docs/fixtures/story-missing-props.mdx b/addons/docs/fixtures/story-missing-props.mdx
new file mode 100644
index 000000000000..0eb3137a9756
--- /dev/null
+++ b/addons/docs/fixtures/story-missing-props.mdx
@@ -0,0 +1,10 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Bad story
+
+
+ One
+
diff --git a/addons/docs/fixtures/story-object.mdx b/addons/docs/fixtures/story-object.mdx
new file mode 100644
index 000000000000..e63d48923842
--- /dev/null
+++ b/addons/docs/fixtures/story-object.mdx
@@ -0,0 +1,19 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Welcome, Button } from '@storybook/angular/demo';
+import { linkTo } from '@storybook/addon-links';
+
+
+
+# Story object
+
+
+ {{
+ template: ` `,
+ props: {
+ showApp: linkTo('Button'),
+ },
+ moduleMetadata: {
+ declarations: [Welcome],
+ },
+ }}
+
diff --git a/addons/docs/fixtures/story-references.mdx b/addons/docs/fixtures/story-references.mdx
new file mode 100644
index 000000000000..865bd5dea49b
--- /dev/null
+++ b/addons/docs/fixtures/story-references.mdx
@@ -0,0 +1,5 @@
+import { Story } from '@storybook/addon-docs/blocks';
+
+# Story reference
+
+
diff --git a/addons/docs/fixtures/vanilla.mdx b/addons/docs/fixtures/vanilla.mdx
new file mode 100644
index 000000000000..93ccac3d6bc3
--- /dev/null
+++ b/addons/docs/fixtures/vanilla.mdx
@@ -0,0 +1,7 @@
+import { Button } from '@storybook/react/demo';
+
+# Hello MDX
+
+This is some random content.
+
+Hello button
diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js
new file mode 100644
index 000000000000..304b3f86e94a
--- /dev/null
+++ b/addons/docs/mdx-compiler-plugin.js
@@ -0,0 +1,201 @@
+const mdxToJsx = require('@mdx-js/mdx/mdx-hast-to-jsx');
+const parser = require('@babel/parser');
+const generate = require('@babel/generator').default;
+const camelCase = require('lodash/camelCase');
+
+// Generate the MDX as is, but append named exports for every
+// story in the contents
+
+const STORY_REGEX = /^]/;
+const PREVIEW_REGEX = /^]/;
+const META_REGEX = /^ ]/;
+const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
+
+function getAttr(elt, what) {
+ const attr = elt.attributes.find(n => n.name.name === what);
+ return attr && attr.value;
+}
+
+function getStoryFn(name, counter) {
+ if (name) {
+ const storyFn = camelCase(name.replace(/[^a-z0-9-]/g, '-'));
+ if (storyFn.length > 1 && !RESERVED.exec(storyFn)) {
+ return storyFn;
+ }
+ }
+ return `story${counter}`;
+}
+
+function genStoryExport(ast, counter) {
+ let storyName = getAttr(ast.openingElement, 'name');
+ let storyId = getAttr(ast.openingElement, 'id');
+ storyName = storyName && storyName.value;
+ storyId = storyId && storyId.value;
+
+ if (!storyId && !storyName) {
+ throw new Error('Expected a story name or ID attribute');
+ }
+
+ // We don't generate exports for story references or the smart "current story"
+ if (storyId || !storyName) {
+ return null;
+ }
+
+ // console.log('genStoryExport', JSON.stringify(ast, null, 2));
+
+ const statements = [];
+ const storyFn = getStoryFn(storyName, counter);
+
+ let body = ast.children.find(n => n.type !== 'JSXText');
+ let storyCode = null;
+ if (!body) {
+ // plain text node
+ const { code } = generate(ast.children[0], {});
+ storyCode = `'${code}'`;
+ } else {
+ if (body.type === 'JSXExpressionContainer') {
+ // FIXME: handle fragments
+ body = body.expression;
+ }
+ const { code } = generate(body, {});
+ storyCode = code;
+ }
+ statements.push(
+ `export const ${storyFn} = () => (
+ ${storyCode}
+ );`
+ );
+
+ if (storyName !== storyFn) {
+ statements.push(`${storyFn}.title = '${storyName}';`);
+ }
+
+ let parameters = getAttr(ast.openingElement, 'parameters');
+ parameters = parameters && parameters.expression;
+ const source = `\`${storyCode.replace(/`/g, '\\`')}\``;
+ if (parameters) {
+ const { code: params } = generate(parameters, {});
+ // FIXME: hack in the story's source as a parameter
+ statements.push(`${storyFn}.parameters = { mdxSource: ${source}, ...${params} };`);
+ } else {
+ statements.push(`${storyFn}.parameters = { mdxSource: ${source} };`);
+ }
+
+ // console.log(statements);
+
+ return [statements.join('\n')];
+}
+
+function genPreviewExports(ast, counter) {
+ // console.log('genPreviewExports', JSON.stringify(ast, null, 2));
+
+ let localCounter = counter;
+ const previewExports = [];
+ for (let i = 0; i < ast.children.length; i += 1) {
+ const child = ast.children[i];
+ if (child.type === 'JSXElement' && child.openingElement.name.name === 'Story') {
+ const storyExport = genStoryExport(child, localCounter);
+ if (storyExport) {
+ previewExports.push(storyExport);
+ localCounter += 1;
+ }
+ }
+ }
+ return previewExports;
+}
+
+function genMetaExport(ast) {
+ let title = getAttr(ast.openingElement, 'title');
+ let parameters = getAttr(ast.openingElement, 'parameters');
+ let decorators = getAttr(ast.openingElement, 'decorators');
+ title = title && `title: '${title.value}',`;
+ if (parameters && parameters.expression) {
+ const { code: params } = generate(parameters.expression, {});
+ parameters = `parameters: ${params},`;
+ }
+ if (decorators && decorators.expression) {
+ const { code: decos } = generate(decorators.expression, {});
+ decorators = `decorators: ${decos},`;
+ }
+ return `const componentMeta = { ${title || ''} ${parameters || ''} ${decorators || ''} };`;
+}
+
+function getExports(node, counter) {
+ const { value, type } = node;
+ if (type === 'jsx') {
+ if (STORY_REGEX.exec(value)) {
+ // Single story
+ const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+ const storyExport = genStoryExport(ast, counter);
+ return storyExport && { stories: [storyExport] };
+ }
+ if (PREVIEW_REGEX.exec(value)) {
+ // Preview, possibly containing multiple stories
+ const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+ return { stories: genPreviewExports(ast, counter) };
+ }
+ if (META_REGEX.exec(value)) {
+ // Preview, possibly containing multiple stories
+ const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+ return { meta: genMetaExport(ast) };
+ }
+ }
+ return null;
+}
+
+// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
+// when we render ... , since this MDX can be attached to any `selectedKind`!
+const wrapperJs = `
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => ;
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+`.trim();
+
+function extractExports(node, options) {
+ // we're overriding default export
+ const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
+ const storyExports = [];
+ let metaExport = null;
+ let counter = 0;
+ node.children.forEach(n => {
+ const exports = getExports(n, counter);
+ if (exports) {
+ const { stories, meta } = exports;
+ if (stories) {
+ stories.forEach(story => {
+ storyExports.push(story);
+ counter += 1;
+ });
+ }
+ if (meta) {
+ if (metaExport) {
+ throw new Error('Meta can only be declared once');
+ }
+ metaExport = meta;
+ }
+ }
+ });
+ if (!metaExport) {
+ metaExport = 'const componentMeta = { };';
+ }
+
+ const fullJsx = [
+ 'import { DocsContainer } from "@storybook/addon-docs/blocks";',
+ defaultJsx,
+ ...storyExports,
+ metaExport,
+ wrapperJs,
+ 'export default componentMeta;',
+ ].join('\n\n');
+
+ return fullJsx;
+}
+
+function createCompiler(mdxOptions) {
+ return function compiler(options = {}) {
+ this.Compiler = tree => extractExports(tree, options, mdxOptions);
+ };
+}
+
+module.exports = createCompiler;
diff --git a/addons/docs/mdx-compiler-plugin.test.js b/addons/docs/mdx-compiler-plugin.test.js
new file mode 100644
index 000000000000..fd24254f15ae
--- /dev/null
+++ b/addons/docs/mdx-compiler-plugin.test.js
@@ -0,0 +1,71 @@
+const path = require('path');
+const fs = require('fs-extra');
+const mdx = require('@mdx-js/mdx');
+const prettier = require('prettier');
+const plugin = require('./mdx-compiler-plugin');
+
+function format(code) {
+ return prettier.format(code, {
+ parser: 'babel',
+ printWidth: 100,
+ tabWidth: 2,
+ bracketSpacing: true,
+ trailingComma: 'es5',
+ singleQuote: true,
+ });
+}
+
+async function generate(filePath) {
+ const content = await fs.readFile(filePath, 'utf8');
+
+ const result = mdx.sync(content, {
+ filepath: filePath,
+ compilers: [plugin({})],
+ });
+
+ return format(result);
+}
+
+describe('docs-mdx-compiler-plugin', () => {
+ it('supports vanilla mdx', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/vanilla.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports story definitions', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/story-definitions.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports text-only story definitions', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/story-def-text-only.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports object-style story definitions', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/story-object.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports story references', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/story-references.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports "smart" current story', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/story-current.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports previews', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/previews.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports decorators', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/decorators.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('supports parameters', async () => {
+ const code = await generate(path.resolve(__dirname, './fixtures/parameters.mdx'));
+ expect(code).toMatchSnapshot();
+ });
+ it('errors on missing story props', async () => {
+ await expect(
+ generate(path.resolve(__dirname, './fixtures/story-missing-props.mdx'))
+ ).rejects.toThrow('Expected a story name or ID attribute');
+ });
+});
diff --git a/addons/docs/package.json b/addons/docs/package.json
index ec56c61947fd..259c22c5f12f 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -23,6 +23,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
+ "@babel/generator": "^7.4.0",
+ "@babel/parser": "^7.4.2",
+ "@mdx-js/loader": "^1.0.0",
+ "@mdx-js/mdx": "^1.0.0",
+ "@mdx-js/react": "^1.0.16",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/api": "5.2.0-alpha.23",
"@storybook/components": "5.2.0-alpha.23",
@@ -30,6 +35,7 @@
"@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
+ "lodash": "^4.171.11",
"prop-types": "^15.7.2"
},
"devDependencies": {
diff --git a/addons/docs/react/index.js b/addons/docs/react/index.js
new file mode 100644
index 000000000000..38c1756201b7
--- /dev/null
+++ b/addons/docs/react/index.js
@@ -0,0 +1 @@
+module.exports = require('../common/index');
diff --git a/addons/docs/react/preset.js b/addons/docs/react/preset.js
new file mode 100644
index 000000000000..a9b8af2cce0a
--- /dev/null
+++ b/addons/docs/react/preset.js
@@ -0,0 +1 @@
+module.exports = require('../common/preset');
diff --git a/addons/docs/vue/index.js b/addons/docs/vue/index.js
new file mode 100644
index 000000000000..38c1756201b7
--- /dev/null
+++ b/addons/docs/vue/index.js
@@ -0,0 +1 @@
+module.exports = require('../common/index');
diff --git a/addons/docs/vue/preset.js b/addons/docs/vue/preset.js
new file mode 100644
index 000000000000..a9b8af2cce0a
--- /dev/null
+++ b/addons/docs/vue/preset.js
@@ -0,0 +1 @@
+module.exports = require('../common/preset');
diff --git a/yarn.lock b/yarn.lock
index de3157fb024e..0a69c87141da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -539,7 +539,7 @@
esutils "^2.0.2"
js-tokens "^4.0.0"
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
@@ -3144,6 +3144,41 @@
npmlog "^4.1.2"
write-file-atomic "^2.3.0"
+"@mdx-js/loader@^1.0.0":
+ version "1.0.21"
+ resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.0.21.tgz#72fa5422ead35ac68aa452a032a84dd4f49e845b"
+ integrity sha512-1e/OZSGRSJHjp/ICroPVgja3v97q4pKm1TTFo/Hn1G5DWihOIFf+PUZgqD58Y1mbWhSHZrP4ZLmySVjmCjgUog==
+ dependencies:
+ "@mdx-js/mdx" "^1.0.21"
+ "@mdx-js/react" "^1.0.21"
+ loader-utils "^1.1.0"
+
+"@mdx-js/mdx@^1.0.0", "@mdx-js/mdx@^1.0.21":
+ version "1.0.21"
+ resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.21.tgz#028a7975fff026222f7ace19c8c130290c649025"
+ integrity sha512-B+n3PvrtdUcaCgDmWFaBf4n/zsls5hoyNPkWe2CzUx3ggR0SoD4UqCQR7iIZZ//fUjAwFODGf+2H0aJ3tIlB7w==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.0.0"
+ "@babel/plugin-syntax-jsx" "^7.2.0"
+ "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+ change-case "^3.0.2"
+ detab "^2.0.0"
+ hast-util-raw "^5.0.0"
+ lodash.uniq "^4.5.0"
+ mdast-util-to-hast "^4.0.0"
+ remark-mdx "^1.0.21"
+ remark-parse "^6.0.0"
+ remark-squeeze-paragraphs "^3.0.1"
+ to-style "^1.3.3"
+ unified "^7.0.0"
+ unist-builder "^1.0.1"
+ unist-util-visit "^1.3.0"
+
+"@mdx-js/react@^1.0.16", "@mdx-js/react@^1.0.21":
+ version "1.0.21"
+ resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.21.tgz#fc569b86d19f426774591fa401d999ddf6ea5948"
+ integrity sha512-+7H1UfIytxKN/nSdojCRzUM/ZeQ6/EUg8F9bnY2NnPGuF+67cug6vZBAx9famtAey0Ms0dr2QAuCOd8k3SkhJg==
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -7638,7 +7673,7 @@ callsites@^3.0.0:
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-camel-case@3.0.x:
+camel-case@3.0.x, camel-case@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
@@ -7800,6 +7835,30 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
strip-ansi "^3.0.0"
supports-color "^2.0.0"
+change-case@^3.0.2:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
+ integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==
+ dependencies:
+ camel-case "^3.0.0"
+ constant-case "^2.0.0"
+ dot-case "^2.1.0"
+ header-case "^1.0.0"
+ is-lower-case "^1.1.0"
+ is-upper-case "^1.1.0"
+ lower-case "^1.1.1"
+ lower-case-first "^1.0.0"
+ no-case "^2.3.2"
+ param-case "^2.1.0"
+ pascal-case "^2.0.0"
+ path-case "^2.1.0"
+ sentence-case "^2.1.0"
+ snake-case "^2.1.0"
+ swap-case "^1.1.0"
+ title-case "^2.1.0"
+ upper-case "^1.1.1"
+ upper-case-first "^1.1.0"
+
change-emitter@^0.1.2:
version "0.1.6"
resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -8223,7 +8282,7 @@ codemirror@^5.26.0:
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.47.0.tgz#c13a521ae5660d3acc655af252f4955065293789"
integrity sha512-kV49Fr+NGFHFc/Imsx6g180hSlkGhuHxTSDDmDHOuyln0MQYFLixDY4+bFkBVeCEiepYfDimAF/e++9jPJk4QA==
-collapse-white-space@^1.0.2, collapse-white-space@^1.0.4:
+collapse-white-space@^1.0.0, collapse-white-space@^1.0.2, collapse-white-space@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.5.tgz#c2495b699ab1ed380d29a1091e01063e75dbbe3a"
integrity sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==
@@ -8573,6 +8632,14 @@ consolidate@^0.15.1:
dependencies:
bluebird "^3.1.1"
+constant-case@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+ integrity sha1-QXV2TTidP6nI7NKRhu1gBSQ7akY=
+ dependencies:
+ snake-case "^2.1.0"
+ upper-case "^1.1.1"
+
constants-browserify@^1.0.0, constants-browserify@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -9221,7 +9288,7 @@ css-what@2.1, css-what@^2.1.2:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
-css@^2.2.1:
+css@2.2.4, css@^2.2.1:
version "2.2.4"
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -9790,6 +9857,13 @@ destroy@~1.0.4:
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+detab@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.2.tgz#074970d1a807b045d0258a4235df5928dd683561"
+ integrity sha512-Q57yPrxScy816TTE1P/uLRXLDKjXhvYTbfxS/e6lPD+YrqghbsMlGB9nQzj/zVtSPaF0DFPSdO916EWO4sQUyQ==
+ dependencies:
+ repeat-string "^1.5.4"
+
detect-file@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@@ -10052,6 +10126,13 @@ domutils@^1.5.1, domutils@^1.7.0:
dom-serializer "0"
domelementtype "1"
+dot-case@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee"
+ integrity sha1-NNzzf1Co6TwrO8qLt/uRVcfaO+4=
+ dependencies:
+ no-case "^2.2.0"
+
dot-prop@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -13751,6 +13832,18 @@ hashids@1.1.4:
resolved "https://registry.yarnpkg.com/hashids/-/hashids-1.1.4.tgz#e4ff92ad66b684a3bd6aace7c17d66618ee5fa21"
integrity sha512-U/fnTE3edW0AV92ZI/BfEluMZuVcu3MDOopsN7jS+HqDYcarQo8rXQiWlsBlm0uX48/taYSdxRsfzh2HRg5Z6w==
+hast-to-hyperscript@^7.0.0:
+ version "7.0.2"
+ resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.2.tgz#e9237c88c6069999ad38aec847fefc296f484c4c"
+ integrity sha512-NBMMst0hkDR21uSH75m9W2DkljBrLoMQEhGiLMLNij4HIzEDJMC1UG+CFR6EAjHi2zs3NHBoaAHJOHxftoIN2g==
+ dependencies:
+ comma-separated-tokens "^1.0.0"
+ property-information "^5.0.0"
+ space-separated-tokens "^1.0.0"
+ style-to-object "^0.2.1"
+ unist-util-is "^3.0.0"
+ web-namespaces "^1.1.2"
+
hast-util-from-parse5@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.0.tgz#a505a05766e0f96e389bfb0b1dd809eeefcef47b"
@@ -13767,6 +13860,31 @@ hast-util-parse-selector@^2.2.0:
resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz#4ddbae1ae12c124e3eb91b581d2556441766f0ab"
integrity sha512-Xyh0v+nHmQvrOqop2Jqd8gOdyQtE8sIP9IQf7mlVDqp924W4w/8Liuguk2L2qei9hARnQSG2m+wAOCxM7npJVw==
+hast-util-raw@^5.0.0:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.1.tgz#b39539cf4b9f7ccdc131f72a583502a7911b99ee"
+ integrity sha512-iHo7G6BjRc/GU1Yun5CIEXjil0wVnIbz11C6k0JdDichSDMtYi2+NNtk6YN7EOP0JfPstX30d3pRLfaJv5CkdA==
+ dependencies:
+ hast-util-from-parse5 "^5.0.0"
+ hast-util-to-parse5 "^5.0.0"
+ html-void-elements "^1.0.1"
+ parse5 "^5.0.0"
+ unist-util-position "^3.0.0"
+ web-namespaces "^1.0.0"
+ xtend "^4.0.1"
+ zwitch "^1.0.0"
+
+hast-util-to-parse5@^5.0.0:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.1.tgz#cabf2dbe9ed988a5128fc708457b37cdf535a2e8"
+ integrity sha512-ivCeAd5FCXr7bapJIVsWMnx/EmbjkkW2TU2hd1prq+jGwiaUoK+FcpjyPNwsC5ogzCwWO669tOqIovGeLc/ntg==
+ dependencies:
+ hast-to-hyperscript "^7.0.0"
+ property-information "^5.0.0"
+ web-namespaces "^1.0.0"
+ xtend "^4.0.1"
+ zwitch "^1.0.0"
+
hastscript@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.0.0.tgz#fee10382c1bc4ba3f1be311521d368c047d2c43a"
@@ -13782,6 +13900,14 @@ he@1.2.x, he@^1.1.0, he@^1.1.1:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+header-case@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d"
+ integrity sha1-lTWXMZfBRLCWE81l0xfvGZY70C0=
+ dependencies:
+ no-case "^2.2.0"
+ upper-case "^1.1.3"
+
heimdalljs-fs-monitor@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/heimdalljs-fs-monitor/-/heimdalljs-fs-monitor-0.2.2.tgz#a76d98f52dbf3aa1b7c20cebb0132e2f5eeb9204"
@@ -13954,6 +14080,11 @@ html-tags@^2.0.0:
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
+html-void-elements@^1.0.1:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.4.tgz#95e8bb5ecd6b88766569c2645f2b5f1591db9ba5"
+ integrity sha512-yMk3naGPLrfvUV9TdDbuYXngh/TpHbA6TrOw3HL9kS8yhwx7i309BReNg7CbAJXGE+UMJ6je5OqJ7lC63o6YuQ==
+
html-webpack-plugin@4.0.0-alpha.2:
version "4.0.0-alpha.2"
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-alpha.2.tgz#7745967e389a57a098e26963f328ebe4c19b598d"
@@ -14633,7 +14764,7 @@ is-accessor-descriptor@^1.0.0:
dependencies:
kind-of "^6.0.0"
-is-alphabetical@^1.0.0:
+is-alphabetical@^1.0.0, is-alphabetical@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.3.tgz#eb04cc47219a8895d8450ace4715abff2258a1f8"
integrity sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==
@@ -14883,6 +15014,13 @@ is-installed-globally@^0.1.0:
global-dirs "^0.1.0"
is-path-inside "^1.0.0"
+is-lower-case@^1.1.0:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
+ integrity sha1-fhR75HaNxGbbO/shzGCzHmrWk5M=
+ dependencies:
+ lower-case "^1.1.0"
+
is-npm@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
@@ -15114,6 +15252,13 @@ is-unc-path@^0.1.1:
dependencies:
unc-path-regex "^0.1.0"
+is-upper-case@^1.1.0:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
+ integrity sha1-jQsfp+eTOh5YSDYA7H2WYcuvdW8=
+ dependencies:
+ upper-case "^1.1.0"
+
is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@@ -17594,7 +17739,14 @@ loud-rejection@^1.0.0:
currently-unhandled "^0.4.1"
signal-exit "^3.0.0"
-lower-case@^1.1.1:
+lower-case-first@^1.0.0:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
+ integrity sha1-5dp8JvKacHO+AtUrrJmA5ZIq36E=
+ dependencies:
+ lower-case "^1.1.2"
+
+lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
version "1.1.4"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
@@ -17948,6 +18100,13 @@ mdast-comment-marker@^1.0.0:
resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.1.1.tgz#9c9c18e1ed57feafc1965d92b028f37c3c8da70d"
integrity sha512-TWZDaUtPLwKX1pzDIY48MkSUQRDwX/HqbTB4m3iYdL/zosi/Z6Xqfdv0C0hNVKvzrPjZENrpWDt4p4odeVO0Iw==
+mdast-squeeze-paragraphs@^3.0.0:
+ version "3.0.5"
+ resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
+ integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
+ dependencies:
+ unist-util-remove "^1.0.0"
+
mdast-util-compact@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.3.tgz#98a25cc8a7865761a41477b3a87d1dcef0b1e79d"
@@ -17955,11 +18114,35 @@ mdast-util-compact@^1.0.0:
dependencies:
unist-util-visit "^1.1.0"
+mdast-util-definitions@^1.2.0:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.4.tgz#2b54ad4eecaff9d9fcb6bf6f9f6b68b232d77ca7"
+ integrity sha512-HfUArPog1j4Z78Xlzy9Q4aHLnrF/7fb57cooTHypyGoe2XFNbcx/kWZDoOz+ra8CkUzvg3+VHV434yqEd1DRmA==
+ dependencies:
+ unist-util-visit "^1.0.0"
+
mdast-util-heading-style@^1.0.2:
version "1.0.5"
resolved "https://registry.yarnpkg.com/mdast-util-heading-style/-/mdast-util-heading-style-1.0.5.tgz#81b2e60d76754198687db0e8f044e42376db0426"
integrity sha512-8zQkb3IUwiwOdUw6jIhnwM6DPyib+mgzQuHAe7j2Hy1rIarU4VUxe472bp9oktqULW3xqZE+Kz6OD4Gi7IA3vw==
+mdast-util-to-hast@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-4.0.0.tgz#d8467ce28ea73b4648667bc389aa39dfa9f67f18"
+ integrity sha512-yOTZSxR1aPvWRUxVeLaLZ1sCYrK87x2Wusp1bDM/Ao2jETBhYUKITI3nHvgy+HkZW54HuCAhHnS0mTcbECD5Ig==
+ dependencies:
+ collapse-white-space "^1.0.0"
+ detab "^2.0.0"
+ mdast-util-definitions "^1.2.0"
+ mdurl "^1.0.1"
+ trim "0.0.1"
+ trim-lines "^1.0.0"
+ unist-builder "^1.0.1"
+ unist-util-generated "^1.1.0"
+ unist-util-position "^3.0.0"
+ unist-util-visit "^1.1.0"
+ xtend "^4.0.1"
+
mdast-util-to-string@^1.0.2:
version "1.0.6"
resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.6.tgz#7d85421021343b33de1552fc71cb8e5b4ae7536d"
@@ -19044,7 +19227,7 @@ nice-try@^1.0.4:
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-no-case@^2.2.0:
+no-case@^2.2.0, no-case@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
@@ -20110,7 +20293,7 @@ parallel-transform@^1.1.0:
inherits "^2.0.3"
readable-stream "^2.1.5"
-param-case@2.1.x:
+param-case@2.1.x, param-case@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
@@ -20325,6 +20508,14 @@ parseurl@~1.3.2, parseurl@~1.3.3:
resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+pascal-case@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.1.tgz#2d578d3455f660da65eca18ef95b4e0de912761e"
+ integrity sha1-LVeNNFX2YNpl7KGO+VtODekSdh4=
+ dependencies:
+ camel-case "^3.0.0"
+ upper-case-first "^1.1.0"
+
pascalcase@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -20350,6 +20541,13 @@ path-browserify@~0.0.0:
resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
+path-case@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
+ integrity sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU=
+ dependencies:
+ no-case "^2.2.0"
+
path-dirname@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -23717,6 +23915,19 @@ remark-lint@^6.0.0, remark-lint@^6.0.4:
dependencies:
remark-message-control "^4.0.0"
+remark-mdx@^1.0.21:
+ version "1.0.21"
+ resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.21.tgz#cf5a59ad68cce6c1f687953dcf504212fbd32555"
+ integrity sha512-paYs43yHPkxEuhyWXvRGJdupdurua1ttmGeu5GLqU/qc17BaZklCdNSEjCNXRa2LM0pOFRv0KVJigfA2vfaDEQ==
+ dependencies:
+ "@babel/core" "^7.2.2"
+ "@babel/helper-plugin-utils" "^7.0.0"
+ "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
+ "@babel/plugin-syntax-jsx" "^7.2.0"
+ is-alphabetical "^1.0.2"
+ remark-parse "^6.0.0"
+ unified "^7.0.0"
+
remark-message-control@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/remark-message-control/-/remark-message-control-4.1.1.tgz#a3f0b08dffda484e7196f0539de1488220f1d251"
@@ -23769,6 +23980,13 @@ remark-preset-lint-recommended@^3.0.2:
remark-lint-no-unused-definitions "^1.0.0"
remark-lint-ordered-list-marker-style "^1.0.0"
+remark-squeeze-paragraphs@^3.0.1:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.4.tgz#9fe50c3bf3b572dd88754cd426ada007c0b8dc5f"
+ integrity sha512-Wmz5Yj9q+W1oryo8BV17JrOXZgUKVcpJ2ApE2pwnoHwhFKSk4Wp2PmFNbmJMgYSqAdFwfkoe+TSYop5Fy8wMgA==
+ dependencies:
+ mdast-squeeze-paragraphs "^3.0.0"
+
remark-stringify@^6.0.0:
version "6.0.4"
resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-6.0.4.tgz#16ac229d4d1593249018663c7bddf28aafc4e088"
@@ -24604,6 +24822,14 @@ send@0.17.1:
range-parser "~1.2.1"
statuses "~1.5.0"
+sentence-case@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.1.tgz#1f6e2dda39c168bf92d13f86d4a918933f667ed4"
+ integrity sha1-H24t2jnBaL+S0T+G1KkYkz9mftQ=
+ dependencies:
+ no-case "^2.2.0"
+ upper-case-first "^1.1.2"
+
serialize-error@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
@@ -24981,6 +25207,13 @@ smart-buffer@4.0.2:
resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"
integrity sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==
+snake-case@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+ integrity sha1-Qb2xtz8w7GagTU4srRt2OH1NbZ8=
+ dependencies:
+ no-case "^2.2.0"
+
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -25793,6 +26026,13 @@ style-loader@0.23.1, style-loader@^0.23.1:
loader-utils "^1.1.0"
schema-utils "^1.0.0"
+style-to-object@^0.2.1:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.2.tgz#3ea3b276bd3fa9da1195fcdcdd03bc52aa2aae01"
+ integrity sha512-GcbtvfsqyKmIPpHeOHZ5Rmwsx2MDJct4W9apmTGcbPTbpA2FcgTFl2Z43Hm4Qb61MWGPNK8Chki7ITiY7lLOow==
+ dependencies:
+ css "2.2.4"
+
style-unit@^0.6.5:
version "0.6.5"
resolved "https://registry.npmjs.org/style-unit/-/style-unit-0.6.5.tgz#4c471b1429a3b951bfd881fbf512ca20a19047da"
@@ -25992,6 +26232,14 @@ svgo@^1.0.0, svgo@^1.2.1:
unquote "~1.1.1"
util.promisify "~1.0.0"
+swap-case@^1.1.0:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
+ integrity sha1-w5IDpFhzhfrTyFCgvRvK+ggZdOM=
+ dependencies:
+ lower-case "^1.1.1"
+ upper-case "^1.1.1"
+
symbol-observable@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
@@ -26410,6 +26658,14 @@ tinycolor2@^1.4.1:
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+title-case@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
+ integrity sha1-PhJyFtpY0rxb7PE3q5Ha46fNj6o=
+ dependencies:
+ no-case "^2.2.0"
+ upper-case "^1.0.3"
+
tmp@0.0.28:
version "0.0.28"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
@@ -26498,6 +26754,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
regex-not "^1.0.2"
safe-regex "^1.1.0"
+to-style@^1.3.3:
+ version "1.3.3"
+ resolved "https://registry.yarnpkg.com/to-style/-/to-style-1.3.3.tgz#63a2b70a6f4a7d4fdc2ed57a0be4e7235cb6699c"
+ integrity sha1-Y6K3Cm9KfU/cLtV6C+TnI1y2aZw=
+
to-vfile@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-4.0.0.tgz#465ade5fc2b9e97e6c80b854d378a5d0f4b5d04a"
@@ -26614,6 +26875,11 @@ tree-sync@^1.2.2:
quick-temp "^0.1.5"
walk-sync "^0.3.3"
+trim-lines@^1.0.0:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.2.tgz#c8adbdbdae21bb5c2766240a661f693afe23e59b"
+ integrity sha512-3GOuyNeTqk3FAqc3jOJtw7FTjYl94XBR5aD9QnDbK/T4CA9sW/J0l9RoaRPE9wyPP7NF331qnHnvJFBJ+IDkmQ==
+
trim-newlines@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -27209,6 +27475,13 @@ unique-string@^1.0.0:
dependencies:
crypto-random-string "^1.0.0"
+unist-builder@^1.0.1:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.4.tgz#e1808aed30bd72adc3607f25afecebef4dd59e17"
+ integrity sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==
+ dependencies:
+ object-assign "^4.1.0"
+
unist-util-generated@^1.1.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.4.tgz#2261c033d9fc23fae41872cdb7663746e972c1a7"
@@ -27226,6 +27499,11 @@ unist-util-is@^2.1.2:
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.3.tgz#459182db31f4742fceaea88d429693cbf0043d20"
integrity sha512-4WbQX2iwfr/+PfM4U3zd2VNXY+dWtZsN1fLnWEi2QQXA4qyDYAZcDMfXUX0Cu6XZUHHAO9q4nyxxLT4Awk1qUA==
+unist-util-is@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+ integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
unist-util-position@^3.0.0:
version "3.0.3"
resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.3.tgz#fff942b879538b242096c148153826664b1ca373"
@@ -27238,6 +27516,13 @@ unist-util-remove-position@^1.0.0:
dependencies:
unist-util-visit "^1.1.0"
+unist-util-remove@^1.0.0:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
+ integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
+ dependencies:
+ unist-util-is "^3.0.0"
+
unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1, unist-util-stringify-position@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
@@ -27257,7 +27542,7 @@ unist-util-visit-parents@^2.0.0:
dependencies:
unist-util-is "^2.1.2"
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.4.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.3.0, unist-util-visit@^1.4.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
@@ -27347,7 +27632,14 @@ update-notifier@^3.0.0:
semver-diff "^2.0.0"
xdg-basedir "^3.0.0"
-upper-case@^1.1.1:
+upper-case-first@^1.1.0, upper-case-first@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
+ integrity sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=
+ dependencies:
+ upper-case "^1.1.1"
+
+upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
@@ -27864,7 +28156,7 @@ weak@^1.0.1:
bindings "^1.2.1"
nan "^2.0.5"
-web-namespaces@^1.1.2:
+web-namespaces@^1.0.0, web-namespaces@^1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.3.tgz#9bbf5c99ff0908d2da031f1d732492a96571a83f"
integrity sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==
@@ -29242,3 +29534,8 @@ zone.js@^0.8.29:
version "0.8.29"
resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.29.tgz#8dce92aa0dd553b50bc5bfbb90af9986ad845a12"
integrity sha512-mla2acNCMkWXBD+c+yeUrBUrzOxYMNFdQ6FGfigGGtEVBPJx07BQeJekjt9DmH1FtZek4E9rE1eRR9qQpxACOQ==
+
+zwitch@^1.0.0:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.4.tgz#93b1b993b13c8926753a41afaf8f27bbfac6be8b"
+ integrity sha512-YO803/X+13GNaZB7fVopjvHH0uWQKgJkgKnU1YCjxShjKGVuN9PPHHW8g+uFDpkHpSTNi3rCMKMewIcbC1BAYg==
From 13393715474c9fc781d08ca71c3268c24993d099 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 11:44:29 +0800
Subject: [PATCH 138/371] Custom babel config for source-loader
---
.babelrc.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/.babelrc.js b/.babelrc.js
index 9533d25af296..b10a6b34033d 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -53,6 +53,7 @@ module.exports = {
},
{
test: './lib',
+ exclude: './addons/storysource/src/loader',
presets: [
['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
'@babel/preset-react',
@@ -76,6 +77,7 @@ module.exports = {
'./lib/core/src/server',
'./lib/node-logger',
'./lib/codemod',
+ './lib/source-loader/src',
'./addons/storyshots',
'./addons/storysource/src/loader',
'./app/**/src/server/**',
From a70f7d383d6129707ce22ad5aa632eb90eb8e67f Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 11:45:12 +0800
Subject: [PATCH 139/371] Upgrade all examples to use source-loader
---
examples/angular-cli/.storybook/webpack.config.ts | 2 +-
examples/ember-cli/.storybook/webpack.config.js | 2 +-
examples/ember-cli/package.json | 1 +
examples/html-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/html-kitchen-sink/package.json | 1 +
examples/marko-cli/.storybook/webpack.config.js | 2 +-
examples/marko-cli/package.json | 1 +
examples/mithril-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/mithril-kitchen-sink/package.json | 1 +
examples/official-storybook/package.json | 1 +
examples/official-storybook/webpack.config.js | 2 +-
examples/polymer-cli/.storybook/webpack.config.js | 2 +-
examples/polymer-cli/package.json | 1 +
examples/preact-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/preact-kitchen-sink/package.json | 1 +
examples/rax-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/rax-kitchen-sink/package.json | 1 +
examples/riot-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/riot-kitchen-sink/package.json | 1 +
examples/svelte-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/svelte-kitchen-sink/package.json | 1 +
examples/vue-kitchen-sink/.storybook/webpack.config.js | 2 +-
examples/vue-kitchen-sink/package.json | 1 +
23 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/examples/angular-cli/.storybook/webpack.config.ts b/examples/angular-cli/.storybook/webpack.config.ts
index 3a2d1f390e3f..3a8badcaf3a1 100644
--- a/examples/angular-cli/.storybook/webpack.config.ts
+++ b/examples/angular-cli/.storybook/webpack.config.ts
@@ -5,7 +5,7 @@ module.exports = async ({ config }: { config: any }) => {
test: [/\.stories\.tsx?$/, /index\.ts$/],
loaders: [
{
- loader: require.resolve('@storybook/addon-storysource/loader'),
+ loader: require.resolve('@storybook/source-loader'),
options: {
parser: 'typescript',
},
diff --git a/examples/ember-cli/.storybook/webpack.config.js b/examples/ember-cli/.storybook/webpack.config.js
index 915eb22693e8..d382a097d811 100644
--- a/examples/ember-cli/.storybook/webpack.config.js
+++ b/examples/ember-cli/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../')],
enforce: 'pre',
});
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 6425b7f90722..6df3e90e628a 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -27,6 +27,7 @@
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/ember": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"babel-loader": "^8",
"broccoli-asset-rev": "^3.0.0",
"cross-env": "^5.2.0",
diff --git a/examples/html-kitchen-sink/.storybook/webpack.config.js b/examples/html-kitchen-sink/.storybook/webpack.config.js
index d2d694457e04..49d6279ea521 100644
--- a/examples/html-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/html-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../stories')],
enforce: 'pre',
});
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index ff3ce8a491df..e41d18dc8b9e 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -31,6 +31,7 @@
"@storybook/core": "5.2.0-alpha.23",
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/html": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"eventemitter3": "^3.1.0",
"format-json": "^1.0.3",
"global": "^4.3.2"
diff --git a/examples/marko-cli/.storybook/webpack.config.js b/examples/marko-cli/.storybook/webpack.config.js
index 8c62bf31bd42..5c4768c30ce1 100644
--- a/examples/marko-cli/.storybook/webpack.config.js
+++ b/examples/marko-cli/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 57d3538ab5ca..9adedcf735cb 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -31,6 +31,7 @@
"@storybook/addon-storysource": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/marko": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}
diff --git a/examples/mithril-kitchen-sink/.storybook/webpack.config.js b/examples/mithril-kitchen-sink/.storybook/webpack.config.js
index 8c62bf31bd42..5c4768c30ce1 100644
--- a/examples/mithril-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/mithril-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index ea7802446a95..73e02448770d 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -24,6 +24,7 @@
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/mithril": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"webpack": "^4.33.0"
}
}
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 68da05717790..96af26fd720d 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -41,6 +41,7 @@
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/node-logger": "5.2.0-alpha.23",
"@storybook/react": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js
index 3429adc0ed4d..e298566a2acf 100644
--- a/examples/official-storybook/webpack.config.js
+++ b/examples/official-storybook/webpack.config.js
@@ -40,7 +40,7 @@ module.exports = async ({ config }) => ({
},
{
test: /\.stories\.jsx?$/,
- use: require.resolve('@storybook/addon-storysource/loader'),
+ use: require.resolve('@storybook/source-loader'),
include: [
path.resolve(__dirname, './stories'),
path.resolve(__dirname, '../../lib/ui/src'),
diff --git a/examples/polymer-cli/.storybook/webpack.config.js b/examples/polymer-cli/.storybook/webpack.config.js
index 3e7ae19f52be..0be010861597 100644
--- a/examples/polymer-cli/.storybook/webpack.config.js
+++ b/examples/polymer-cli/.storybook/webpack.config.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index ba93e8862d40..f4753f186cb0 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -20,6 +20,7 @@
"@storybook/addon-storysource": "5.2.0-alpha.23",
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/polymer": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",
diff --git a/examples/preact-kitchen-sink/.storybook/webpack.config.js b/examples/preact-kitchen-sink/.storybook/webpack.config.js
index 46ba330e6665..c8a75926b7ca 100644
--- a/examples/preact-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/preact-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 5b3d6aa7a813..230d12286847 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -30,6 +30,7 @@
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/preact": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/rax-kitchen-sink/.storybook/webpack.config.js b/examples/rax-kitchen-sink/.storybook/webpack.config.js
index 99e298d739f2..39dff33950d1 100644
--- a/examples/rax-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/rax-kitchen-sink/.storybook/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = {
rules: [
{
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
},
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index 98ca817db918..bb929a018746 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -40,6 +40,7 @@
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/rax": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"babel-eslint": "^8.2.2",
"babel-preset-rax": "^1.0.0-beta.0",
"rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/riot-kitchen-sink/.storybook/webpack.config.js b/examples/riot-kitchen-sink/.storybook/webpack.config.js
index 9eb381789988..5f6354c3c594 100644
--- a/examples/riot-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/riot-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index cf3f892e7380..275d1c24e000 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -29,6 +29,7 @@
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
"@storybook/riot": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"file-loader": "^3.0.1",
diff --git a/examples/svelte-kitchen-sink/.storybook/webpack.config.js b/examples/svelte-kitchen-sink/.storybook/webpack.config.js
index a943831441ac..243b6489507a 100644
--- a/examples/svelte-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/svelte-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 4eac0f34f862..e01a46e3cf4f 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -23,6 +23,7 @@
"@storybook/addon-storysource": "5.2.0-alpha.23",
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"@storybook/svelte": "5.2.0-alpha.23"
}
}
diff --git a/examples/vue-kitchen-sink/.storybook/webpack.config.js b/examples/vue-kitchen-sink/.storybook/webpack.config.js
index a943831441ac..243b6489507a 100644
--- a/examples/vue-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/, /index\.js$/],
- loaders: [require.resolve('@storybook/addon-storysource/loader')],
+ loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 5ee3052f862f..455c067b08cd 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -28,6 +28,7 @@
"@storybook/addon-storysource": "5.2.0-alpha.23",
"@storybook/addon-viewport": "5.2.0-alpha.23",
"@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/source-loader": "5.2.0-alpha.23",
"@storybook/vue": "5.2.0-alpha.23",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
From 650e9657568b3c2ba4581f96adba7a4853676e74 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 12:11:34 +0800
Subject: [PATCH 140/371] Fix typo
---
addons/docs/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 259c22c5f12f..a900f076f2d5 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -35,7 +35,7 @@
"@storybook/theming": "5.2.0-alpha.23",
"core-js": "^3.0.1",
"global": "^4.3.2",
- "lodash": "^4.171.11",
+ "lodash": "^4.17.11",
"prop-types": "^15.7.2"
},
"devDependencies": {
From bfd347a928e4a95c14f11ce3b002888a22ced59f Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 15:01:06 +0800
Subject: [PATCH 141/371] Add docs examples to official-storybook
---
examples/official-storybook/config.js | 1 +
examples/official-storybook/presets.js | 1 +
.../stories/addon-docs.stories.js | 41 ++++++++--
.../stories/addon-docs.stories.mdx | 80 +++++++++++++++++++
.../stories/notes/notes.stories.mdx | 3 +
lib/core/src/client/preview/start.js | 8 +-
6 files changed, 127 insertions(+), 7 deletions(-)
create mode 100644 examples/official-storybook/presets.js
create mode 100644 examples/official-storybook/stories/addon-docs.stories.mdx
create mode 100644 examples/official-storybook/stories/notes/notes.stories.mdx
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index c9fd2c34292d..ae4db10692d7 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -63,3 +63,4 @@ addParameters({
load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);
load(require.context('../../lib/components/src', true, /\.stories\.tsx?$/), module);
load(require.context('./stories', true, /\.stories\.js$/), module);
+load(require.context('./stories', true, /\.stories\.mdx$/), module);
diff --git a/examples/official-storybook/presets.js b/examples/official-storybook/presets.js
new file mode 100644
index 000000000000..b1d463490f6d
--- /dev/null
+++ b/examples/official-storybook/presets.js
@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/react/preset'];
diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js
index 5571d08c30cd..478efb2799cd 100644
--- a/examples/official-storybook/stories/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs.stories.js
@@ -1,8 +1,37 @@
import React from 'react';
-import { storiesOf } from '@storybook/react';
+import notes from './notes/notes.md';
+import mdxNotes from './notes/notes.stories.mdx';
+import DocgenButton from '../components/DocgenButton';
-storiesOf('Addons|Docs', module)
- .addParameters({
- docs: () => Hello docs
,
- })
- .add('default', () => Click the docs tab to see the docs
);
+export default {
+ title: 'Addons|Docs/stories',
+ parameters: {
+ component: DocgenButton,
+ },
+};
+
+export const basic = () => Click docs tab to see basic docs
;
+
+export const withNotes = () => Click docs tab to see DocsPage docs
;
+withNotes.title = 'with notes';
+withNotes.parameters = {
+ notes,
+};
+
+export const withInfo = () => Click docs tab to see DocsPage docs
;
+withInfo.title = 'with info';
+withInfo.parameters = {
+ info: 'some user info string',
+};
+
+export const mdxOverride = () => Click docs tab to see MDX-overridden docs
;
+mdxOverride.title = 'mdx override';
+mdxOverride.parameters = {
+ docs: mdxNotes && mdxNotes.parameters && mdxNotes.parameters.docs,
+};
+
+export const jsxOverride = () => Click docs tab to see JSX-overridden docs
;
+jsxOverride.title = 'jsx override';
+jsxOverride.parameters = {
+ docs: () => Hello docs
,
+};
diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs.stories.mdx
new file mode 100644
index 000000000000..dad4ac526597
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs.stories.mdx
@@ -0,0 +1,80 @@
+import {
+ Story,
+ Preview,
+ Props,
+ Source,
+ Description,
+ ColorPalette,
+ ColorItem,
+ Meta,
+} from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+ {storyFn()}
]}
+ parameters={{ component: Button, notes: 'component notes' }}
+/>
+
+# Selected
+
+
+
+
+
+
+
+## A random color ColorPalette
+
+
+
+
+
+
+
+
+## Getting into details
+
+just a button, not a story
+
+
+
+ hello world
+
+
+ goodbye world
+
+
+ 🤘🚀💯
+
+
+ goodbye world
+
+ Plain text
+
+
+
+
+## Configurable height
+
+
+
+## Description
+
+
+
+
diff --git a/examples/official-storybook/stories/notes/notes.stories.mdx b/examples/official-storybook/stories/notes/notes.stories.mdx
new file mode 100644
index 000000000000..48dc5de86eae
--- /dev/null
+++ b/examples/official-storybook/stories/notes/notes.stories.mdx
@@ -0,0 +1,3 @@
+# Welcome!
+
+Let's just write markdown without stories
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 584731412216..355e41d4b965 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -149,7 +149,13 @@ export default function start(render, { decorateStory } = {}) {
kind === previousKind &&
name === previousStory
) {
- addons.getChannel().emit(Events.STORY_UNCHANGED, id);
+ addons.getChannel().emit(Events.STORY_UNCHANGED, {
+ id,
+ revision,
+ kind,
+ name,
+ viewMode,
+ });
return;
}
From 07e6c0099d6f001ae14e3d237c7523e5b9cfb625 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Wed, 19 Jun 2019 15:16:19 +0800
Subject: [PATCH 142/371] Restore component overrides
---
addons/docs/src/blocks/DocsContainer.tsx | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
index a94443b3503f..1e829cbbfbd4 100644
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@@ -1,7 +1,7 @@
/* eslint-disable react/destructuring-assignment */
import React from 'react';
-// import { MDXProvider } from '@mdx-js/react';
+import { MDXProvider } from '@mdx-js/react';
import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components';
import { DocsContextProps, DocsContext } from './DocsContext';
@@ -39,13 +39,13 @@ export const DocsContainer: React.FunctionComponent = ({
- {/* */}
-
-
-
-
-
- {/* */}
+
+
+
+
+
+
+
);
From 9a2ae24bfd56e9fe60ecdf8fbe1e79422a9034cb Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 19 Jun 2019 14:26:36 +0200
Subject: [PATCH 143/371] ADD disable parameter to error stories
---
.../official-storybook/stories/core/errors.stories.js | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index 09c235c59057..c1e530833def 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -15,11 +15,17 @@ exception.parameters = {
chromatic: { disable: true },
};
-export const badComponent = () => Hello world
;
+export const badComponent = () => (
+
+ Hello world
+
+
+);
badComponent.title = 'story errors - variant error';
badComponent.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
+ chromatic: { disable: true },
};
export const badStory = () => false;
@@ -27,5 +33,5 @@ badStory.title = 'story errors - story un-renderable type';
badStory.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
+ chromatic: { disable: true },
};
-
From 35a3869ea79d2a355cd59f187860f86aa3fea89f Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Wed, 19 Jun 2019 23:10:41 +0200
Subject: [PATCH 144/371] UPGRADE lazy-universal-dotenv
---
lib/core/package.json | 2 +-
yarn.lock | 33 ++++++++++++++++++++++++---------
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/lib/core/package.json b/lib/core/package.json
index 88f05dbb1e2b..72cbb7d36147 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -63,7 +63,7 @@
"interpret": "^1.2.0",
"ip": "^1.1.5",
"json5": "^2.1.0",
- "lazy-universal-dotenv": "^2.0.0",
+ "lazy-universal-dotenv": "^3.0.0",
"node-fetch": "^2.6.0",
"open": "^6.1.0",
"pnp-webpack-plugin": "1.4.3",
diff --git a/yarn.lock b/yarn.lock
index de3157fb024e..d1614d6dec8a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8820,6 +8820,11 @@ core-js@^3.0.0, core-js@^3.0.1:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.2.tgz#2549a2cfb3ca1a5d851c9f7838e8b282cef2f3ba"
integrity sha512-3poRGjbu56leCtZCZCzCgQ7GcKOflDFnjWIepaPFUsM0IXUBrne10sl3aa2Bkcz3+FjRdIxBe9dAMhIJmEnQNA==
+core-js@^3.0.4:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+ integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+
core-object@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/core-object/-/core-object-3.1.5.tgz#fa627b87502adc98045e44678e9a8ec3b9c0d2a9"
@@ -10073,11 +10078,16 @@ dotenv-defaults@^1.0.2:
dependencies:
dotenv "^6.2.0"
-dotenv-expand@4.2.0, dotenv-expand@^4.2.0:
+dotenv-expand@4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
+dotenv-expand@^5.1.0:
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+ integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
dotenv-webpack@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
@@ -10085,11 +10095,16 @@ dotenv-webpack@^1.7.0:
dependencies:
dotenv-defaults "^1.0.2"
-dotenv@6.2.0, dotenv@^6.0.0, dotenv@^6.2.0:
+dotenv@6.2.0, dotenv@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+dotenv@^8.0.0:
+ version "8.0.0"
+ resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
+ integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
+
driver-browser@^0.6.5:
version "0.6.7"
resolved "https://registry.npmjs.org/driver-browser/-/driver-browser-0.6.7.tgz#69eb463d31187b63e8abfa175d8683e81f197953"
@@ -16559,16 +16574,16 @@ lazy-cache@^1.0.3:
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
-lazy-universal-dotenv@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-2.0.0.tgz#e015ad9f77be9ef811956d53ea9519b1c0ab0214"
- integrity sha512-1Wi0zgZMfRLaRAK21g3odYuU+HE1d85Loe2tb44YhcNwIzhmD49mTPR9aKckpB9Q9Q9mA+hUMLI2xlkcCAe3yw==
+lazy-universal-dotenv@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.0.tgz#e71f07f89d8de6bbf491478e4503df3c96729b8d"
+ integrity sha512-Mbf5AeGOs74lE5BdQXHFJ7Rt383jxnWKNfW2EWL0Pibnhea5JRStRIiUpdTenyMxCGuCjlMpYQhhay1XZBSSQA==
dependencies:
"@babel/runtime" "^7.0.0"
app-root-dir "^1.0.2"
- core-js "^2.5.7"
- dotenv "^6.0.0"
- dotenv-expand "^4.2.0"
+ core-js "^3.0.4"
+ dotenv "^8.0.0"
+ dotenv-expand "^5.1.0"
lcid@^1.0.0:
version "1.0.0"
From 2188a8b337926dd5eeedecf3a00dcc367234ffe6 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Thu, 20 Jun 2019 11:59:37 +0800
Subject: [PATCH 145/371] CLI docs mode with --docs flag
---
jest.config.js | 3 ++
lib/api/src/index.tsx | 40 ++++++++++++++-----
lib/api/src/modules/layout.ts | 2 +
lib/api/src/modules/url.ts | 19 +++++----
lib/api/src/tests/layout.test.js | 1 +
lib/api/src/tests/url.test.js | 24 ++++++-----
lib/api/src/typings.d.ts | 3 ++
lib/core/src/server/build-dev.js | 1 +
lib/core/src/server/build-static.js | 2 +
lib/core/src/server/cli/dev.js | 1 +
lib/core/src/server/cli/prod.js | 1 +
.../server/manager/manager-webpack.config.js | 12 +++++-
lib/ui/src/components/layout/container.js | 4 ++
lib/ui/src/index.js | 9 ++++-
14 files changed, 92 insertions(+), 30 deletions(-)
diff --git a/jest.config.js b/jest.config.js
index 7e70c68eaf9a..f5a57e846929 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -69,6 +69,9 @@ module.exports = {
'/dll/',
'/__mocks__ /',
],
+ globals: {
+ DOCS_MODE: false,
+ },
snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
coverageDirectory: 'coverage',
setupFilesAfterEnv: ['./scripts/jest.init.js'],
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
index 73ec1224d311..02bd7f7149da 100644
--- a/lib/api/src/index.tsx
+++ b/lib/api/src/index.tsx
@@ -43,7 +43,10 @@ const { STORY_CHANGED, SET_STORIES, SELECT_STORY } = Events;
export type Module = StoreData &
RouterData &
- ProviderData & { mode?: 'production' | 'development' };
+ ProviderData & {
+ mode?: 'production' | 'development';
+ state: State;
+ };
export type State = Other &
LayoutSubState &
@@ -82,6 +85,10 @@ interface ProviderData {
provider: Provider;
}
+interface DocsModeData {
+ docsMode: boolean;
+}
+
interface StoreData {
store: Store;
}
@@ -92,7 +99,7 @@ interface Children {
type StatePartial = Partial;
-export type Props = Children & RouterData & ProviderData;
+export type Props = Children & RouterData & ProviderData & DocsModeData;
class ManagerProvider extends Component {
static displayName = 'Manager';
@@ -103,26 +110,41 @@ class ManagerProvider extends Component {
constructor(props: Props) {
super(props);
- const { provider, location, path, viewMode, storyId, navigate } = props;
+ const {
+ provider,
+ location,
+ path,
+ viewMode = props.docsMode ? 'docs' : 'story',
+ storyId,
+ docsMode,
+ navigate,
+ } = props;
const store = new Store({
getState: () => this.state,
setState: (stateChange: StatePartial, callback) => this.setState(stateChange, callback),
});
+ const routeData = { location, path, viewMode, storyId };
+
// Initialize the state to be the initial (persisted) state of the store.
// This gives the modules the chance to read the persisted state, apply their defaults
// and override if necessary
- this.state = store.getInitialState(getInitialState({}));
+ const docsModeState = {
+ layout: { isToolshown: false, showPanel: false },
+ ui: { docsMode: true },
+ };
+ this.state = store.getInitialState(
+ getInitialState({
+ ...routeData,
+ ...(docsMode ? docsModeState : null),
+ })
+ );
const apiData = {
navigate,
store,
provider,
- location,
- path,
- viewMode,
- storyId,
};
this.modules = [
@@ -134,7 +156,7 @@ class ManagerProvider extends Component {
initStories,
initURL,
initVersions,
- ].map(initModule => initModule(apiData));
+ ].map(initModule => initModule({ ...routeData, ...apiData, state: this.state }));
// Create our initial state by combining the initial state of all modules, then overlaying any saved state
const state = getInitialState(...this.modules.map(m => m.state));
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index de64a8c70389..7aa99602b3b6 100644
--- a/lib/api/src/modules/layout.ts
+++ b/lib/api/src/modules/layout.ts
@@ -24,6 +24,7 @@ export interface UI {
url?: string;
enableShortcuts: boolean;
sidebarAnimations: boolean;
+ docsMode: boolean;
}
export interface SubState {
@@ -132,6 +133,7 @@ const initial: SubState = {
ui: {
enableShortcuts: true,
sidebarAnimations: true,
+ docsMode: false,
},
layout: {
isToolshown: true,
diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index 52d4a265e21d..aa3a9bec6190 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -10,6 +10,7 @@ interface Additions {
panelPosition?: PanelPositions;
showNav?: boolean;
selectedPanel?: string;
+ viewMode?: string;
}
// Initialize the state based on the URL.
@@ -21,7 +22,7 @@ interface Additions {
// - nav: 0/1 -- show or hide the story list
//
// We also support legacy URLs from storybook <5
-const initialUrlSupport = ({ navigate, location, path }: Module) => {
+const initialUrlSupport = ({ navigate, state: { location, path, viewMode, storyId } }: Module) => {
const addition: Additions = {};
const query = queryFromLocation(location);
let selectedPanel;
@@ -70,20 +71,20 @@ const initialUrlSupport = ({ navigate, location, path }: Module) => {
}
if (selectedKind && selectedStory) {
- const storyId = toId(selectedKind, selectedStory);
- setTimeout(() => navigate(`/story/${storyId}`, { replace: true }), 1);
+ const id = toId(selectedKind, selectedStory);
+ setTimeout(() => navigate(`/${viewMode}/${id}`, { replace: true }), 1);
} else if (selectedKind) {
// Create a "storyId" of the form `kind-sanitized--*`
const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
- setTimeout(() => navigate(`/story/${standInId}`, { replace: true }), 1);
+ setTimeout(() => navigate(`/${viewMode}/${standInId}`, { replace: true }), 1);
} else if (!queryPath || queryPath === '/') {
- setTimeout(() => navigate(`/story/*`, { replace: true }), 1);
+ setTimeout(() => navigate(`/${viewMode}/*`, { replace: true }), 1);
} else if (Object.keys(query).length > 1) {
// remove other queries
setTimeout(() => navigate(`${queryPath}`, { replace: true }), 1);
}
- return { layout: addition, selectedPanel, location, path, customQueryParams };
+ return { viewMode, layout: addition, selectedPanel, location, path, customQueryParams, storyId };
};
export interface QueryParams {
@@ -102,7 +103,8 @@ export interface SubAPI {
setQueryParams: (input: QueryParams) => void;
}
-export default function({ store, navigate, location, path: initialPath, ...rest }: Module) {
+// export default function({ store, navigate, location, path: initialPath, ...rest }: Module) {
+export default function({ store, navigate, state, provider, ...rest }: Module) {
const api: SubAPI = {
getQueryParam: key => {
const { customQueryParams } = store.getState();
@@ -142,6 +144,7 @@ export default function({ store, navigate, location, path: initialPath, ...rest
return {
api,
- state: initialUrlSupport({ store, navigate, location, path: initialPath, ...rest }),
+ // state: initialUrlSupport({ store, navigate, location, path: initialPath, ...rest }),
+ state: initialUrlSupport({ store, navigate, state, provider, ...rest }),
};
}
diff --git a/lib/api/src/tests/layout.test.js b/lib/api/src/tests/layout.test.js
index 9fa3000d6c83..b0109304db71 100644
--- a/lib/api/src/tests/layout.test.js
+++ b/lib/api/src/tests/layout.test.js
@@ -17,6 +17,7 @@ describe('layout API', () => {
ui: {
enableShortcuts: true,
sidebarAnimations: true,
+ docsMode: false,
},
layout: {
isToolshown: true,
diff --git a/lib/api/src/tests/url.test.js b/lib/api/src/tests/url.test.js
index 3c2845beed54..c1e8657c2f68 100644
--- a/lib/api/src/tests/url.test.js
+++ b/lib/api/src/tests/url.test.js
@@ -5,12 +5,14 @@ import initURL from '../modules/url';
jest.useFakeTimers();
describe('initial state', () => {
+ const viewMode = 'story';
+
it('redirects to /story/* if path is blank', () => {
const navigate = jest.fn();
const location = { search: null };
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location, viewMode } });
// Nothing unexpected in layout
expect(layout).toEqual({});
@@ -25,7 +27,7 @@ describe('initial state', () => {
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ isFullscreen: true });
});
@@ -36,7 +38,7 @@ describe('initial state', () => {
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ showNav: false });
});
@@ -47,7 +49,7 @@ describe('initial state', () => {
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ panelPosition: 'bottom' });
});
@@ -58,7 +60,7 @@ describe('initial state', () => {
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ panelPosition: 'right' });
});
@@ -69,7 +71,7 @@ describe('initial state', () => {
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ showPanel: false });
});
@@ -91,7 +93,7 @@ describe('initial state', () => {
const location = { search: qs.stringify(defaultLegacyParameters) };
const {
state: { layout, selectedPanel },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location, viewMode } });
// Nothing unexpected in layout
expect(layout).toEqual({});
@@ -111,7 +113,7 @@ describe('initial state', () => {
};
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ isFullscreen: true });
});
@@ -127,7 +129,7 @@ describe('initial state', () => {
};
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ showNav: false, showPanel: false });
});
@@ -142,7 +144,7 @@ describe('initial state', () => {
};
const {
state: { layout },
- } = initURL({ navigate, location });
+ } = initURL({ navigate, state: { location } });
expect(layout).toEqual({ panelPosition: 'right' });
});
@@ -158,7 +160,7 @@ describe('queryParams', () => {
},
getState: () => state,
};
- const { api } = initURL({ location: { search: '' }, navigate: jest.fn(), store });
+ const { api } = initURL({ state: { location: { search: '' } }, navigate: jest.fn(), store });
api.setQueryParams({ foo: 'bar' });
diff --git a/lib/api/src/typings.d.ts b/lib/api/src/typings.d.ts
index dffcbc4aa830..bba421507c41 100644
--- a/lib/api/src/typings.d.ts
+++ b/lib/api/src/typings.d.ts
@@ -1,2 +1,5 @@
declare module 'global';
declare module 'telejson';
+
+// provided by the webpack define plugin
+declare var DOCS_MODE: string | undefined;
diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js
index 17701b0e16cc..5290bf067a46 100644
--- a/lib/core/src/server/build-dev.js
+++ b/lib/core/src/server/build-dev.js
@@ -343,5 +343,6 @@ export async function buildDev({ packageJson, ...loadOptions }) {
...loadOptions,
packageJson,
configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
+ docsMode: !!cliOptions.docs,
});
}
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
index f7eb42542153..853edf9c5bc0 100644
--- a/lib/core/src/server/build-static.js
+++ b/lib/core/src/server/build-static.js
@@ -123,6 +123,7 @@ async function buildManager(configType, outputDir, configDir, options) {
configDir,
corePresets: [require.resolve('./manager/manager-preset.js')],
frameworkPresets: options.frameworkPresets,
+ docsMode: options.docsMode,
});
if (options.debugWebpack) {
@@ -203,5 +204,6 @@ export function buildStatic({ packageJson, ...loadOptions }) {
packageJson,
configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
+ docsMode: !!cliOptions.docs,
});
}
diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
index 801acc82f207..61ea25e2770f 100644
--- a/lib/core/src/server/cli/dev.js
+++ b/lib/core/src/server/cli/dev.js
@@ -36,6 +36,7 @@ async function getCLI(packageJson) {
.option('--quiet', 'Suppress verbose build output')
.option('--no-dll', 'Do not use dll reference')
.option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+ .option('--docs', 'Build a documentation-only site using addon-docs')
.parse(process.argv);
// Workaround the `-h` shorthand conflict.
diff --git a/lib/core/src/server/cli/prod.js b/lib/core/src/server/cli/prod.js
index 4e3ab1a1d02f..d20e410390f9 100644
--- a/lib/core/src/server/cli/prod.js
+++ b/lib/core/src/server/cli/prod.js
@@ -16,6 +16,7 @@ function getCLI(packageJson) {
.option('--loglevel [level]', 'Control level of logging during build')
.option('--no-dll', 'Do not use dll reference')
.option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+ .option('--docs', 'Build a documentation-only site using addon-docs')
.parse(process.argv);
logger.setLevel(program.loglevel);
diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js
index 2a5edd5d05d1..4d0af42b1acf 100644
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@@ -19,7 +19,16 @@ const coreDirName = path.dirname(require.resolve('@storybook/core/package.json')
const context = path.join(coreDirName, '../../node_modules');
const cacheDir = findCacheDir({ name: 'storybook' });
-export default ({ configDir, configType, entries, dll, outputDir, cache, babelOptions }) => {
+export default ({
+ configDir,
+ configType,
+ docsMode,
+ entries,
+ dll,
+ outputDir,
+ cache,
+ babelOptions,
+}) => {
const { raw, stringified } = loadEnv();
const isProd = configType === 'PRODUCTION';
@@ -63,6 +72,7 @@ export default ({ configDir, configType, entries, dll, outputDir, cache, babelOp
new DefinePlugin({
'process.env': stringified,
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+ DOCS_MODE: docsMode, // global docs mode
}),
// See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index cf5f338ad773..3a80a66cafeb 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -486,11 +486,13 @@ class Layout extends Component {
{isDragging ? : null}
{children({
mainProps: {
+ viewMode,
animate: !isDragging,
isFullscreen,
position: getMainPosition({ bounds, resizerNav, isNavHidden, isFullscreen, margin }),
},
previewProps: {
+ viewMode,
animate: !isDragging,
isFullscreen,
isToolshown,
@@ -506,6 +508,7 @@ class Layout extends Component {
}),
},
navProps: {
+ viewMode,
animate: !isDragging,
hidden: isNavHidden,
position: {
@@ -516,6 +519,7 @@ class Layout extends Component {
},
},
panelProps: {
+ viewMode,
animate: !isDragging,
align: options.panelPosition,
hidden: isPanelHidden,
diff --git a/lib/ui/src/index.js b/lib/ui/src/index.js
index 2a8ee365426f..d2831aff6e74 100644
--- a/lib/ui/src/index.js
+++ b/lib/ui/src/index.js
@@ -15,6 +15,8 @@ ThemeProvider.displayName = 'ThemeProvider';
HelmetProvider.displayName = 'HelmetProvider';
const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
+// eslint-disable-next-line no-undef
+const docsMode = !!DOCS_MODE; // webpack-injected
const Root = ({ provider }) => (
@@ -22,7 +24,12 @@ const Root = ({ provider }) => (
{locationData => (
-
+
{({ state }) => (
From c89042966b88893c04fee6f1968373f9cf6550b6 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Thu, 20 Jun 2019 12:42:46 +0800
Subject: [PATCH 146/371] Codemod to add component parameters to legacy stories
---
lib/codemod/README.md | 74 ++++++++++++-------
.../add-component-parameters.input.js | 44 +++++++++++
.../add-component-parameters.output.js | 64 ++++++++++++++++
.../add-component-parameters.test.js | 8 ++
.../transforms/add-component-parameters.js | 62 ++++++++++++++++
5 files changed, 227 insertions(+), 25 deletions(-)
create mode 100644 lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
create mode 100644 lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
create mode 100644 lib/codemod/src/transforms/add-component-parameters.js
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index 1f69564413fb..f319e19ffe41 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -9,8 +9,8 @@ It will help you migrate breaking changes & deprecations.
yarn add jscodeshift @storybook/codemod --dev
```
-- `@storybook/codemod` is our collection of codemod scripts.
-- `jscodeshift` is a tool we use to apply our codemods.
+- `@storybook/codemod` is our collection of codemod scripts.
+- `jscodeshift` is a tool we use to apply our codemods.
After running the migration commands, you can remove them from your `package.json`, if you added them.
@@ -65,23 +65,18 @@ Replaces the Info addon's deprecated `addWithInfo` API with the standard `withIn
Simple example:
```js
-storiesOf('Button').addWithInfo(
- 'simple usage',
- 'This is the basic usage of the button.',
- () => (
-
- )
-)
+storiesOf('Button').addWithInfo('simple usage', 'This is the basic usage of the button.', () => (
+
+));
```
Becomes
```js
-storiesOf('Button').add('simple usage', withInfo(
- 'This is the basic usage of the button.'
-)(() => (
-
-)))
+storiesOf('Button').add(
+ 'simple usage',
+ withInfo('This is the basic usage of the button.')(() => )
+);
```
With options example:
@@ -90,21 +85,50 @@ With options example:
storiesOf('Button').addWithInfo(
'simple usage (disable source)',
'This is the basic usage of the button.',
- () => (
-
- ),
+ () => ,
{ source: false, inline: true }
-)
+);
```
Becomes
```js
-storiesOf('Button').add('simple usage (disable source)', withInfo({
- text: 'This is the basic usage of the button.',
- source: false,
- inline: true
-})(() => (
-
-)))
+storiesOf('Button').add(
+ 'simple usage (disable source)',
+ withInfo({
+ text: 'This is the basic usage of the button.',
+ source: false,
+ inline: true,
+ })(() => )
+);
```
+
+### add-component-parameters
+
+This tries to smartly adds "component" parameters to all your existing stories
+for use in SB Docs.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/add-component-parameters.js . --ignore-pattern "node_modules|dist"
+```
+
+For example:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module).add('story', () => );
+```
+
+Becomes:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module)
+ .addParameters({ component: Button })
+ .add('story', () => );
+```
+
+Heuristics:
+
+- The storiesOf "kind" name must be Button
+- Button must be imported in the file
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
new file mode 100644
index 000000000000..8ec32d74ebe2
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).add('basic', () => );
+
+storiesOf('Button').add('no module', () => );
+
+storiesOf('Button', module).add('with story parameters', () => , {
+ header: false,
+ inline: true,
+});
+
+storiesOf('Button', module)
+ .addParameters({ foo: 1 })
+ .add('with kind parameters', () => );
+
+storiesOf('Button', module)
+ .addParameters({ component: Button })
+ .add('with existing component parameters', () => );
+
+storiesOf('Button', module).add('complex story', () => (
+
+
+
+
+));
+
+storiesOf('Root|Some/Button', module).add('with path', () => );
+
+storiesOf('Some.Button', module).add('with dot-path', () => );
+
+storiesOf('Some.Button', module)
+ .addDecorator(withKnobs)
+ .add('with decorator', () => );
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).add('non-default component export', () => );
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
new file mode 100644
index 000000000000..c196d5e03a1c
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
@@ -0,0 +1,64 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).addParameters({
+ component: Button
+}).add('basic', () => );
+
+storiesOf('Button').addParameters({
+ component: Button
+}).add('no module', () => );
+
+storiesOf('Button', module).addParameters({
+ component: Button
+}).add('with story parameters', () => , {
+ header: false,
+ inline: true,
+});
+
+storiesOf('Button', module).addParameters({
+ component: Button
+})
+ .addParameters({ foo: 1 })
+ .add('with kind parameters', () => );
+
+storiesOf('Button', module).addParameters({
+ component: Button
+})
+ .addParameters({ component: Button })
+ .add('with existing component parameters', () => );
+
+storiesOf('Button', module).addParameters({
+ component: Button
+}).add('complex story', () => (
+
+
+
+
+));
+
+storiesOf('Root|Some/Button', module).addParameters({
+ component: Button
+}).add('with path', () => );
+
+storiesOf('Some.Button', module).addParameters({
+ component: Button
+}).add('with dot-path', () => );
+
+storiesOf('Some.Button', module).addParameters({
+ component: Button
+})
+ .addDecorator(withKnobs)
+ .add('with decorator', () => );
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).addParameters({
+ component: action
+}).add('non-default component export', () => );
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => );
diff --git a/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
new file mode 100644
index 000000000000..6ceb09621624
--- /dev/null
+++ b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
@@ -0,0 +1,8 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+defineTest(
+ __dirname,
+ 'add-component-parameters',
+ null,
+ 'add-component-parameters/add-component-parameters'
+);
diff --git a/lib/codemod/src/transforms/add-component-parameters.js b/lib/codemod/src/transforms/add-component-parameters.js
new file mode 100644
index 000000000000..6a26c7794fc3
--- /dev/null
+++ b/lib/codemod/src/transforms/add-component-parameters.js
@@ -0,0 +1,62 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => );
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ * .addParameters({ component: Button })
+ * .add('story', () => );
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+export default function transformer(file, api) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+
+ // Create a dictionary whose keys are all the named imports in the file.
+ // For instance:
+ //
+ // import foo from 'foo';
+ // import { bar, baz } from 'zoo';
+ //
+ // => { foo: true, bar: true, baz: true }
+ const importMap = {};
+ root.find(j.ImportDeclaration).forEach(imp =>
+ imp.node.specifiers.forEach(spec => {
+ importMap[spec.local.name] = true;
+ })
+ );
+
+ function getLeafName(string) {
+ const parts = string.split(/\/|\.|\|/);
+ return parts[parts.length - 1];
+ }
+
+ function addComponentParameter(call) {
+ const { node } = call;
+ const leafName = getLeafName(node.arguments[0].value);
+ return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [
+ j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))]),
+ ]);
+ }
+
+ const storiesOfCalls = root
+ .find(j.CallExpression)
+ .filter(call => call.node.callee.name === 'storiesOf')
+ .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+ .filter(call => {
+ const leafName = getLeafName(call.node.arguments[0].value);
+ return importMap[leafName];
+ })
+ .replaceWith(addComponentParameter);
+
+ return root.toSource();
+}
From 20522b4a0528c32b3590a959f6409708ca644a62 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Thu, 20 Jun 2019 12:52:12 +0800
Subject: [PATCH 147/371] Run codemod on storybook source tree
---
.../required_with_context/Button.stories.js | 3 +++
.../required_with_context/Welcome.stories.js | 6 +++++-
.../basics/tooltip/Tooltip.stories.js | 3 +++
.../basics/tooltip/TooltipLinkList.stories.js | 3 +++
.../basics/tooltip/TooltipMessage.stories.js | 3 +++
.../basics/tooltip/TooltipNote.stories.js | 3 +++
.../basics/tooltip/WithTooltip.stories.js | 3 +++
.../storybook/stories/index.js | 8 +++++--
.../src/stories/index.stories.js | 3 +++
.../cra-kitchen-sink/src/stories/welcome.js | 6 +++++-
examples/cra-react15/src/stories/index.js | 9 +++++++-
.../stories/addon-centered.stories.js | 3 +++
.../src/stories/addon-actions.stories.js | 8 ++++---
.../src/stories/addon-knobs.stories.js | 3 +++
.../marko-cli/src/stories/index.stories.js | 21 ++++++++++++++++---
.../src/stories/addon-centered.stories.js | 3 +++
.../src/stories/index.stories.js | 13 +++++++++---
.../stories/addon-a11y.stories.js | 9 ++++++++
.../stories/addon-info.stories.js | 3 +++
.../stories/addon-knobs.stories.js | 3 +++
.../stories/other-demo.stories.js | 11 +++++++---
.../src/stories/addon-centered.stories.js | 3 +++
.../src/stories/index.stories.js | 9 +++++++-
.../src/stories/addon-centered.stories.js | 3 +++
.../src/stories/addon-centered.stories.js | 3 +++
.../vue-kitchen-sink/src/stories/index.js | 20 ++++++++++++------
.../src/components/layout/layout.stories.js | 6 ++++++
lib/ui/src/components/panel/panel.stories.js | 3 +++
.../src/components/preview/preview.stories.js | 3 +++
.../sidebar/SidebarSubheading.stories.js | 8 ++++---
lib/ui/src/settings/about.stories.js | 3 +++
31 files changed, 161 insertions(+), 27 deletions(-)
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
index e63d097b98be..6dbfd97a1cdd 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
@@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
storiesOf('Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => Hello Button )
.add('with some emoji', () => (
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index 2837b632c0aa..abd9b87b39b4 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -4,4 +4,8 @@ import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
-storiesOf('Welcome', module).add('to Storybook', () => );
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => );
diff --git a/docs/src/new-components/basics/tooltip/Tooltip.stories.js b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
index 83750d375140..9c0bfb7094e7 100644
--- a/docs/src/new-components/basics/tooltip/Tooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
@@ -16,6 +16,9 @@ const Content = styled.div`
`;
storiesOf('basics/tooltip/Tooltip', module)
+ .addParameters({
+ component: Tooltip,
+ })
.add('basic, default', () => (
Text
diff --git a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
index c848e50a0de4..fe563238920f 100644
--- a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
@@ -13,6 +13,9 @@ export const links = [
];
storiesOf('basics/tooltip/TooltipLinkList', module)
+ .addParameters({
+ component: TooltipLinkList,
+ })
.addDecorator(storyFn => (
diff --git a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
index 28a21b36b3a4..ae615685aefb 100644
--- a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
import TooltipMessage from './TooltipMessage';
storiesOf('basics/tooltip/TooltipMessage', module)
+ .addParameters({
+ component: TooltipMessage,
+ })
.addDecorator(storyFn => (
diff --git a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
index 990b43c1647b..ea450f10121a 100644
--- a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
import TooltipNote from './TooltipNote';
storiesOf('basics/tooltip/TooltipNote', module)
+ .addParameters({
+ component: TooltipNote,
+ })
.addDecorator(storyFn => (
diff --git a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
index 8f5fa1089ddf..685fca47716e 100644
--- a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
@@ -46,6 +46,9 @@ Tooltip.defaultProps = {
};
storiesOf('basics/tooltip/WithTooltip', module)
+ .addParameters({
+ component: WithTooltip,
+ })
.addDecorator(storyFn => (
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
index 1cc3e1352dc1..b1e80c977bd7 100644
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ b/examples-native/crna-kitchen-sink/storybook/stories/index.js
@@ -20,7 +20,9 @@ addParameters({
],
});
-storiesOf('Welcome', module).add('to Storybook', () => , {
+storiesOf('Welcome', module).addParameters({
+ component: Welcome
+}).add('to Storybook', () => , {
notes: `
# Markdown!\n
* List Item
@@ -28,7 +30,9 @@ storiesOf('Welcome', module).add('to Storybook', () => (
);
storiesOf('Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => Hello Button , {
options: { selectedPanel: 'storybook/actions/panel' },
})
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
index 9610f12d04e9..936d40e39e31 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -3,4 +3,8 @@ import { Welcome } from '@storybook/react/demo';
import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
-storiesOf('Welcome', module).add('to Storybook', () => );
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => );
diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js
index aa04241802db..9813c023564c 100644
--- a/examples/cra-react15/src/stories/index.js
+++ b/examples/cra-react15/src/stories/index.js
@@ -6,9 +6,16 @@ import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
-storiesOf('Welcome', module).add('to Storybook', () => );
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => );
storiesOf('Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => Hello Button )
.add('with some emoji', () => (
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index f6a46d022c8c..dd08c80cd26e 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -3,6 +3,9 @@ import { storiesOf } from '@storybook/ember';
import Centered from '@storybook/addon-centered/ember';
storiesOf('Addon|Centered', module)
+ .addParameters({
+ component: Centered,
+ })
.addDecorator(Centered)
.add('button', () => ({
template: hbs`A Button `,
diff --git a/examples/marko-cli/src/stories/addon-actions.stories.js b/examples/marko-cli/src/stories/addon-actions.stories.js
index 73d25b05d3f6..fe094b3f4acd 100644
--- a/examples/marko-cli/src/stories/addon-actions.stories.js
+++ b/examples/marko-cli/src/stories/addon-actions.stories.js
@@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/marko';
import { action } from '@storybook/addon-actions';
import Button from '../components/action-button/index.marko';
-storiesOf('Addons|Actions/Button', module).add('Simple', () =>
- Button.renderSync({ click: action('action logged!') })
-);
+storiesOf('Addons|Actions/Button', module)
+ .addParameters({
+ component: Button,
+ })
+ .add('Simple', () => Button.renderSync({ click: action('action logged!') }));
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
index 5c44b59e9fcc..f6236d9862a0 100644
--- a/examples/marko-cli/src/stories/addon-knobs.stories.js
+++ b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -3,6 +3,9 @@ import { withKnobs, text, number } from '@storybook/addon-knobs';
import Hello from '../components/hello/index.marko';
storiesOf('Addons|Knobs/Hello', module)
+ .addParameters({
+ component: Hello,
+ })
.addParameters({ options: { panelPosition: 'right' } })
.addDecorator(withKnobs)
.add('Simple', () => {
diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
index 8ef9e6d38cb3..9437d7ff170e 100644
--- a/examples/marko-cli/src/stories/index.stories.js
+++ b/examples/marko-cli/src/stories/index.stories.js
@@ -4,12 +4,27 @@ import ClickCount from '../components/click-count/index.marko';
import StopWatch from '../components/stop-watch/index.marko';
import Welcome from '../components/welcome/index.marko';
-storiesOf('Main|Welcome', module).add('welcome', () => Welcome.renderSync({}));
+storiesOf('Main|Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('welcome', () => Welcome.renderSync({}));
storiesOf('Main|Hello', module)
+ .addParameters({
+ component: Hello,
+ })
.add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
.add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
-storiesOf('Main|ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
+storiesOf('Main|ClickCount', module)
+ .addParameters({
+ component: ClickCount,
+ })
+ .add('Simple', () => ClickCount.renderSync({}));
-storiesOf('Main|StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
+storiesOf('Main|StopWatch', module)
+ .addParameters({
+ component: StopWatch,
+ })
+ .add('Simple', () => StopWatch.renderSync({}));
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
index e97deabdef51..3623a83e701b 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
@@ -7,6 +7,9 @@ import Centered from '@storybook/addon-centered/mithril';
import Button from '../Button';
storiesOf('Addons|Centered', module)
+ .addParameters({
+ component: Centered,
+ })
.addDecorator(Centered)
.add('button', () => ({
view: () => A button ,
diff --git a/examples/mithril-kitchen-sink/src/stories/index.stories.js b/examples/mithril-kitchen-sink/src/stories/index.stories.js
index a0952e562bfd..fb5175691afd 100644
--- a/examples/mithril-kitchen-sink/src/stories/index.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/index.stories.js
@@ -7,11 +7,18 @@ import { linkTo } from '@storybook/addon-links';
import Button from '../Button';
import Welcome from '../Welcome';
-storiesOf('Welcome', module).add('to Storybook', () => ({
- view: () => m(Welcome, { showApp: linkTo('Button') }),
-}));
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => ({
+ view: () => m(Welcome, { showApp: linkTo('Button') }),
+ }));
storiesOf('Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => ({
view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
}))
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index a4717e3ec9e4..c8e18e16662f 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -12,6 +12,9 @@ const image = 'http://placehold.it/350x150';
const href = 'javascript:void 0';
storiesOf('Addons|A11y/BaseButton', module)
+ .addParameters({
+ component: BaseButton,
+ })
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => )
.add('Label', () => )
@@ -27,6 +30,9 @@ storiesOf('Addons|A11y/BaseButton', module)
));
storiesOf('Addons|A11y/Button', module)
+ .addParameters({
+ component: Button,
+ })
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Default', () => )
.add('Content', () => )
@@ -35,6 +41,9 @@ storiesOf('Addons|A11y/Button', module)
.add('Invalid contrast', () => );
storiesOf('Addons|A11y/Form', module)
+ .addParameters({
+ component: Form,
+ })
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
.add('Without Label', () => (
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index fd7d686e19e0..b1b215f05c84 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -229,6 +229,9 @@ storiesOf('Addons|Info/Options.styles', module)
});
storiesOf('Addons|Info/Options.TableComponent', module)
+ .addParameters({
+ component: TableComponent,
+ })
.addDecorator(withInfo)
.add('Use a custom component for the table', () => , {
info: {
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index 932df0c432e6..c6f24d0b8615 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -42,6 +42,9 @@ let injectedItems = [];
let injectedIsLoading = false;
storiesOf('Addons|Knobs.withKnobs', module)
+ .addParameters({
+ component: withKnobs,
+ })
.addDecorator(withKnobs)
.add('tweaks static values', () => {
const name = text('Name', 'Storyteller');
diff --git a/examples/official-storybook/stories/other-demo.stories.js b/examples/official-storybook/stories/other-demo.stories.js
index 3d4bea842eae..80b486a46400 100644
--- a/examples/official-storybook/stories/other-demo.stories.js
+++ b/examples/official-storybook/stories/other-demo.stories.js
@@ -6,11 +6,16 @@ import { linkTo } from '@storybook/addon-links';
import { Button, Welcome } from '@storybook/react/demo';
-storiesOf('Other|Demo/Welcome', module).add('to Storybook', () => (
-
-));
+storiesOf('Other|Demo/Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => );
storiesOf('Other|Demo/Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => Hello Button )
.add('with some emoji', () => (
diff --git a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
index 38b9820d043a..dd02c14b3c34 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
@@ -7,5 +7,8 @@ import Centered from '@storybook/addon-centered/preact';
import Button from '../Button';
storiesOf('Addons|Centered', module)
+ .addParameters({
+ component: Centered,
+ })
.addDecorator(Centered)
.add('Button', () => A button );
diff --git a/examples/preact-kitchen-sink/src/stories/index.stories.js b/examples/preact-kitchen-sink/src/stories/index.stories.js
index 4c64703c0e99..7f64391f913a 100644
--- a/examples/preact-kitchen-sink/src/stories/index.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/index.stories.js
@@ -9,9 +9,16 @@ import { linkTo } from '@storybook/addon-links';
import Welcome from '../Welcome';
import Button from '../Button';
-storiesOf('Welcome', module).add('to Storybook', () => );
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('to Storybook', () => );
storiesOf('Button', module)
+ .addParameters({
+ component: Button,
+ })
.add('with text', () => Hello Button )
.add('with some emoji', () => (
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
index d350f4e3f09a..51fac4c214b1 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
import Button from '../components/Button.svelte';
storiesOf('Addon|Centered', module)
+ .addParameters({
+ component: Centered,
+ })
.addDecorator(Centered)
.add('rounded', () => ({
Component: Button,
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
index 7fb6567a583f..83a0ad0ccf39 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -4,6 +4,9 @@ import Centered from '@storybook/addon-centered/vue';
import MyButton from './Button.vue';
storiesOf('Addon|Centered', module)
+ .addParameters({
+ component: Centered,
+ })
.addDecorator(Centered)
.add('rounded', () => ({
components: { MyButton },
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
index fa9448a5b0d7..a89f9ee6e3b6 100644
--- a/examples/vue-kitchen-sink/src/stories/index.js
+++ b/examples/vue-kitchen-sink/src/stories/index.js
@@ -4,13 +4,21 @@ import { linkTo } from '@storybook/addon-links';
import Welcome from './Welcome.vue';
import App from '../App.vue';
-storiesOf('Welcome', module).add('Welcome', () => ({
- render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
-}));
+storiesOf('Welcome', module)
+ .addParameters({
+ component: Welcome,
+ })
+ .add('Welcome', () => ({
+ render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
+ }));
-storiesOf('App', module).add('App', () => ({
- render: h => h(App),
-}));
+storiesOf('App', module)
+ .addParameters({
+ component: App,
+ })
+ .add('App', () => ({
+ render: h => h(App),
+ }));
storiesOf('Button', module)
// Works if Vue.component is called in the config.js in .storybook
diff --git a/lib/ui/src/components/layout/layout.stories.js b/lib/ui/src/components/layout/layout.stories.js
index 9d9eab205cb3..b813208e58ab 100644
--- a/lib/ui/src/components/layout/layout.stories.js
+++ b/lib/ui/src/components/layout/layout.stories.js
@@ -137,6 +137,9 @@ const realProps = {
};
storiesOf('UI|Layout/Desktop', module)
+ .addParameters({
+ component: Desktop,
+ })
.addDecorator(withKnobs)
.addDecorator(storyFn => {
const mocked = boolean('mock', true);
@@ -183,6 +186,9 @@ storiesOf('UI|Layout/Desktop', module)
));
storiesOf('UI|Layout/Mobile', module)
+ .addParameters({
+ component: Mobile,
+ })
.addDecorator(withKnobs)
.addDecorator(storyFn => {
const mocked = boolean('mock', true);
diff --git a/lib/ui/src/components/panel/panel.stories.js b/lib/ui/src/components/panel/panel.stories.js
index b271c1289b16..6c59dfafcbbc 100644
--- a/lib/ui/src/components/panel/panel.stories.js
+++ b/lib/ui/src/components/panel/panel.stories.js
@@ -32,6 +32,9 @@ const toggleVisibility = action('toggleVisibility');
const togglePosition = action('togglePosition');
storiesOf('UI|Panel', module)
+ .addParameters({
+ component: Panel,
+ })
.add('default', () => (
[]} />)
.add('with tabs', () => );
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
index b56bfb19ff33..0f5c2a6b3412 100644
--- a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
@@ -3,6 +3,8 @@ import { storiesOf } from '@storybook/react';
import SidebarSubheading from './SidebarSubheading';
-storiesOf('UI|Sidebar/SidebarSubheading', module).add('default', () => (
- Subheading
-));
+storiesOf('UI|Sidebar/SidebarSubheading', module)
+ .addParameters({
+ component: SidebarSubheading,
+ })
+ .add('default', () => Subheading );
diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js
index a2d70c73d108..ceaf3e55ca5b 100644
--- a/lib/ui/src/settings/about.stories.js
+++ b/lib/ui/src/settings/about.stories.js
@@ -10,6 +10,9 @@ const info = {
const actions = createActions('onClose');
storiesOf('UI|Settings/AboutScreen', module)
+ .addParameters({
+ component: AboutScreen,
+ })
.addDecorator(s => (
Date: Thu, 20 Jun 2019 15:00:51 +0800
Subject: [PATCH 148/371] Doc blocks review cleanup
---
addons/docs/src/blocks/Description.tsx | 11 +++++------
addons/docs/src/blocks/DocsContext.ts | 10 ++++++++++
addons/docs/src/blocks/Props.tsx | 4 ++--
addons/docs/src/blocks/shared.ts | 1 +
addons/docs/src/lib/getPropDefs.ts | 3 ++-
lib/components/src/blocks/IFrame.tsx | 10 +---------
6 files changed, 21 insertions(+), 18 deletions(-)
diff --git a/addons/docs/src/blocks/Description.tsx b/addons/docs/src/blocks/Description.tsx
index 2cd715b22b4e..e12a1ea5f9f2 100644
--- a/addons/docs/src/blocks/Description.tsx
+++ b/addons/docs/src/blocks/Description.tsx
@@ -2,7 +2,7 @@
import React from 'react';
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
-import { CURRENT_SELECTION } from './shared';
+import { Component, CURRENT_SELECTION } from './shared';
export enum DescriptionType {
INFO = 'info',
@@ -11,16 +11,15 @@ export enum DescriptionType {
AUTO = 'auto',
}
+type Notes = string | any;
+type Info = string | any;
+
interface DescriptionProps {
- of?: any;
+ of?: '.' | Component;
type?: DescriptionType;
markdown?: string;
}
-type Notes = string | any;
-type Info = string | any;
-type Component = any;
-
const getNotes = (notes?: Notes) =>
notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text);
diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts
index 5e1b5b04e9a9..26efed04813a 100644
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@@ -4,6 +4,16 @@ export interface DocsContextProps {
id?: string;
selectedKind?: string;
selectedStory?: string;
+
+ /**
+ * mdxKind is a statically-generated "kind" that corresponds to the
+ * component that's being documented in the MDX file, It's combined
+ * with the MDX story name `
... ` to
+ * generate a storyId. In the case that the user is viewing a non-MDX
+ * story, the value of `mdxKind` will be the currently-selected kind.
+ * (I can't remember the corner case in which using the currentl-selected
+ * kind breaks down in MDX-defined stories, but there is one!)
+ */
mdxKind?: string;
parameters?: any;
storyStore?: any;
diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index 1104bbb40b3b..53b396cdbc14 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -1,12 +1,12 @@
import React from 'react';
import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
-import { CURRENT_SELECTION } from './shared';
+import { Component, CURRENT_SELECTION } from './shared';
import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
interface PropsProps {
exclude?: string[];
- of: any;
+ of: '.' | Component;
}
const inferPropDefs = (framework: string): PropDefGetter | null => {
diff --git a/addons/docs/src/blocks/shared.ts b/addons/docs/src/blocks/shared.ts
index 8a9a3eae6536..61d2a7f93f5f 100644
--- a/addons/docs/src/blocks/shared.ts
+++ b/addons/docs/src/blocks/shared.ts
@@ -1 +1,2 @@
export const CURRENT_SELECTION = '.';
+export type Component = any;
diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts
index 80db3f671e4a..2837e2058475 100644
--- a/addons/docs/src/lib/getPropDefs.ts
+++ b/addons/docs/src/lib/getPropDefs.ts
@@ -2,12 +2,13 @@
import PropTypes from 'prop-types';
import { PropDef } from '@storybook/components';
+import { Component } from '../blocks/shared';
interface PropDefMap {
[p: string]: PropDef;
}
-export type PropDefGetter = (type: any) => PropDef[] | null;
+export type PropDefGetter = (type: Component) => PropDef[] | null;
const propTypesMap = new Map();
diff --git a/lib/components/src/blocks/IFrame.tsx b/lib/components/src/blocks/IFrame.tsx
index e17a94cd4763..be8e0dc60ba2 100644
--- a/lib/components/src/blocks/IFrame.tsx
+++ b/lib/components/src/blocks/IFrame.tsx
@@ -27,7 +27,7 @@ export class IFrame extends React.Component
{
}
shouldComponentUpdate(nextProps: IFrameProps) {
- const { src, scale } = nextProps;
+ const { scale } = nextProps;
// eslint-disable-next-line react/destructuring-assignment
if (scale !== this.props.scale) {
this.setIframeBodyStyle({
@@ -61,11 +61,3 @@ export class IFrame extends React.Component {
);
}
}
-
-// IFrame.propTypes = {
-// id: PropTypes.string.isRequired,
-// title: PropTypes.string.isRequired,
-// src: PropTypes.string.isRequired,
-// allowFullScreen: PropTypes.bool.isRequired,
-// scale: PropTypes.number.isRequired,
-// };
From 291e8fa85c59bd636fde6271248f1ee1be13f579 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 20 Jun 2019 14:25:32 +0200
Subject: [PATCH 149/371] CHANGE markdown code syntax-highlighter to never
format, since it will be indented correctly already
---
addons/info/src/components/markdown/code.js | 2 +-
addons/notes/src/Panel.tsx | 8 +++++-
.../stories/addon-info.stories.js | 24 ++++++++++++++++++
.../stories/addon-notes.stories.js | 25 +++++++++++++++++++
4 files changed, 57 insertions(+), 2 deletions(-)
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
index 3bd41509241c..4e6b24ba7de2 100644
--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@@ -5,7 +5,7 @@ import { ThemeProvider, convert } from '@storybook/theming';
const Code = ({ code, language = 'plaintext', ...rest }) => (
-
+
{code}
diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
index da8f76df14ce..5daaaa7ba2fa 100644
--- a/addons/notes/src/Panel.tsx
+++ b/addons/notes/src/Panel.tsx
@@ -68,7 +68,13 @@ export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighl
// className: "lang-jsx"
const language = className.split('-');
return (
-
+
{children}
);
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index fd7d686e19e0..b3c552ca01cd 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -74,6 +74,30 @@ Sometimes you might want to manually include some \`code\` examples:
const Button = () => ;
~~~
+classes in javascript
+
+~~~javascript
+export class FromComponent {
+ form = new FormControl({
+ searchTerm: new FromControl(''),
+ searchDate: new FromControl(''),
+ endDate: new FromControl(''),
+ })
+}
+~~~
+
+html with special formatting
+
+~~~html
+
+
+
+~~~
+
+
Maybe include a [link](http://storybook.js.org) to your project as well.
`;
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index edccf6d995e0..0cc5fe6facf9 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -30,6 +30,31 @@ storiesOf('Addons|Notes', module)
}
)
~~~
+
+
+## Code examples for syntax-highlighter to deal with
+
+### classes in javascript
+~~~javascript
+export class FromComponent {
+ form = new FormControl({
+ searchTerm: new FromControl(''),
+ searchDate: new FromControl(''),
+ endDate: new FromControl(''),
+ })
+}
+~~~
+
+### html with special formatting
+~~~html
+
+
+
+~~~
+
`;
const markdownTable = `
From a31abbcc437453d682688de87ce926875b520ca7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Thu, 20 Jun 2019 14:28:41 +0200
Subject: [PATCH 150/371] FIX snapshots
---
addons/info/src/__snapshots__/index.test.js.snap | 4 ++--
.../stories/__snapshots__/addon-docs.stories.storyshot | 7 -------
2 files changed, 2 insertions(+), 9 deletions(-)
delete mode 100644 examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index 64aa1bba1d58..c590f5aab769 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -1331,7 +1331,7 @@ exports[`addon Info should render component description if story kind matches co
bordered={true}
className={null}
copyable={true}
- format={true}
+ format={false}
language="js"
padded={false}
>
@@ -5888,7 +5888,7 @@ exports[`addon Info should render component description if story name matches co
bordered={true}
className={null}
copyable={true}
- format={true}
+ format={false}
language="js"
padded={false}
>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
deleted file mode 100644
index e7ee2efa9cd9..000000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Docs default 1`] = `
-
- Click the docs tab to see the docs
-
-`;
From 063792bfcf0aac9504eeaa6dcf55ddf74bfd0428 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Fri, 21 Jun 2019 11:32:28 +0900
Subject: [PATCH 151/371] chore: add tsconfig to addon-events
---
addons/events/tsconfig.json | 13 +++++++++++++
1 file changed, 13 insertions(+)
create mode 100644 addons/events/tsconfig.json
diff --git a/addons/events/tsconfig.json b/addons/events/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/events/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "types": ["webpack-env"]
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "src/__tests__/**/*"
+ ]
+}
From 1d0821f4c14cb276ea81769cb0b81b8c1929b4b7 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Fri, 21 Jun 2019 12:01:50 +0900
Subject: [PATCH 152/371] chore: migrate src of addon-events to Typescript
---
addons/events/package.json | 2 +-
.../src/components/{Event.js => Event.tsx} | 18 +++++++++---------
.../src/components/{Panel.js => Panel.tsx} | 10 +++++-----
.../events/src/{constants.js => constants.ts} | 0
addons/events/src/{index.js => index.ts} | 14 +++++++-------
addons/events/src/{manager.js => manager.tsx} | 3 +--
addons/events/src/typings.d.ts | 2 ++
7 files changed, 25 insertions(+), 24 deletions(-)
rename addons/events/src/components/{Event.js => Event.tsx} (92%)
rename addons/events/src/components/{Panel.js => Panel.tsx} (85%)
rename addons/events/src/{constants.js => constants.ts} (100%)
rename addons/events/src/{index.js => index.ts} (79%)
rename addons/events/src/{manager.js => manager.tsx} (68%)
create mode 100644 addons/events/src/typings.d.ts
diff --git a/addons/events/package.json b/addons/events/package.json
index 146314582b96..ebe6edc27aaa 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -19,7 +19,7 @@
},
"license": "MIT",
"main": "dist/index.js",
- "jsnext:main": "src/index.js",
+ "types": "dist/index.d.ts",
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.tsx
similarity index 92%
rename from addons/events/src/components/Event.js
rename to addons/events/src/components/Event.tsx
index 7e3634959479..4ac0732b88e3 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.tsx
@@ -24,7 +24,7 @@ const StyledTextarea = styled(Textarea)(
minHeight: '32px',
resize: 'vertical',
},
- ({ shown }) =>
+ ({ shown }: any) =>
shown
? {}
: {
@@ -67,7 +67,7 @@ const Label = styled.label({
textAlign: 'right',
width: 100,
fontWeight: '600',
-});
+} as any);
const Wrapper = styled.div({
display: 'flex',
@@ -77,7 +77,7 @@ const Wrapper = styled.div({
width: '100%',
});
-function getJSONFromString(str) {
+function getJSONFromString(str: any) {
try {
return JSON.parse(str);
} catch (e) {
@@ -85,7 +85,7 @@ function getJSONFromString(str) {
}
}
-class Item extends Component {
+class Item extends Component {
static propTypes = {
name: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
@@ -98,12 +98,12 @@ class Item extends Component {
payload: {},
};
- state = {
+ state: any = {
isTextAreaShowed: false,
};
- onChange = ({ target: { value } }) => {
- const newState = {
+ onChange = ({ target: { value } }: any) => {
+ const newState: any = {
payloadString: value,
};
@@ -128,12 +128,12 @@ class Item extends Component {
};
onToggleEditClick = () => {
- this.setState(({ isTextAreaShowed }) => ({
+ this.setState(({ isTextAreaShowed }: any) => ({
isTextAreaShowed: !isTextAreaShowed,
}));
};
- static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
+ static getDerivedStateFromProps = ({ payload }: any, { prevPayload }: any) => {
if (!isEqual(payload, prevPayload)) {
const payloadString = json.plain(payload);
const refinedPayload = getJSONFromString(payloadString);
diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.tsx
similarity index 85%
rename from addons/events/src/components/Panel.js
rename to addons/events/src/components/Panel.tsx
index 4c37e0727a50..38b391c0098d 100644
--- a/addons/events/src/components/Panel.js
+++ b/addons/events/src/components/Panel.tsx
@@ -13,7 +13,7 @@ const Wrapper = styled.div({
minHeight: '100%',
});
-export default class EventsPanel extends Component {
+export default class EventsPanel extends Component {
static propTypes = {
active: PropTypes.bool.isRequired,
api: PropTypes.shape({
@@ -23,7 +23,7 @@ export default class EventsPanel extends Component {
}).isRequired,
};
- state = {
+ state: any = {
events: [],
};
@@ -39,11 +39,11 @@ export default class EventsPanel extends Component {
api.off(EVENTS.ADD, this.onAdd);
}
- onAdd = events => {
+ onAdd = (events: any) => {
this.setState({ events });
};
- onEmit = event => {
+ onEmit = (event: any) => {
const { api } = this.props;
api.emit(EVENTS.EMIT, event);
@@ -54,7 +54,7 @@ export default class EventsPanel extends Component {
const { active } = this.props;
return active ? (
- {events.map(event => (
+ {events.map((event: any) => (
))}
diff --git a/addons/events/src/constants.js b/addons/events/src/constants.ts
similarity index 100%
rename from addons/events/src/constants.js
rename to addons/events/src/constants.ts
diff --git a/addons/events/src/index.js b/addons/events/src/index.ts
similarity index 79%
rename from addons/events/src/index.js
rename to addons/events/src/index.ts
index 31eb1960e36f..4c77147d4cda 100644
--- a/addons/events/src/index.js
+++ b/addons/events/src/index.ts
@@ -4,10 +4,10 @@ import deprecate from 'util-deprecate';
import { EVENTS } from './constants';
-let prevEvents;
-let currentEmit;
+let prevEvents: any;
+let currentEmit: any;
-const onEmit = event => {
+const onEmit = (event: any) => {
currentEmit(event.name, event.payload);
};
@@ -21,7 +21,7 @@ const subscription = () => {
};
};
-const addEvents = ({ emit, events }) => {
+const addEvents = ({ emit, events }: any) => {
if (prevEvents !== events) {
addons.getChannel().emit(EVENTS.ADD, events);
prevEvents = events;
@@ -30,16 +30,16 @@ const addEvents = ({ emit, events }) => {
addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
};
-const WithEvents = deprecate(({ children, ...options }) => {
+const WithEvents = deprecate(({ children, ...options }: any) => {
addEvents(options);
return children;
}, ` usage is deprecated, use .addDecorator(withEvents({emit, events})) instead`);
-export default options => {
+export default (options: any) => {
if (options.children) {
return WithEvents(options);
}
- return storyFn => {
+ return (storyFn: any) => {
addEvents(options);
return storyFn();
};
diff --git a/addons/events/src/manager.js b/addons/events/src/manager.tsx
similarity index 68%
rename from addons/events/src/manager.js
rename to addons/events/src/manager.tsx
index 6d8bea634686..f6ebba0f92bb 100644
--- a/addons/events/src/manager.js
+++ b/addons/events/src/manager.tsx
@@ -8,8 +8,7 @@ export function register() {
addons.register(ADDON_ID, api => {
addons.addPanel(PANEL_ID, {
title: 'Events',
- // eslint-disable-next-line react/prop-types
- render: ({ active, key }) => ,
+ render: ({ active, key }: any) => ,
});
});
}
diff --git a/addons/events/src/typings.d.ts b/addons/events/src/typings.d.ts
new file mode 100644
index 000000000000..d6932d989ba0
--- /dev/null
+++ b/addons/events/src/typings.d.ts
@@ -0,0 +1,2 @@
+declare module 'react-lifecycles-compat';
+declare module 'format-json';
From bb301f8589803dec4738f80b805ee3f5a95baa74 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Fri, 21 Jun 2019 19:23:32 +0800
Subject: [PATCH 153/371] Add docgen commments for each of the doc block
components
---
lib/components/src/blocks/ColorPalette.tsx | 8 ++++++++
lib/components/src/blocks/Description.tsx | 4 ++++
lib/components/src/blocks/DocsPage.tsx | 5 +++++
lib/components/src/blocks/IconGallery.tsx | 6 ++++++
lib/components/src/blocks/Preview.tsx | 5 +++++
lib/components/src/blocks/PropsTable/PropsTable.tsx | 4 ++++
lib/components/src/blocks/Source.tsx | 3 +++
lib/components/src/blocks/Story.tsx | 4 ++++
lib/components/src/blocks/Typeset.tsx | 4 ++++
9 files changed, 43 insertions(+)
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index c68a192512c3..28372213a002 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -109,6 +109,10 @@ interface ColorProps {
colors: string[];
}
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
export const ColorItem: React.FunctionComponent = ({ title, subtitle, colors }) => {
return (
-
@@ -143,6 +147,10 @@ export const ColorItem: React.FunctionComponent
= ({ title, subtitle
);
};
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
export const ColorPalette: React.FunctionComponent = ({ children, ...props }) => {
return (
diff --git a/lib/components/src/blocks/Description.tsx b/lib/components/src/blocks/Description.tsx
index 1645f88d9fbc..bfc51d88eafd 100644
--- a/lib/components/src/blocks/Description.tsx
+++ b/lib/components/src/blocks/Description.tsx
@@ -5,6 +5,10 @@ export interface DescriptionProps {
markdown: string;
}
+/**
+ * A markdown description for a component, typically used to show the
+ * components docgen docs.
+ */
export const Description: React.FunctionComponent = ({ markdown }) => (
{markdown}
);
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
index 5b2b152fba3d..c455666b9d8e 100644
--- a/lib/components/src/blocks/DocsPage.tsx
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -68,6 +68,11 @@ export const DocsPageWrapper: React.FunctionComponent = ({ children }) => (
);
+/**
+ * An out-of-the box documentation page for components that shows the
+ * title & subtitle and a collection of blocks including `Description`,
+ * and `Preview`s for each of the component's stories.
+ */
const DocsPage: React.FunctionComponent = ({ title, subtitle, children }) => (
<>
{title && {title} }
diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx
index af5288d512ba..1bb9cfde6f97 100644
--- a/lib/components/src/blocks/IconGallery.tsx
+++ b/lib/components/src/blocks/IconGallery.tsx
@@ -43,6 +43,9 @@ interface IconItemProps {
name: string;
}
+/**
+ * An individual icon with a caption and an example (passed as `children`).
+ */
export const IconItem: React.FunctionComponent = ({ name, children }) => {
return (
-
@@ -52,6 +55,9 @@ export const IconItem: React.FunctionComponent
= ({ name, childre
);
};
+/**
+ * Show a grid of icons, as specified by `IconItem`.
+ */
export const IconGallery: React.FunctionComponent = ({ children, ...props }) => {
return {children}
;
};
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
index d1f257b0c7e3..713550bf95d1 100644
--- a/lib/components/src/blocks/Preview.tsx
+++ b/lib/components/src/blocks/Preview.tsx
@@ -53,6 +53,11 @@ const PreviewContainer = styled.div({
margin: '25px 0 40px',
});
+/**
+ * A preview component for showing one or more component `Story`
+ * items. The preview also shows the source for the componnent
+ * as a drop-down.
+ */
const Preview: React.FunctionComponent = ({
isColumn,
columns,
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index af1ad1f2158d..3789e2861767 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -127,6 +127,10 @@ export interface PropsTableProps {
// FIXME: table options
}
+/**
+ * Display the props for a component as a props table. Each row is a collection of
+ * PropDefs, usually derived from docgen info for the component.
+ */
const PropsTable: React.FunctionComponent = ({ rows, error = null }) => {
if (error) {
return {error} ;
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
index bfe4b6e0dbbe..e63ae42b698c 100644
--- a/lib/components/src/blocks/Source.tsx
+++ b/lib/components/src/blocks/Source.tsx
@@ -28,6 +28,9 @@ export interface SourceProps {
dark?: boolean;
}
+/**
+ * Syntax-highlighted source code for a component (or anything!)
+ */
const Source: React.FunctionComponent = ({
language,
code,
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 41b078d4c35e..7b8a402fa9a2 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -57,6 +57,10 @@ const IFrameStory: React.FunctionComponent = ({
);
+/**
+ * A story element, either renderend inline or in an iframe,
+ * with configurable height.
+ */
const Story: React.FunctionComponent = ({
error,
height,
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
index 068f95b273ca..f004b382e63d 100644
--- a/lib/components/src/blocks/Typeset.tsx
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -39,6 +39,10 @@ export interface TypesetProps {
sampleText?: string;
}
+/**
+ * Convenient tyleguide documentation showing examples of type
+ * with different sizes and weights and configurable sample text.
+ */
export const Typeset: React.FunctionComponent = ({
fontSizes,
fontWeight,
From 31ea16f87dbd52c9d9d546a46726cfc0861be353 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Fri, 21 Jun 2019 19:50:39 +0800
Subject: [PATCH 154/371] Module format codemod WIP
---
.../convert-to-module-format/basic.input.js | 16 +++
.../convert-to-module-format/basic.output.js | 23 ++++
.../decorators.input.js | 9 ++
.../decorators.output.js | 12 ++
.../convert-to-module-format/module.input.js | 12 ++
.../convert-to-module-format/module.output.js | 12 ++
.../convert-to-module-format/multi.input.js | 14 +++
.../convert-to-module-format/multi.output.js | 16 +++
.../parameters.input.js | 9 ++
.../parameters.output.js | 13 +++
.../story-parameters.input.js | 14 +++
.../story-parameters.output.js | 19 +++
.../convert-to-module-format.test.js | 8 ++
.../transforms/convert-to-module-format.js | 108 ++++++++++++++++++
14 files changed, 285 insertions(+)
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js
create mode 100644 lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
create mode 100644 lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
create mode 100644 lib/codemod/src/transforms/convert-to-module-format.js
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js
new file mode 100644
index 000000000000..962bbf6d8d5e
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js
@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module)
+ .add('story1', () => )
+ .add('second story', () => )
+ .add('complex story', () => (
+
+
+
+
+ ));
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
new file mode 100644
index 000000000000..1e9efd10b012
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -0,0 +1,23 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+ title: 'Button',
+};
+
+export const story1 = () => ;
+
+export const story2 = () => ;
+story2.title = 'second story';
+
+export const story3 = () => (
+
+
+
+
+);
+story3.title = 'complex story';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js
new file mode 100644
index 000000000000..900c47c9c05b
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('Some.Button', module)
+ .addDecorator(withKnobs)
+ .addDecorator(storyFn => {storyFn}
)
+ .add('with decorator', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
new file mode 100644
index 000000000000..7a161ea0e60b
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+export default {
+ title: 'Some.Button',
+ decorators: [withKnobs, storyFn => {storyFn}
],
+};
+
+export const story1 = () => ;
+story1.title = 'with decorator';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js
new file mode 100644
index 000000000000..5cc7ce8ab842
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+ title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js
new file mode 100644
index 000000000000..5cc7ce8ab842
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+ title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js
new file mode 100644
index 000000000000..59a06b7cd165
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// If we have multiple storiesOf calls, export multiple defaults. It's not valid
+// JS but will still save the user time in converting.
+
+storiesOf('Button1', module)
+ .add('story1', () => )
+ .add('story2', () => );
+
+storiesOf('Button2', module)
+ .add('story1', () => )
+ .add('story2', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
new file mode 100644
index 000000000000..d7ef5e06fabe
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// If we have multiple storiesOf calls, export multiple defaults. It's not valid
+// JS but will still save the user time in converting.
+
+export default {
+ title: 'Button1',
+};
+export const story1 = () => ;
+
+export default {
+ title: 'Button2',
+}
+export const story1 = () => ;
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
new file mode 100644
index 000000000000..c4086ce685d0
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+ .addParameters({ component: Button, foo: 1 })
+ .add('with kind parameters', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
new file mode 100644
index 000000000000..578e9e66480d
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+export default {
+ title: 'Button',
+ parameters: { component: Button, foo: 1 },
+};
+
+export const story1 = () => ;
+story1.title = 'with kind parameters';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js
new file mode 100644
index 000000000000..75db6673cc1a
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+ .add('with story parameters', () => , {
+ header: false,
+ inline: true,
+ })
+ .add('foo', () => , {
+ bar: 1,
+ });
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
new file mode 100644
index 000000000000..e1a445a58b24
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+ title: 'Button',
+};
+
+export const story1 = () => ;
+story1.title = 'with story parameters';
+story1.parameters = {
+ header: false,
+ inline: true,
+};
+
+export const foo = () => ;
+foo.parameters = {
+ bar: 1,
+};
diff --git a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
new file mode 100644
index 000000000000..2b0f2531ba5c
--- /dev/null
+++ b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
@@ -0,0 +1,8 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+const testNames = ['multi'];
+// const testNames = ['basic', 'decorators', 'parameters', 'story-parameters', 'module'];
+
+testNames.forEach(testName => {
+ defineTest(__dirname, `convert-to-module-format`, null, `convert-to-module-format/${testName}`);
+});
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
new file mode 100644
index 000000000000..3704dde4baff
--- /dev/null
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -0,0 +1,108 @@
+/**
+ * Convert a legacy story file to module format
+ *
+ * For example:
+ *
+ * ```
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => );
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * input { Button } from './Button';
+ * export default {
+ * title: 'Button'
+ * }
+ * export const story = () => ;
+ *
+ * NOTES: only support chained storiesOf() calls
+ */
+export default function transformer(file, api) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+
+ const defaultExports = root
+ .find(j.ExportSpecifier)
+ .filter(path => path.node.local.name === 'default');
+
+ if (defaultExports && defaultExports.length > 0) {
+ return null; // keep original source
+ }
+
+ function convertToModuleDefault(call) {
+ const title = call.node.arguments[0].value;
+ const addParameters = j(call)
+ .find(j.CallExpression)
+ .filter(method => method.node.callee.name === 'addParameters');
+
+ const kindParams =
+ addParameters && addParameters.length
+ ? j.property('parameters', addParameters.node.arguments[0].value)
+ : null;
+
+ const result = j.exportDefaultDeclaration(
+ j.objectExpression([j.property('init', j.identifier('title'), j.literal(title))])
+ );
+
+ return result;
+ }
+
+ function convertToModuleExports(path) {
+ const base = j(path);
+
+ const statements = [];
+
+ // storiesOf(...)
+ base
+ .find(j.CallExpression)
+ .filter(call => call.node.callee.name === 'storiesOf')
+ .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+ .forEach(storiesOf => {
+ const title = storiesOf.node.arguments[0].value;
+ statements.push(
+ j.exportDefaultDeclaration(
+ j.objectExpression([j.property('init', j.identifier('title'), j.literal(title))])
+ )
+ );
+ });
+
+ // .add(...)
+ const adds = [];
+ base
+ .find(j.CallExpression)
+ .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
+ .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+ .forEach(add => adds.push(add));
+
+ adds.push(path);
+ adds.forEach(add => {
+ const name = add.node.arguments[0].value;
+ const val = add.node.arguments[1];
+ if (add.node.arguments.length > 2) {
+ const storyParams = add.node.arguments[2].value;
+ }
+ statements.push(
+ j.exportDeclaration(
+ false,
+ j.variableDeclaration('const', [j.variableDeclarator(j.identifier(name), val)])
+ )
+ );
+ });
+
+ return j.blockStatement(statements);
+ }
+
+ // each top-level add expression corresponds to the last "add" of the chain.
+ // replace it with the entire export statements
+ const topLevelAddExpressions = root
+ .find(j.CallExpression)
+ .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
+ .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+ .filter(add => add.parentPath.node.type === 'ExpressionStatement');
+
+ topLevelAddExpressions.replaceWith(convertToModuleExports);
+
+ return root.toSource();
+}
From 043fca7183285af7d11bc0eac0b36170f0bd46e0 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 00:54:40 +0800
Subject: [PATCH 155/371] Doc blocks: improve typescript types
---
addons/docs/src/blocks/Source.tsx | 38 ++++++++++++-----
addons/docs/src/blocks/Story.tsx | 25 ++++++++---
addons/docs/src/blocks/Wrapper.tsx | 2 +-
.../src/blocks/PropsTable/PropsTable.tsx | 17 +++++---
lib/components/src/blocks/Source.tsx | 25 ++++++-----
lib/components/src/blocks/Story.tsx | 42 +++++++++----------
6 files changed, 94 insertions(+), 55 deletions(-)
diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
index 6423b81ce832..8ba904787f72 100644
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@@ -3,14 +3,26 @@ import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/
import { DocsContext, DocsContextProps } from './DocsContext';
import { CURRENT_SELECTION } from './shared';
-interface SourceProps {
+interface CommonProps {
language?: string;
- code?: string;
- id?: string;
- ids?: string[];
- name?: string;
}
+type SingleSourceProps = {
+ id: string;
+} & CommonProps;
+
+type MultiSourceProps = {
+ ids: string[];
+} & CommonProps;
+
+type CodeProps = {
+ code: string;
+} & CommonProps;
+
+type NoneProps = CommonProps;
+
+type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
+
interface Location {
line: number;
col: number;
@@ -41,13 +53,17 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
};
export const getSourceProps = (
- { language, code, name, id, ids }: SourceProps,
- { id: currentId, mdxKind, storyStore }: DocsContextProps
+ props: SourceProps,
+ { id: currentId, storyStore }: DocsContextProps
): PureSourceProps => {
- let source = code; // prefer user-specified code
+ const codeProps = props as CodeProps;
+ const singleProps = props as SingleSourceProps;
+ const multiProps = props as MultiSourceProps;
+
+ let source = codeProps.code; // prefer user-specified code
if (!source) {
- const targetId = id === CURRENT_SELECTION ? currentId : id;
- const targetIds = ids || [targetId];
+ const targetId = singleProps.id === CURRENT_SELECTION ? currentId : singleProps.id;
+ const targetIds = multiProps.ids || [targetId];
source = targetIds
.map(sourceId => {
const data = storyStore.fromId(sourceId);
@@ -60,7 +76,7 @@ export const getSourceProps = (
.join('\n\n');
}
return source
- ? { code: source, language: language || 'jsx' }
+ ? { code: source, language: props.language || 'jsx' }
: { error: SourceError.SOURCE_UNAVAILABLE };
};
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 74f1ffe4094b..7fde8e353b34 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -5,13 +5,21 @@ import { CURRENT_SELECTION } from './shared';
import { DocsContext, DocsContextProps } from './DocsContext';
-interface StoryProps {
- id?: string;
- name?: string;
- children?: React.ReactElement;
+interface CommonProps {
height?: string;
}
+type StoryDefProps = {
+ name: string;
+ children: React.ReactNode;
+} & CommonProps;
+
+type StoryRefProps = {
+ id?: string;
+} & CommonProps;
+
+export type StoryProps = StoryDefProps | StoryRefProps;
+
const inferInlineStories = (framework: string): boolean => {
switch (framework) {
case 'react':
@@ -22,10 +30,15 @@ const inferInlineStories = (framework: string): boolean => {
};
export const getStoryProps = (
- { id, name, height }: StoryProps,
+ props: StoryProps,
{ id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
): PureStoryProps => {
- const previewId = id === CURRENT_SELECTION ? currentId : id || (name && toId(mdxKind, name));
+ const { id } = props as StoryRefProps;
+ const { name } = props as StoryDefProps;
+ const inputId = id === CURRENT_SELECTION ? currentId : id;
+ const previewId = inputId || toId(mdxKind, name);
+
+ const { height } = props;
const data = storyStore.fromId(previewId);
const { framework = null } = parameters || {};
const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
diff --git a/addons/docs/src/blocks/Wrapper.tsx b/addons/docs/src/blocks/Wrapper.tsx
index ff9506cb126a..a73402f89a57 100644
--- a/addons/docs/src/blocks/Wrapper.tsx
+++ b/addons/docs/src/blocks/Wrapper.tsx
@@ -1,7 +1,7 @@
import React from 'react';
interface WrapperProps {
- children: React.ReactElement;
+ children: React.ReactNode;
}
export const Wrapper: React.FunctionComponent = ({ children }) => (
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index 3789e2861767..2637144b7aa4 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -121,20 +121,27 @@ export enum PropsTableError {
PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.',
}
-export interface PropsTableProps {
- rows?: PropDef[];
- error?: PropsTableError;
- // FIXME: table options
+export interface PropsTableRowsProps {
+ rows: PropDef[];
}
+export interface PropsTableErrorProps {
+ error: PropsTableError;
+}
+
+export type PropsTableProps = PropsTableRowsProps | PropsTableErrorProps;
+
/**
* Display the props for a component as a props table. Each row is a collection of
* PropDefs, usually derived from docgen info for the component.
*/
-const PropsTable: React.FunctionComponent = ({ rows, error = null }) => {
+const PropsTable: React.FunctionComponent = props => {
+ const { error } = props as PropsTableErrorProps;
if (error) {
return {error} ;
}
+
+ const { rows } = props as PropsTableRowsProps;
if (rows.length === 0) {
return No props found for this component ;
}
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
index e63ae42b698c..f7b1b6da6671 100644
--- a/lib/components/src/blocks/Source.tsx
+++ b/lib/components/src/blocks/Source.tsx
@@ -21,33 +21,38 @@ export enum SourceError {
SOURCE_UNAVAILABLE = 'Oh no! The source is not available.',
}
-export interface SourceProps {
+interface SourceErrorProps {
+ error?: SourceError;
+}
+
+interface SourceCodeProps {
language?: string;
code?: string;
- error?: SourceError;
dark?: boolean;
}
+// FIXME: Using | causes a typescript error, so stubbing it with & for now
+// and making `error` optional
+export type SourceProps = SourceErrorProps & SourceCodeProps;
+
/**
* Syntax-highlighted source code for a component (or anything!)
*/
-const Source: React.FunctionComponent = ({
- language,
- code,
- error = null,
- dark,
- ...props
-}) => {
+const Source: React.FunctionComponent = props => {
+ const { error } = props as SourceErrorProps;
if (error) {
return {error} ;
}
+
+ const { language, code, dark, ...rest } = props as SourceCodeProps;
+
const syntaxHighlighter = (
{code}
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
index 7b8a402fa9a2..0cdd022ab672 100644
--- a/lib/components/src/blocks/Story.tsx
+++ b/lib/components/src/blocks/Story.tsx
@@ -9,27 +9,27 @@ export enum StoryError {
NO_STORY = 'No component or story to display',
}
-interface InlineStoryProps {
+interface CommonProps {
title: string;
height?: string;
- storyFn: () => React.ElementType;
}
-interface IFrameStoryProps {
- title: string;
- height?: string;
+type InlineStoryProps = {
+ storyFn: () => React.ElementType;
+} & CommonProps;
+
+type IFrameStoryProps = {
id: string;
-}
+} & CommonProps;
+
+type ErrorProps = {
+ error?: StoryError;
+} & CommonProps;
// How do you XOR properties in typescript?
-export interface StoryProps {
+export type StoryProps = (InlineStoryProps | IFrameStoryProps | ErrorProps) & {
inline: boolean;
- title: string;
- height?: string;
- id?: string;
- storyFn?: () => React.ElementType;
- error?: StoryError;
-}
+};
const InlineStory: React.FunctionComponent = ({ storyFn, height }) => (
{storyFn()}
@@ -61,19 +61,17 @@ const IFrameStory: React.FunctionComponent = ({
* A story element, either renderend inline or in an iframe,
* with configurable height.
*/
-const Story: React.FunctionComponent = ({
- error,
- height,
- id,
- inline,
- storyFn,
- title,
-}) => {
+const Story: React.FunctionComponent = props => {
+ const { error } = props as ErrorProps;
+ const { storyFn } = props as InlineStoryProps;
+ const { id } = props as IFrameStoryProps;
+ const { inline, title, height } = props;
+
if (error) {
return {error} ;
}
return inline ? (
-
+
) : (
);
From f48201e318647973d70efa812b1d2d4271f33264 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 01:16:04 +0800
Subject: [PATCH 156/371] Use styled headings
---
addons/docs/src/blocks/DocsPage.tsx | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx
index dbb422ac3343..8d3c39447841 100644
--- a/addons/docs/src/blocks/DocsPage.tsx
+++ b/addons/docs/src/blocks/DocsPage.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { parseKind } from '@storybook/router';
+import { styled } from '@storybook/theming';
import { DocsPage as PureDocsPage, DocsPageProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext';
import { DocsContainer } from './DocsContainer';
@@ -51,6 +52,9 @@ const getDocsStories = (type: DocsStoriesType, componentStories: StoryData[]): D
}));
};
+const StoriesHeading = styled.h2();
+const StoryHeading = styled.h3();
+
const DocsStory: React.FunctionComponent = ({
id,
name,
@@ -58,7 +62,7 @@ const DocsStory: React.FunctionComponent = ({
expanded = true,
}) => (
<>
- {expanded && {name} }
+ {expanded && {name} }
{expanded && description && }
@@ -79,7 +83,7 @@ const DocsStories: React.FunctionComponent = ({ type = DocsSto
const expanded = type !== DocsStoriesType.PRIMARY;
return (
<>
- {expanded && Stories }
+ {expanded && Stories }
{stories.map(s => (
))}
From 9e63c855b2e7ab63683fb69c6c1d74ec0cb99a89 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 01:23:12 +0800
Subject: [PATCH 157/371] Docgen migration notes
---
MIGRATION.md | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/MIGRATION.md b/MIGRATION.md
index e768f1ba27ef..593bc601f8ee 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,7 @@
# Migration
+- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
+ - [Docs mode docgen](#docs-mode-docgen)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
- [React native server](#react-native-server)
- [Angular 7](#angular-7)
@@ -56,6 +58,15 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
+## From version 5.1.x to 5.2.x
+
+### Docs mode docgen
+
+This isn't a breaking change per se, because `addon-docs` is a new feature. However it's intended to replace `addon-info`, so if you're migrating from `addon-info` there are a few things you should know:
+
+1. Support for only one prop table
+2. Prop table docgen info should be stored on the component and not in the global variable `STORYBOOK_REACT_CLASSES` as before.
+
## From version 5.0.x to 5.1.x
### React native server
From 723037da23787b9855d5440dcec5b27e0521a858 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 01:33:55 +0800
Subject: [PATCH 158/371] PropsRow: Added hover text for required asterisk
---
lib/components/src/blocks/PropsTable/PropRow.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx
index c0fff8456258..d3000ea4fbbe 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.tsx
@@ -30,6 +30,7 @@ const Name = styled.span({ fontWeight: 'bold' });
const Required = styled.span(({ theme }) => ({
color: theme.color.negative,
fontFamily: theme.typography.fonts.mono,
+ cursor: 'help',
}));
const StyledPropDef = styled.div(({ theme }) => ({
From 8f2f3e503d56ba75b239dcf2721f908eb5cf4024 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 02:45:37 +0800
Subject: [PATCH 159/371] Addon-docs: Add typings
---
addons/docs/src/typings.d.ts | 1 +
1 file changed, 1 insertion(+)
create mode 100644 addons/docs/src/typings.d.ts
diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts
new file mode 100644
index 000000000000..005ee92d6b8f
--- /dev/null
+++ b/addons/docs/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '@mdx-js/react';
From 75cb841a830e72c4d8ecdfd6f908229cb7436372 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 08:52:39 +0800
Subject: [PATCH 160/371] Addon-docs: Fix mdx loading error
---
examples/official-storybook/stories/addon-docs.stories.js | 4 ++--
.../stories/notes/{notes.stories.mdx => notes.mdx} | 0
lib/core/src/client/preview/start.js | 4 +++-
3 files changed, 5 insertions(+), 3 deletions(-)
rename examples/official-storybook/stories/notes/{notes.stories.mdx => notes.mdx} (100%)
diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js
index 478efb2799cd..533f7adbe662 100644
--- a/examples/official-storybook/stories/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs.stories.js
@@ -1,6 +1,6 @@
import React from 'react';
import notes from './notes/notes.md';
-import mdxNotes from './notes/notes.stories.mdx';
+import mdxNotes from './notes/notes.mdx';
import DocgenButton from '../components/DocgenButton';
export default {
@@ -27,7 +27,7 @@ withInfo.parameters = {
export const mdxOverride = () => Click docs tab to see MDX-overridden docs
;
mdxOverride.title = 'mdx override';
mdxOverride.parameters = {
- docs: mdxNotes && mdxNotes.parameters && mdxNotes.parameters.docs,
+ docs: mdxNotes,
};
export const jsxOverride = () => Click docs tab to see JSX-overridden docs
;
diff --git a/examples/official-storybook/stories/notes/notes.stories.mdx b/examples/official-storybook/stories/notes/notes.mdx
similarity index 100%
rename from examples/official-storybook/stories/notes/notes.stories.mdx
rename to examples/official-storybook/stories/notes/notes.mdx
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 354d85827d3f..77a84389d1bf 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -277,7 +277,9 @@ export default function start(render, { decorateStory } = {}) {
if (!fileExports.default.title) {
throw new Error(
- `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
+ `Unexpected default export without title in '${filename}': ${JSON.stringify(
+ fileExports.default
+ )}`
);
}
From 5b204b9a00767a0844ce4e364b989b1adcd03360 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 10:11:43 +0800
Subject: [PATCH 161/371] Fix initial viewMode parsing typo
---
lib/core/src/client/preview/url.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core/src/client/preview/url.js b/lib/core/src/client/preview/url.js
index d0ecddb4deb8..47daf2130de5 100644
--- a/lib/core/src/client/preview/url.js
+++ b/lib/core/src/client/preview/url.js
@@ -39,5 +39,5 @@ export const initializePath = () => {
setPath({ storyId, viewMode });
}
}
- return { storyId };
+ return { storyId, viewMode };
};
From 06a2613b6573cab5aea3be6205bb7c93602127a7 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 10:39:53 +0800
Subject: [PATCH 162/371] Upgrade core-js to 3.x
---
addons/design-assets/package.json | 2 +-
addons/queryparams/package.json | 2 +-
dev-kits/addon-parameter/package.json | 2 +-
dev-kits/addon-roundtrip/package.json | 84 +++++++++++++--------------
4 files changed, 45 insertions(+), 45 deletions(-)
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 659b71f40534..273f0ebf730a 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -34,7 +34,7 @@
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
- "core-js": "^2.6.5",
+ "core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",
"use-image": "^1.0.3"
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 854adf15c508..6358aa9dfdcc 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -30,7 +30,7 @@
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
- "core-js": "^2.6.5",
+ "core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",
"react": "^16.8.3"
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 50f40cdf3ee6..4123a8ae359d 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -31,7 +31,7 @@
"@storybook/core-events": "5.2.0-alpha.23",
"@storybook/theming": "5.2.0-alpha.23",
"common-tags": "^1.8.0",
- "core-js": "^2.6.5",
+ "core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"
},
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index 5aa760468255..88bed26c6ae6 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,44 +1,44 @@
{
- "name": "@storybook/addon-roundtrip",
- "version": "5.2.0-alpha.23",
- "description": "roundtrip addon for storybook",
- "keywords": [
- "devkit",
- "addon",
- "storybook",
- "roundtrip"
- ],
- "homepage": "https://github.com/storybooks/storybook#readme",
- "bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/storybooks/storybook.git",
- "directory": "dev-kit/addon-roundtrip"
- },
- "license": "MIT",
- "main": "dist/index.js",
- "types": "dist/index.d.ts",
- "scripts": {
- "prepare": "node ../../scripts/prepare.js"
- },
- "dependencies": {
- "@storybook/addons": "5.2.0-alpha.23",
- "@storybook/api": "5.2.0-alpha.23",
- "@storybook/client-logger": "5.2.0-alpha.23",
- "@storybook/components": "5.2.0-alpha.23",
- "@storybook/core-events": "5.2.0-alpha.23",
- "@storybook/theming": "5.2.0-alpha.23",
- "common-tags": "^1.8.0",
- "core-js": "^2.6.5",
- "global": "^4.3.2",
- "react": "^16.8.3"
- },
- "devDependencies": {
- "@types/common-tags": "^1.8.0"
- },
- "publishConfig": {
- "access": "public"
- }
+ "name": "@storybook/addon-roundtrip",
+ "version": "5.2.0-alpha.23",
+ "description": "roundtrip addon for storybook",
+ "keywords": [
+ "devkit",
+ "addon",
+ "storybook",
+ "roundtrip"
+ ],
+ "homepage": "https://github.com/storybooks/storybook#readme",
+ "bugs": {
+ "url": "https://github.com/storybooks/storybook/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/storybooks/storybook.git",
+ "directory": "dev-kit/addon-roundtrip"
+ },
+ "license": "MIT",
+ "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "scripts": {
+ "prepare": "node ../../scripts/prepare.js"
+ },
+ "dependencies": {
+ "@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
+ "@storybook/client-logger": "5.2.0-alpha.23",
+ "@storybook/components": "5.2.0-alpha.23",
+ "@storybook/core-events": "5.2.0-alpha.23",
+ "@storybook/theming": "5.2.0-alpha.23",
+ "common-tags": "^1.8.0",
+ "core-js": "^3.0.1",
+ "global": "^4.3.2",
+ "react": "^16.8.3"
+ },
+ "devDependencies": {
+ "@types/common-tags": "^1.8.0"
+ },
+ "publishConfig": {
+ "access": "public"
}
+}
From ebc37f48bc6b34558e7f68a965f7ded826c8a671 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sat, 22 Jun 2019 10:44:12 +0800
Subject: [PATCH 163/371] Github org rename
---
addons/design-assets/package.json | 6 +++---
addons/queryparams/package.json | 6 +++---
app/rax/README.md | 2 +-
app/rax/package.json | 6 +++---
dev-kits/addon-parameter/package.json | 6 +++---
dev-kits/addon-roundtrip/package.json | 6 +++---
docs/src/pages/addons/writing-addons/index.md | 2 +-
.../src/stories/__snapshots__/index.stories.storyshot | 2 +-
examples/rax-kitchen-sink/.storybook/config.js | 2 +-
lib/cli/generators/RAX/template/.storybook/config.js | 2 +-
10 files changed, 20 insertions(+), 20 deletions(-)
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 659b71f40534..74735827f063 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -11,13 +11,13 @@
"files",
"viewer"
],
- "homepage": "https://github.com/storybooks/storybook#readme",
+ "homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
+ "url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/storybooks/storybook.git",
+ "url": "git+https://github.com/storybookjs/storybook.git",
"directory": "addons/design-assets"
},
"license": "MIT",
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 854adf15c508..198c8f56324b 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -7,13 +7,13 @@
"storybook",
"query"
],
- "homepage": "https://github.com/storybooks/storybook#readme",
+ "homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
+ "url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/storybooks/storybook.git",
+ "url": "git+https://github.com/storybookjs/storybook.git",
"directory": "addons/addon-queryparams"
},
"license": "MIT",
diff --git a/app/rax/README.md b/app/rax/README.md
index 4bdd36456979..4baa045a4d5e 100644
--- a/app/rax/README.md
+++ b/app/rax/README.md
@@ -3,7 +3,7 @@
Storybook for Rax is a UI development environment for your Rax components.
With it, you can visualize different states of your UI components and develop them interactively.
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
diff --git a/app/rax/package.json b/app/rax/package.json
index f76c26c8a9fc..3be2c8489c7a 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -6,13 +6,13 @@
"storybook",
"rax"
],
- "homepage": "https://github.com/storybooks/storybook/tree/master/app/rax",
+ "homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax",
"bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
+ "url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
- "url": "https://github.com/storybooks/storybook.git",
+ "url": "https://github.com/storybookjs/storybook.git",
"directory": "app/rax"
},
"license": "MIT",
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 50f40cdf3ee6..70afc5038edd 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -8,13 +8,13 @@
"storybook",
"parameter"
],
- "homepage": "https://github.com/storybooks/storybook#readme",
+ "homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
+ "url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/storybooks/storybook.git",
+ "url": "git+https://github.com/storybookjs/storybook.git",
"directory": "dev-kit/addon-parameter"
},
"license": "MIT",
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index 5aa760468255..b08691f2a417 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -8,13 +8,13 @@
"storybook",
"roundtrip"
],
- "homepage": "https://github.com/storybooks/storybook#readme",
+ "homepage": "https://github.com/storybookjs/storybook#readme",
"bugs": {
- "url": "https://github.com/storybooks/storybook/issues"
+ "url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/storybooks/storybook.git",
+ "url": "git+https://github.com/storybookjs/storybook.git",
"directory": "dev-kit/addon-roundtrip"
},
"license": "MIT",
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index e7722154460f..6e4d5338bff1 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -266,7 +266,7 @@ You can learn more about the complete API [here](/addons/api).
## Packaging
-You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybooks/storybook/tree/master/addons/notes).
+You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybookjs/storybook/tree/master/addons/notes).
In addition to moving the above code to a NPM module, we've set `react` and `@storybook/addons` as peer dependencies.
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index a592f65b26ca..214d9e9d9e2f 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -63,7 +63,7 @@ exports[`Storyshots Button with new info 1`] = `
>
Use the
Date: Sat, 22 Jun 2019 16:44:25 +0800
Subject: [PATCH 164/371] Typeset: Display font sizes in user-specified order
---
lib/components/src/blocks/Typeset.tsx | 37 ++++++++++++---------------
1 file changed, 17 insertions(+), 20 deletions(-)
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
index f004b382e63d..890474dae365 100644
--- a/lib/components/src/blocks/Typeset.tsx
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -48,23 +48,20 @@ export const Typeset: React.FunctionComponent = ({
fontWeight,
sampleText,
...props
-}) => {
- const fontSizesReversed = fontSizes.reverse();
- return (
-
- {fontSizesReversed.map(num => (
-
- {num}px
-
- {sampleText || 'Was he a beast if music could move him so?'}
-
-
- ))}
-
- );
-};
+}) => (
+
+ {fontSizes.map(num => (
+
+ {num}px
+
+ {sampleText || 'Was he a beast if music could move him so?'}
+
+
+ ))}
+
+);
From 9802d744d4565bc42023e57073fca7b00267d475 Mon Sep 17 00:00:00 2001
From: autarc
Date: Sat, 22 Jun 2019 13:32:13 +0200
Subject: [PATCH 165/371] Fix unstretched preview background wrapper
---
lib/ui/src/components/preview/background.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/ui/src/components/preview/background.js b/lib/ui/src/components/preview/background.js
index 60a4ecd71742..aad35b97a87c 100644
--- a/lib/ui/src/components/preview/background.js
+++ b/lib/ui/src/components/preview/background.js
@@ -93,7 +93,7 @@ const Background = styled.div(
top: 0,
left: 0,
width: '100%',
- height: '100%',
+ minHeight: '100%',
transition: 'background .1s linear',
iframe: {
width: '100%',
From 5d2f9b92563c6130bb238b45be254458f2613302 Mon Sep 17 00:00:00 2001
From: Jessica Koch
Date: Sat, 22 Jun 2019 18:41:04 -0700
Subject: [PATCH 166/371] broken...need to rebuild, sorry
---
README.md | 2 +-
lib/client-api/src/types.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index e04eb43cf783..b306e2ef41d6 100644
--- a/README.md
+++ b/README.md
@@ -163,7 +163,7 @@ Looking for a first issue to tackle?
### Development scripts
-Storybook is organized as a monorepo using [Lerna](https://lernajs.io). Useful scripts include:
+Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:
#### `yarn bootstrap`
diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts
index a5ef6c37d14c..7a3fa6269a58 100644
--- a/lib/client-api/src/types.ts
+++ b/lib/client-api/src/types.ts
@@ -344,7 +344,7 @@ export interface Decorator {
name: string;
parameters: DecoratorParameters;
story: string;
- storyFn: storyFn;
+ storyFn: StoryFn;
}
export type DecoratorData = { [K in Keys]: Decorator };
From abdde1f0121537bd04645ccdd0ef3e0bbeb14381 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2019 11:49:55 +0800
Subject: [PATCH 167/371] Codemod to convert storiesOf to module format
---
.../convert-to-module-format/basic.output.js | 28 ++---
.../decorators.output.js | 14 ++-
.../convert-to-module-format/multi.output.js | 22 ++--
.../parameters.input.js | 1 +
.../parameters.output.js | 19 ++-
.../story-parameters.output.js | 30 +++--
.../convert-to-module-format.test.js | 3 +-
.../transforms/convert-to-module-format.js | 109 +++++++++++++-----
8 files changed, 150 insertions(+), 76 deletions(-)
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
index 1e9efd10b012..33fa146ab94d 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -5,19 +5,21 @@ import Button from './Button';
import { storiesOf, configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
-export default {
- title: 'Button',
-};
+{
+ export default {
+ title: 'Button',
+ };
-export const story1 = () => ;
+ export const story1 = () => ;
+ export const story2 = () => ;
+ story2.title = 'second story';
-export const story2 = () => ;
-story2.title = 'second story';
+ export const story3 = () => (
+
+
+
+
+ );
-export const story3 = () => (
-
-
-
-
-);
-story3.title = 'complex story';
+ story3.title = 'complex story';
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
index 7a161ea0e60b..962cb3361690 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
@@ -3,10 +3,12 @@ import React from 'react';
import Button from './Button';
// This isn't a valid story, but it tests the `import { comp } from ...` case
-export default {
- title: 'Some.Button',
- decorators: [withKnobs, storyFn => {storyFn}
],
-};
+{
+ export default {
+ title: 'Some.Button',
+ decorators: [withKnobs, storyFn => {storyFn}
],
+ };
-export const story1 = () => ;
-story1.title = 'with decorator';
+ export const story1 = () => ;
+ story1.title = 'with decorator';
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
index d7ef5e06fabe..e73ba696ff84 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
@@ -5,12 +5,20 @@ import Button from './Button';
// If we have multiple storiesOf calls, export multiple defaults. It's not valid
// JS but will still save the user time in converting.
-export default {
- title: 'Button1',
+{
+ export default {
+ title: 'Button1',
+ };
+
+ export const story1 = () => ;
+ export const story2 = () => ;
};
-export const story1 = () => ;
-export default {
- title: 'Button2',
-}
-export const story1 = () => ;
+{
+ export default {
+ title: 'Button2',
+ };
+
+ export const story1 = () => ;
+ export const story2 = () => ;
+};
\ No newline at end of file
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
index c4086ce685d0..07499987fc67 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
@@ -6,4 +6,5 @@ import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.addParameters({ component: Button, foo: 1 })
+ .addParameters({ bar: 2 })
.add('with kind parameters', () => );
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
index 578e9e66480d..b83e6ecd2d5f 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -4,10 +4,17 @@ import Button from './Button';
import { storiesOf } from '@storybook/react';
-export default {
- title: 'Button',
- parameters: { component: Button, foo: 1 },
-};
+{
+ export default {
+ title: 'Button',
+
+ parameters: {
+ component: Button,
+ foo: 1,
+ bar: 2,
+ },
+ };
-export const story1 = () => ;
-story1.title = 'with kind parameters';
+ export const story1 = () => ;
+ story1.title = 'with kind parameters';
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
index e1a445a58b24..698e15a10a2f 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -2,18 +2,24 @@
import React from 'react';
import Button from './Button';
-export default {
- title: 'Button',
-};
+import { storiesOf } from '@storybook/react';
-export const story1 = () => ;
-story1.title = 'with story parameters';
-story1.parameters = {
- header: false,
- inline: true,
-};
+{
+ export default {
+ title: 'Button',
+ };
+
+ export const story1 = () => ;
+ story1.title = 'with story parameters';
+
+ story1.parameters = {
+ header: false,
+ inline: true,
+ };
+
+ export const foo = () => ;
-export const foo = () => ;
-foo.parameters = {
- bar: 1,
+ foo.parameters = {
+ bar: 1,
+ };
};
diff --git a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
index 2b0f2531ba5c..b3f6d6930c28 100644
--- a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
+++ b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
@@ -1,7 +1,6 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
-const testNames = ['multi'];
-// const testNames = ['basic', 'decorators', 'parameters', 'story-parameters', 'module'];
+const testNames = ['basic', 'decorators', 'parameters', 'story-parameters', 'module', 'multi'];
testNames.forEach(testName => {
defineTest(__dirname, `convert-to-module-format`, null, `convert-to-module-format/${testName}`);
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index 3704dde4baff..05fbbcb0b6a4 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -1,3 +1,5 @@
+import { stat } from 'fs';
+
/**
* Convert a legacy story file to module format
*
@@ -23,36 +25,56 @@ export default function transformer(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
- const defaultExports = root
- .find(j.ExportSpecifier)
- .filter(path => path.node.local.name === 'default');
-
- if (defaultExports && defaultExports.length > 0) {
- return null; // keep original source
- }
-
- function convertToModuleDefault(call) {
- const title = call.node.arguments[0].value;
- const addParameters = j(call)
- .find(j.CallExpression)
- .filter(method => method.node.callee.name === 'addParameters');
-
- const kindParams =
- addParameters && addParameters.length
- ? j.property('parameters', addParameters.node.arguments[0].value)
- : null;
-
- const result = j.exportDefaultDeclaration(
- j.objectExpression([j.property('init', j.identifier('title'), j.literal(title))])
- );
-
- return result;
+ const defaultExports = root.find(j.ExportDefaultDeclaration);
+ if (defaultExports.size() > 0) {
+ return root.toSource();
}
function convertToModuleExports(path) {
const base = j(path);
+ let counter = 1;
const statements = [];
+ const extraExports = [];
+
+ // .addDecorator
+ const decorators = [];
+ base
+ .find(j.CallExpression)
+ .filter(
+ call => call.node.callee.property && call.node.callee.property.name === 'addDecorator'
+ )
+ .forEach(add => {
+ const decorator = add.node.arguments[0];
+ decorators.push(decorator);
+ });
+ if (decorators.length > 0) {
+ decorators.reverse();
+ extraExports.push(
+ j.property('init', j.identifier('decorators'), j.arrayExpression(decorators))
+ );
+ }
+
+ // .addParameters
+ const parameters = [];
+ base
+ .find(j.CallExpression)
+ .filter(
+ call => call.node.callee.property && call.node.callee.property.name === 'addParameters'
+ )
+ .forEach(add => {
+ // jscodeshift gives us the find results in reverse, but these args come in
+ // order, so we double reverse here. ugh.
+ const params = [...add.node.arguments[0].properties];
+ params.reverse();
+ params.forEach(prop => parameters.push(prop));
+ });
+ if (parameters.length > 0) {
+ parameters.reverse();
+ extraExports.push(
+ j.property('init', j.identifier('parameters'), j.objectExpression(parameters))
+ );
+ }
// storiesOf(...)
base
@@ -63,7 +85,10 @@ export default function transformer(file, api) {
const title = storiesOf.node.arguments[0].value;
statements.push(
j.exportDefaultDeclaration(
- j.objectExpression([j.property('init', j.identifier('title'), j.literal(title))])
+ j.objectExpression([
+ j.property('init', j.identifier('title'), j.literal(title)),
+ ...extraExports,
+ ])
)
);
});
@@ -76,19 +101,43 @@ export default function transformer(file, api) {
.filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
.forEach(add => adds.push(add));
+ adds.reverse();
adds.push(path);
+
adds.forEach(add => {
- const name = add.node.arguments[0].value;
- const val = add.node.arguments[1];
- if (add.node.arguments.length > 2) {
- const storyParams = add.node.arguments[2].value;
+ let name = add.node.arguments[0].value;
+ let title = null;
+ if (/\s/.exec(name)) {
+ title = name;
+ name = `story${counter}`;
}
+ const val = add.node.arguments[1];
statements.push(
j.exportDeclaration(
false,
j.variableDeclaration('const', [j.variableDeclarator(j.identifier(name), val)])
)
);
+ if (title) {
+ statements.push(
+ j.assignmentStatement(
+ '=',
+ j.memberExpression(j.identifier(name), j.identifier('title')),
+ j.literal(title)
+ )
+ );
+ }
+ if (add.node.arguments.length > 2) {
+ const storyParams = add.node.arguments[2];
+ statements.push(
+ j.assignmentStatement(
+ '=',
+ j.memberExpression(j.identifier(name), j.identifier('parameters')),
+ storyParams
+ )
+ );
+ }
+ counter += 1;
});
return j.blockStatement(statements);
@@ -104,5 +153,5 @@ export default function transformer(file, api) {
topLevelAddExpressions.replaceWith(convertToModuleExports);
- return root.toSource();
+ return root.toSource({ quote: 'single', trailingComma: 'true', tabWidth: 2 });
}
From fdae527bf627391e8690481f100df8a00db5d3d3 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2019 16:47:19 +0800
Subject: [PATCH 168/371] Module format codemap: fix block formatting
---
.../convert-to-module-format/basic.output.js | 28 +++++++++----------
.../decorators.output.js | 15 ++++------
.../convert-to-module-format/multi.output.js | 25 ++++++-----------
.../parameters.output.js | 22 +++++++--------
.../story-parameters.output.js | 28 +++++++++----------
.../transforms/convert-to-module-format.js | 9 +++---
6 files changed, 56 insertions(+), 71 deletions(-)
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
index 33fa146ab94d..1fd0819fbba3 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -5,21 +5,19 @@ import Button from './Button';
import { storiesOf, configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
-{
- export default {
- title: 'Button',
- };
+export default {
+ title: 'Button',
+};
- export const story1 = () => ;
- export const story2 = () => ;
- story2.title = 'second story';
+export const story1 = () => ;
+export const story2 = () => ;
+story2.title = 'second story';
- export const story3 = () => (
-
-
-
-
- );
+export const story3 = () => (
+
+
+
+
+ );
- story3.title = 'complex story';
-};
+story3.title = 'complex story';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
index 962cb3361690..3a7e19019ce1 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
@@ -2,13 +2,10 @@
import React from 'react';
import Button from './Button';
-// This isn't a valid story, but it tests the `import { comp } from ...` case
-{
- export default {
- title: 'Some.Button',
- decorators: [withKnobs, storyFn => {storyFn}
],
- };
-
- export const story1 = () => ;
- story1.title = 'with decorator';
+export default {
+ title: 'Some.Button',
+ decorators: [withKnobs, storyFn => {storyFn}
],
};
+
+export const story1 = () => ;
+story1.title = 'with decorator';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
index e73ba696ff84..ff1fefb3d2b9 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
@@ -2,23 +2,16 @@
import React from 'react';
import Button from './Button';
-// If we have multiple storiesOf calls, export multiple defaults. It's not valid
-// JS but will still save the user time in converting.
+export default {
+ title: 'Button1',
+};
-{
- export default {
- title: 'Button1',
- };
+export const story1 = () => ;
+export const story2 = () => ;
- export const story1 = () => ;
- export const story2 = () => ;
+export default {
+ title: 'Button2',
};
-{
- export default {
- title: 'Button2',
- };
-
- export const story1 = () => ;
- export const story2 = () => ;
-};
\ No newline at end of file
+export const story1 = () => ;
+export const story2 = () => ;
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
index b83e6ecd2d5f..7dcafe93c2e0 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -4,17 +4,15 @@ import Button from './Button';
import { storiesOf } from '@storybook/react';
-{
- export default {
- title: 'Button',
+export default {
+ title: 'Button',
- parameters: {
- component: Button,
- foo: 1,
- bar: 2,
- },
- };
-
- export const story1 = () => ;
- story1.title = 'with kind parameters';
+ parameters: {
+ component: Button,
+ foo: 1,
+ bar: 2,
+ },
};
+
+export const story1 = () => ;
+story1.title = 'with kind parameters';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
index 698e15a10a2f..555426b67b9c 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -4,22 +4,20 @@ import Button from './Button';
import { storiesOf } from '@storybook/react';
-{
- export default {
- title: 'Button',
- };
+export default {
+ title: 'Button',
+};
- export const story1 = () => ;
- story1.title = 'with story parameters';
+export const story1 = () => ;
+story1.title = 'with story parameters';
- story1.parameters = {
- header: false,
- inline: true,
- };
+story1.parameters = {
+ header: false,
+ inline: true,
+ };
- export const foo = () => ;
+export const foo = () => ;
- foo.parameters = {
- bar: 1,
- };
-};
+foo.parameters = {
+ bar: 1,
+ };
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index 05fbbcb0b6a4..1b2e09dedabb 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -140,7 +140,9 @@ export default function transformer(file, api) {
counter += 1;
});
- return j.blockStatement(statements);
+ statements.reverse();
+ statements.forEach(s => path.parent.insertAfter(s));
+ base.remove();
}
// each top-level add expression corresponds to the last "add" of the chain.
@@ -149,9 +151,8 @@ export default function transformer(file, api) {
.find(j.CallExpression)
.filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
.filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
- .filter(add => add.parentPath.node.type === 'ExpressionStatement');
-
- topLevelAddExpressions.replaceWith(convertToModuleExports);
+ .filter(add => add.parentPath.node.type === 'ExpressionStatement')
+ .forEach(convertToModuleExports);
return root.toSource({ quote: 'single', trailingComma: 'true', tabWidth: 2 });
}
From 380856853b03d53def77fbfe8a37695120be3ea4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2019 16:52:43 +0800
Subject: [PATCH 169/371] Convert to module codemod documentation
---
lib/codemod/README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 42 insertions(+)
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index f319e19ffe41..e062299e455a 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -132,3 +132,45 @@ Heuristics:
- The storiesOf "kind" name must be Button
- Button must be imported in the file
+
+### convert-to-module-format
+
+This converts all of your "old-style" `storiesOf` stories into component module format, which uses standard ES6 modules.
+
+```js
+storiesOf('Button', module)
+ .add('story', () => )
+ .add('second story', () => )
+ .add('complex story', () => (
+
+
+
+
+ ));
+```
+
+Becomes:
+
+```js
+export default {
+ title: 'Button',
+};
+
+export const story = () => ;
+
+export const story2 = () => ;
+story2.title = 'second story';
+
+export const story3 = () => (
+
+
+
+
+);
+story3.title = 'complex story';
+```
+
+Heuristics:
+
+- If a file has any default export, it will be skipped
+- If a file has multiple `storiesOf` declarations, it will convert each one seperately. This generates invalid ES6, but you can edit the file by hand to split it into multiple files (or whatever is appropriate).
From e2ced37f210872ad314f9cdfb06ca783a37154eb Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Sun, 23 Jun 2019 17:28:40 +0800
Subject: [PATCH 170/371] Update convert-to-module-format docs & make it build
---
.babelrc.js | 1 +
lib/codemod/README.md | 6 ++++++
2 files changed, 7 insertions(+)
diff --git a/.babelrc.js b/.babelrc.js
index 9533d25af296..3fa92abb65dd 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -13,6 +13,7 @@ const withTests = {
};
module.exports = {
+ ignore: ['./lib/codemod/src/transforms/__testfixtures__'],
presets: [
['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
'@babel/preset-typescript',
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index e062299e455a..f130f7d3b99b 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -137,6 +137,12 @@ Heuristics:
This converts all of your "old-style" `storiesOf` stories into component module format, which uses standard ES6 modules.
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/convert-to-module-format.js . --ignore-pattern "node_modules|dist"
+```
+
+For example:
+
```js
storiesOf('Button', module)
.add('story', () => )
From c4e7ace84f7b860ba61ff88fb6bad49d5e8fabf7 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:06:27 +0800
Subject: [PATCH 171/371] Automatically remove storiesOf import
---
.../convert-to-module-format/basic.output.js | 2 +-
.../convert-to-module-format/parameters.output.js | 2 --
.../story-parameters.output.js | 2 --
.../src/transforms/convert-to-module-format.js | 15 ++++++++++++++-
4 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
index 1fd0819fbba3..a2903f7cb7ca 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -2,7 +2,7 @@
import React from 'react';
import Button from './Button';
-import { storiesOf, configure } from '@storybook/react';
+import { configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
export default {
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
index 7dcafe93c2e0..1eb4e9209981 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -2,8 +2,6 @@
import React from 'react';
import Button from './Button';
-import { storiesOf } from '@storybook/react';
-
export default {
title: 'Button',
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
index 555426b67b9c..dd9ef9210c53 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -2,8 +2,6 @@
import React from 'react';
import Button from './Button';
-import { storiesOf } from '@storybook/react';
-
export default {
title: 'Button',
};
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index 1b2e09dedabb..508873c3a5dd 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -147,12 +147,25 @@ export default function transformer(file, api) {
// each top-level add expression corresponds to the last "add" of the chain.
// replace it with the entire export statements
- const topLevelAddExpressions = root
+ root
.find(j.CallExpression)
.filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
.filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
.filter(add => add.parentPath.node.type === 'ExpressionStatement')
.forEach(convertToModuleExports);
+ // remove storiesOf import
+ root
+ .find(j.ImportSpecifier)
+ .filter(
+ spec =>
+ spec.node.imported.name === 'storiesOf' &&
+ spec.parent.node.source.value.startsWith('@storybook/')
+ )
+ .forEach(spec => {
+ const toRemove = spec.parent.node.specifiers.length > 1 ? spec : spec.parent;
+ j(toRemove).remove();
+ });
+
return root.toSource({ quote: 'single', trailingComma: 'true', tabWidth: 2 });
}
From 710b88f3b3a14fa2f571650f6681f50077d10987 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:23:57 +0800
Subject: [PATCH 172/371] Convert cra-kitchen-sink to module format
---
.../cra-kitchen-sink/.storybook/config.js | 13 +--
.../src/stories/Lifecycle.stories.js | 7 +-
.../src/stories/cra-dynamic-import.stories.js | 12 ++-
.../src/stories/force-rerender.stories.js | 10 +-
.../src/stories/index.stories.js | 91 ++++++++++---------
.../src/stories/long-description.stories.js | 11 ++-
.../cra-kitchen-sink/src/stories/welcome.js | 14 ++-
7 files changed, 88 insertions(+), 70 deletions(-)
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 4561957a6fb3..14d22aae736b 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
+import { load, addParameters, addDecorator } from '@storybook/react';
import { create } from '@storybook/theming';
import { withA11y } from '@storybook/addon-a11y';
@@ -21,13 +21,4 @@ addParameters({
},
});
-function loadStories() {
- // put welcome screen at the top of the list so it's the first one displayed
- require('../src/stories/welcome');
-
- // automatically import all story js files that end with *.stories.js
- const req = require.context('../src/stories', true, /\.stories\.js$/);
- req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
index 701812e1e03c..0b48d1a40321 100644
--- a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -1,5 +1,8 @@
import React from 'react';
-import { storiesOf } from '@storybook/react';
import LifecycleLogger from '../components/LifecycleLogger';
-storiesOf('Lifecycle', module).add('logging', () => );
+export default {
+ title: 'Lifecycle',
+};
+
+export const logging = () => ;
diff --git a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
index 108e56b2d14b..c182f9cec552 100644
--- a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
@@ -1,9 +1,13 @@
import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
let Component;
-storiesOf('CRA', module).add('Dynamic import', () => {
+export default {
+ title: 'CRA',
+};
+
+export const story1 = () => {
if (!Component) {
import('@storybook/react/demo').then(({ Button }) => {
Component = Button;
@@ -14,4 +18,6 @@ storiesOf('CRA', module).add('Dynamic import', () => {
}
return Hello Button ;
-});
+};
+
+story1.title = 'Dynamic import';
diff --git a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
index 07e1a2d19568..ad1c9edb4f68 100644
--- a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
let count = 0;
const increment = () => {
@@ -7,8 +7,12 @@ const increment = () => {
forceReRender();
};
-storiesOf('Force ReRender', module).add('button', () => (
+export default {
+ title: 'Force ReRender',
+};
+
+export const button = () => (
Click me to increment: {count}
-));
+);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 3f0d43a8cc7f..7ddf65784949 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,5 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { Button } from '@storybook/react/demo';
@@ -23,46 +23,53 @@ const InfoButton = () => (
);
-storiesOf('Button', module)
- .addParameters({
+export default {
+ title: 'Button',
+
+ parameters: {
component: Button,
- })
- .add('with text', () => Hello Button , {
- options: { selectedPanel: 'storybook/actions/panel' },
- })
- .add(
- 'with some emoji',
- () => (
-
-
- 😀 😎 👍 💯
-
-
- ),
- {
- options: { selectedPanel: 'storybook/actions/panel' },
- }
- )
- .add('with notes', () => Check my notes in the notes panel , {
- notes: 'A very simple button',
- options: { selectedPanel: 'storybook/notes/panel' },
- })
- .add(
- 'with new info',
- context => (
-
-
- click the label in top right for info about "{context.name}"
-
-
+ },
+};
+
+export const story1 = () => Hello Button ;
+story1.title = 'with text';
+story1.parameters = {
+ options: { selectedPanel: 'storybook/actions/panel' },
+};
+
+export const story2 = () => (
+
+
+ 😀 😎 👍 💯
+
+
+);
+story2.title = 'with some emoji';
+story2.parameters = {
+ options: { selectedPanel: 'storybook/actions/panel' },
+};
+
+export const story3 = () => Check my notes in the notes panel ;
+story3.title = 'with notes';
+story3.parameters = {
+ notes: 'A very simple button',
+ options: { selectedPanel: 'storybook/notes/panel' },
+};
+
+export const story4 = context => (
+
+
+ click the label in top right for info about "{context.name}"
+
+
+);
+story4.title = 'with new info';
+story4.parameters = {
+ notes: 'Composition: Info(Notes())',
+ options: { selectedPanel: 'storybook/info/panel' },
+ decorators: [
+ withInfo(
+ 'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
),
- {
- notes: 'Composition: Info(Notes())',
- options: { selectedPanel: 'storybook/info/panel' },
- decorators: [
- withInfo(
- 'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
- ),
- ],
- }
- );
+ ],
+};
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
index d5d6124ab875..e29448792fca 100644
--- a/examples/cra-kitchen-sink/src/stories/long-description.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -1,9 +1,12 @@
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import centered from '@storybook/addon-centered/react';
import { Button } from '@storybook/react/demo';
-storiesOf('Some really long story kind description', module)
- .addDecorator(centered)
- .add('with text', () => Hello Button );
+export default {
+ title: 'Some really long story kind description',
+ decorators: [centered],
+};
+
+export const story1 = () => Hello Button ;
+story1.title = 'with text';
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
index 936d40e39e31..cbadd8d9b90f 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -1,10 +1,14 @@
import React from 'react';
import { Welcome } from '@storybook/react/demo';
-import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
-storiesOf('Welcome', module)
- .addParameters({
+export default {
+ title: 'Welcome',
+
+ parameters: {
component: Welcome,
- })
- .add('to Storybook', () => );
+ },
+};
+
+export const story1 = () => ;
+story1.title = 'to Storybook';
From b07acdc8b4e6de7e79ddc4555a7585fb0fc0d68d Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:29:00 +0800
Subject: [PATCH 173/371] Convert cra-react15 to module format
---
examples/cra-react15/.storybook/config.js | 8 ++----
.../cra-react15/src/stories/button.stories.js | 22 ++++++++++++++++
examples/cra-react15/src/stories/index.js | 26 -------------------
.../src/stories/welcome.stories.js | 13 ++++++++++
4 files changed, 37 insertions(+), 32 deletions(-)
create mode 100644 examples/cra-react15/src/stories/button.stories.js
delete mode 100644 examples/cra-react15/src/stories/index.js
create mode 100644 examples/cra-react15/src/stories/welcome.stories.js
diff --git a/examples/cra-react15/.storybook/config.js b/examples/cra-react15/.storybook/config.js
index 171047231878..115943f0f4f4 100644
--- a/examples/cra-react15/.storybook/config.js
+++ b/examples/cra-react15/.storybook/config.js
@@ -1,14 +1,10 @@
-import { configure, addParameters } from '@storybook/react';
+import { load, addParameters } from '@storybook/react';
import { create } from '@storybook/theming/create';
-function loadStories() {
- require('../src/stories');
-}
-
addParameters({
options: {
theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
},
});
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-react15/src/stories/button.stories.js b/examples/cra-react15/src/stories/button.stories.js
new file mode 100644
index 000000000000..ca0e01a2ac99
--- /dev/null
+++ b/examples/cra-react15/src/stories/button.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+ title: 'Button',
+ parameters: {
+ component: Button,
+ },
+};
+
+export const story1 = () => Hello Button ;
+story1.title = 'with text';
+
+export const story2 = () => (
+
+
+ 😀 😎 👍 💯
+
+
+);
+story2.title = 'with some emoji';
diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js
deleted file mode 100644
index 9813c023564c..000000000000
--- a/examples/cra-react15/src/stories/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module)
- .addParameters({
- component: Welcome,
- })
- .add('to Storybook', () => );
-
-storiesOf('Button', module)
- .addParameters({
- component: Button,
- })
- .add('with text', () => Hello Button )
- .add('with some emoji', () => (
-
-
- 😀 😎 👍 💯
-
-
- ));
diff --git a/examples/cra-react15/src/stories/welcome.stories.js b/examples/cra-react15/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..bb587d6136a5
--- /dev/null
+++ b/examples/cra-react15/src/stories/welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+ title: 'Welcome',
+ parameters: {
+ component: Welcome,
+ },
+};
+
+export const story1 = () => ;
+story1.title = 'to Storybook';
From f7adf9ad4853a9cb45d41312995d426cb3fa842d Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:39:54 +0800
Subject: [PATCH 174/371] Convert html-kitchen-sink to module format
---
.../html-kitchen-sink/.storybook/config.js | 12 +-
.../stories/addon-a11y.stories.js | 41 ++++---
.../stories/addon-actions.stories.js | 56 +++++----
.../stories/addon-backgrounds.stories.js | 23 ++--
.../stories/addon-centered.stories.js | 11 +-
.../stories/addon-events.stories.js | 65 +++++-----
.../stories/addon-jest.stories.js | 14 ++-
.../stories/addon-knobs.stories.js | 111 ++++++++++--------
.../stories/addon-notes.stories.js | 26 ++--
.../stories/button.stories.js | 17 +++
.../stories/index.stories.js | 24 ----
.../stories/welcome.stories.js | 9 ++
12 files changed, 215 insertions(+), 194 deletions(-)
create mode 100644 examples/html-kitchen-sink/stories/button.stories.js
delete mode 100644 examples/html-kitchen-sink/stories/index.stories.js
create mode 100644 examples/html-kitchen-sink/stories/welcome.stories.js
diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
index df93c95611ea..eeb82641683e 100644
--- a/examples/html-kitchen-sink/.storybook/config.js
+++ b/examples/html-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/html';
+import { load, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y);
@@ -16,12 +16,4 @@ addParameters({
},
});
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
- // Make welcome story default
- require('../stories/index.stories');
- req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index d6b2c50319e4..d63dcad554a8 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,23 +1,28 @@
import { document, setTimeout } from 'global';
-import { storiesOf } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
const text = 'Testing the a11y addon';
-storiesOf('Addons|a11y', module)
- .addDecorator(withA11y)
- .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
- .add('Default', () => ` `)
- .add('Label', () => `${text} `)
- .add('Disabled', () => `${text} `)
- .add(
- 'Invalid contrast',
- () => `${text} `
- )
- .add('Delayed render', () => {
- const div = document.createElement('div');
- setTimeout(() => {
- div.innerHTML = `This button has a delayed render of 1s `;
- }, 1000);
- return div;
- });
+export default {
+ title: 'Addons|a11y',
+ decorators: [withA11y],
+ parameters: {
+ options: { selectedPanel: 'storybook/a11y/panel' },
+ },
+};
+
+export const Default = () => ` `;
+export const Label = () => `${text} `;
+export const Disabled = () => `${text} `;
+export const story4 = () =>
+ `${text} `;
+story4.title = 'Invalid contrast';
+
+export const story5 = () => {
+ const div = document.createElement('div');
+ setTimeout(() => {
+ div.innerHTML = `This button has a delayed render of 1s `;
+ }, 1000);
+ return div;
+};
+story5.title = 'Delayed render';
diff --git a/examples/html-kitchen-sink/stories/addon-actions.stories.js b/examples/html-kitchen-sink/stories/addon-actions.stories.js
index 09f606d58dd4..f5e44cddc3c9 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -1,34 +1,44 @@
-import { storiesOf } from '@storybook/html';
import { withActions, decorate } from '@storybook/addon-actions';
const pickTarget = decorate([args => [args[0].target]]);
const button = () => `Hello World `;
-storiesOf('Addons|Actions', module)
- .add('Hello World', () => withActions('click')(button))
- .add('Multiple actions', () => withActions('click', 'contextmenu')(button))
- .add('Multiple actions + config', () =>
- withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
- )
- .add('Multiple actions, object', () =>
- withActions({ click: 'clicked', contextmenu: 'right clicked' })(button)
- )
- .add('Multiple actions, selector', () =>
- withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
- () => `
+export default {
+ title: 'Addons|Actions',
+};
+
+export const story1 = () => withActions('click')(button);
+story1.title = 'Hello World';
+export const story2 = () => withActions('click', 'contextmenu')(button);
+story2.title = 'Multiple actions';
+
+export const story3 = () =>
+ withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story3.title = 'Multiple actions + config';
+
+export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+story4.title = 'Multiple actions, object';
+
+export const story5 = () =>
+ withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
+ () => `
Clicks on this button will be logged: Button
`
- )
- )
- .add('Multiple actions, object + config', () =>
- withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
- button
- )
- )
- .add('Decorated actions', () => pickTarget.withActions('click', 'contextmenu')(button))
- .add('Decorated actions + config', () =>
- pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
);
+story5.title = 'Multiple actions, selector';
+
+export const story6 = () =>
+ withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
+ button
+ );
+story6.title = 'Multiple actions, object + config';
+
+export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+story7.title = 'Decorated actions';
+
+export const story8 = () =>
+ pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story8.title = 'Decorated actions + config';
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index 7e8689f96560..22ae8971afdf 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -1,15 +1,16 @@
-import { storiesOf } from '@storybook/html';
-
-storiesOf('Addons|Backgrounds', module)
- .addParameters({
+export default {
+ title: 'Addons|Backgrounds',
+ parameters: {
backgrounds: [
{ name: 'light', value: '#eeeeee' },
{ name: 'dark', value: '#222222', default: true },
],
- })
- .add(
- 'story 1',
- () =>
- 'You should be able to switch backgrounds for this story '
- )
- .add('story 2', () => 'This one too! ');
+ },
+};
+
+export const story1 = () =>
+ 'You should be able to switch backgrounds for this story ';
+story1.title = 'story 1';
+
+export const story2 = () => 'This one too! ';
+story2.title = 'story 2';
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
index 49edcdfb4821..adcda5c60e8b 100644
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-centered.stories.js
@@ -1,6 +1,9 @@
-import { storiesOf } from '@storybook/html';
import centered from '@storybook/addon-centered/html';
-storiesOf('Addons|Centered', module)
- .addDecorator(centered)
- .add('button in center', () => 'I am a Button ! ');
+export default {
+ title: 'Addons|Centered',
+ decorators: [centered],
+};
+
+export const story1 = () => 'I am a Button ! ';
+story1.title = 'button in center';
diff --git a/examples/html-kitchen-sink/stories/addon-events.stories.js b/examples/html-kitchen-sink/stories/addon-events.stories.js
index 5da5b3b9c38a..812ddc22cb10 100644
--- a/examples/html-kitchen-sink/stories/addon-events.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-events.stories.js
@@ -1,5 +1,4 @@
import EventEmitter from 'eventemitter3';
-import { storiesOf } from '@storybook/html';
import addons from '@storybook/addons';
import CoreEvents from '@storybook/core-events';
import json from 'format-json';
@@ -32,8 +31,9 @@ const subscription = () => {
return () => eventHandlers.forEach(({ name, handler }) => emitter.removeListener(name, handler));
};
-storiesOf('Addons|Events', module)
- .addDecorator(
+export default {
+ title: 'Addons|Events',
+ decorators: [
withEvents({
emit,
events: [
@@ -83,33 +83,32 @@ storiesOf('Addons|Events', module)
],
},
],
- })
- )
- .addDecorator(storyFn => {
- addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
- return storyFn();
- })
- .add(
- 'Logger',
- () => `
-
-
Logger
-
- ${events
- .map(
- ({ name, payload }) => `
-
-
- Event name: ${name}
-
-
- Event payload: ${json.plain(payload)}
-
-
- `
- )
- .join('')}
-
-
- `
- );
+ }),
+ storyFn => {
+ addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+ return storyFn();
+ },
+ ],
+};
+
+export const Logger = () => `
+
+
Logger
+
+ ${events
+ .map(
+ ({ name, payload }) => `
+
+
+ Event name: ${name}
+
+
+ Event payload: ${json.plain(payload)}
+
+
+ `
+ )
+ .join('')}
+
+
+`;
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index 11a88e0570e7..d39a86527ed5 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -1,8 +1,10 @@
-import { storiesOf } from '@storybook/html';
-
-import { withTests } from '@storybook/addon-jest';
+import { withTests as wt } from '@storybook/addon-jest';
import results from './addon-jest.testresults.json';
-storiesOf('Addons|Jest', module)
- .addDecorator(withTests({ results }))
- .add('withTests', () => 'This story shows test results', { jest: 'addon-jest' });
+export default {
+ title: 'Addons|Jest',
+ decorators: [wt({ results })],
+};
+
+export const withTests = () => 'This story shows test results';
+withTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index 85a364b5b686..85720dcc7c7b 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/html';
import { action } from '@storybook/addon-actions';
import { document } from 'global';
@@ -15,63 +14,68 @@ import {
} from '@storybook/addon-knobs';
const cachedContainer = document.createElement('p');
-storiesOf('Addons|Knobs', module)
- .addDecorator(withKnobs)
- .add('Simple', () => {
- const name = text('Name', 'John Doe');
- const age = number('Age', 44);
- const content = `I am ${name} and I'm ${age} years old.`;
- return `${content}
`;
- })
- .add('DOM', () => {
- const name = text('Name', 'John Doe');
- const container = document.createElement('p');
- container.textContent = name;
- return container;
- })
- .add('CSS transitions', () => {
- const name = text('Name', 'John Doe');
- const textColor = color('Text color', 'orangered');
- cachedContainer.textContent = name;
- cachedContainer.style.transition = 'color 0.5s ease-out';
- cachedContainer.style.color = textColor;
- return cachedContainer;
- })
- .add('All knobs', () => {
- const name = text('Name', 'Jane');
- const stock = number('Stock', 20, {
- range: true,
- min: 0,
- max: 30,
- step: 5,
- });
- const fruits = {
- Apple: 'apples',
- Banana: 'bananas',
- Cherry: 'cherries',
- };
- const fruit = select('Fruit', fruits, 'apples');
+export default {
+ title: 'Addons|Knobs',
+ decorators: [withKnobs],
+};
- const price = number('Price', 2.25);
+export const Simple = () => {
+ const name = text('Name', 'John Doe');
+ const age = number('Age', 44);
+ const content = `I am ${name} and I'm ${age} years old.`;
+ return `${content}
`;
+};
- const colour = color('Border', 'deeppink');
- const today = date('Today', new Date('Jan 20 2017 GMT+0'));
- const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
- const nice = boolean('Nice', true);
+export const DOM = () => {
+ const name = text('Name', 'John Doe');
+ const container = document.createElement('p');
+ container.textContent = name;
+ return container;
+};
- const stockMessage = stock
- ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
- : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+export const story3 = () => {
+ const name = text('Name', 'John Doe');
+ const textColor = color('Text color', 'orangered');
+ cachedContainer.textContent = name;
+ cachedContainer.style.transition = 'color 0.5s ease-out';
+ cachedContainer.style.color = textColor;
+ return cachedContainer;
+};
+story3.title = 'CSS transitions';
- const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
- const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const story4 = () => {
+ const name = text('Name', 'Jane');
+ const stock = number('Stock', 20, {
+ range: true,
+ min: 0,
+ max: 30,
+ step: 5,
+ });
+ const fruits = {
+ Apple: 'apples',
+ Banana: 'bananas',
+ Cherry: 'cherries',
+ };
+ const fruit = select('Fruit', fruits, 'apples');
+ const price = number('Price', 2.25);
+ const colour = color('Border', 'deeppink');
+ const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+ const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+ const nice = boolean('Nice', true);
- button('Arbitrary action', action('You clicked it!'));
+ const stockMessage = stock
+ ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
+ : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
- const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+ const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+ const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
- return `
+ button('Arbitrary action', action('You clicked it!'));
+
+ const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+
+ return `
My name is ${name},
today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}
${stockMessage}
@@ -80,5 +84,8 @@ storiesOf('Addons|Knobs', module)
${salutation}
`;
- })
- .add('XSS safety', () => text('Rendered string', '
'));
+};
+story4.title = 'All knobs';
+
+export const story5 = () => text('Rendered string', '
');
+story5.title = 'XSS safety';
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
index fab6f368a321..a5c3078cfae9 100644
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-notes.stories.js
@@ -1,14 +1,14 @@
-import { storiesOf } from '@storybook/html';
+export default {
+ title: 'Addons|Notes',
+};
-storiesOf('Addons|Notes', module).add(
- 'Simple note',
- () =>
- `
-
- This is a fragment of HTML
-
-
`,
- {
- notes: 'My notes on some bold text',
- }
-);
+export const story1 = () =>
+ `
+
+ This is a fragment of HTML
+
+
`;
+story1.title = 'Simple note';
+story1.parameters = {
+ notes: 'My notes on some bold text',
+};
diff --git a/examples/html-kitchen-sink/stories/button.stories.js b/examples/html-kitchen-sink/stories/button.stories.js
new file mode 100644
index 000000000000..02ed6aae869b
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/button.stories.js
@@ -0,0 +1,17 @@
+import { document } from 'global';
+import { action } from '@storybook/addon-actions';
+
+export default {
+ title: 'Demo',
+};
+
+export const heading = () => '
Hello World ';
+export const headings = () =>
+ '
Hello World Hello World Hello World Hello World ';
+
+export const button = () => {
+ const btn = document.createElement('button');
+ btn.innerHTML = 'Hello Button';
+ btn.addEventListener('click', action('Click'));
+ return btn;
+};
diff --git a/examples/html-kitchen-sink/stories/index.stories.js b/examples/html-kitchen-sink/stories/index.stories.js
deleted file mode 100644
index 1dcedbdb3522..000000000000
--- a/examples/html-kitchen-sink/stories/index.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { document } from 'global';
-import { storiesOf } from '@storybook/html';
-import { action } from '@storybook/addon-actions';
-import { withLinks } from '@storybook/addon-links';
-
-import './welcome.css';
-import welcome from './welcome.html';
-
-storiesOf('Welcome', module)
- .addDecorator(withLinks)
- .add('Welcome', () => welcome);
-
-storiesOf('Demo', module)
- .add('heading', () => '
Hello World ')
- .add(
- 'headings',
- () => '
Hello World Hello World Hello World Hello World '
- )
- .add('button', () => {
- const button = document.createElement('button');
- button.innerHTML = 'Hello Button';
- button.addEventListener('click', action('Click'));
- return button;
- });
diff --git a/examples/html-kitchen-sink/stories/welcome.stories.js b/examples/html-kitchen-sink/stories/welcome.stories.js
new file mode 100644
index 000000000000..d8083faed6a3
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/welcome.stories.js
@@ -0,0 +1,9 @@
+import { storiesOf } from '@storybook/html';
+import { withLinks } from '@storybook/addon-links';
+
+import './welcome.css';
+import welcome from './welcome.html';
+
+storiesOf('Welcome', module)
+ .addDecorator(withLinks)
+ .add('Welcome', () => welcome);
From 5773caed2076d3e574082b774b5f7ad524b0eb6e Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:46:03 +0800
Subject: [PATCH 175/371] Convert marko-cli to module format
---
examples/marko-cli/.storybook/config.js | 13 ++------
.../src/stories/addon-actions.stories.js | 12 ++++----
.../src/stories/addon-knobs.stories.js | 28 +++++++++--------
.../src/stories/clickcount.stories.js | 11 +++++++
.../marko-cli/src/stories/hello.stories.js | 12 ++++++++
.../marko-cli/src/stories/index.stories.js | 30 -------------------
.../src/stories/stopwatch.stories.js | 10 +++++++
.../marko-cli/src/stories/welcome.stories.js | 10 +++++++
8 files changed, 67 insertions(+), 59 deletions(-)
create mode 100644 examples/marko-cli/src/stories/clickcount.stories.js
create mode 100644 examples/marko-cli/src/stories/hello.stories.js
delete mode 100644 examples/marko-cli/src/stories/index.stories.js
create mode 100644 examples/marko-cli/src/stories/stopwatch.stories.js
create mode 100644 examples/marko-cli/src/stories/welcome.stories.js
diff --git a/examples/marko-cli/.storybook/config.js b/examples/marko-cli/.storybook/config.js
index bee4a6743547..9964ec17b8e5 100644
--- a/examples/marko-cli/.storybook/config.js
+++ b/examples/marko-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/marko';
+import { load, addParameters, addDecorator } from '@storybook/marko';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y);
@@ -8,13 +8,4 @@ addParameters({
},
});
-function loadStories() {
- // put welcome screen at the top of the list so it's the first one displayed
- // require('../src/stories/welcome');
-
- // automatically import all story js files that end with *.stories.js
- const req = require.context('../src/stories', true, /\.stories\.js$/);
- req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/marko-cli/src/stories/addon-actions.stories.js b/examples/marko-cli/src/stories/addon-actions.stories.js
index fe094b3f4acd..aeb7e22788b3 100644
--- a/examples/marko-cli/src/stories/addon-actions.stories.js
+++ b/examples/marko-cli/src/stories/addon-actions.stories.js
@@ -1,9 +1,11 @@
-import { storiesOf } from '@storybook/marko';
import { action } from '@storybook/addon-actions';
import Button from '../components/action-button/index.marko';
-storiesOf('Addons|Actions/Button', module)
- .addParameters({
+export default {
+ title: 'Addons|Actions/Button',
+ parameters: {
component: Button,
- })
- .add('Simple', () => Button.renderSync({ click: action('action logged!') }));
+ },
+};
+
+export const Simple = () => Button.renderSync({ click: action('action logged!') });
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
index f6236d9862a0..88595ecee276 100644
--- a/examples/marko-cli/src/stories/addon-knobs.stories.js
+++ b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -1,18 +1,20 @@
-import { storiesOf } from '@storybook/marko';
import { withKnobs, text, number } from '@storybook/addon-knobs';
import Hello from '../components/hello/index.marko';
-storiesOf('Addons|Knobs/Hello', module)
- .addParameters({
+export default {
+ title: 'Addons|Knobs/Hello',
+ decorators: [withKnobs],
+ parameters: {
component: Hello,
- })
- .addParameters({ options: { panelPosition: 'right' } })
- .addDecorator(withKnobs)
- .add('Simple', () => {
- const name = text('Name', 'John Doe');
- const age = number('Age', 44);
- return Hello.renderSync({
- name,
- age,
- });
+ options: { panelPosition: 'right' },
+ },
+};
+
+export const Simple = () => {
+ const name = text('Name', 'John Doe');
+ const age = number('Age', 44);
+ return Hello.renderSync({
+ name,
+ age,
});
+};
diff --git a/examples/marko-cli/src/stories/clickcount.stories.js b/examples/marko-cli/src/stories/clickcount.stories.js
new file mode 100644
index 000000000000..351c07daca61
--- /dev/null
+++ b/examples/marko-cli/src/stories/clickcount.stories.js
@@ -0,0 +1,11 @@
+import ClickCount from '../components/click-count/index.marko';
+
+export default {
+ title: 'Main|ClickCount',
+
+ parameters: {
+ component: ClickCount,
+ },
+};
+
+export const Simple = () => ClickCount.renderSync({});
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
new file mode 100644
index 000000000000..e6b0890eafdd
--- /dev/null
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -0,0 +1,12 @@
+import Hello from '../components/hello/index.marko';
+
+export default {
+ title: 'Main|Hello',
+ parameters: {
+ component: Hello,
+ },
+};
+
+export const Simple = () => Hello.renderSync({ name: 'abc', age: 20 });
+export const story2 = () => 'NOT A MARKO RENDER_RESULT';
+story2.title = 'with ERROR!';
diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
deleted file mode 100644
index 9437d7ff170e..000000000000
--- a/examples/marko-cli/src/stories/index.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { storiesOf } from '@storybook/marko';
-import Hello from '../components/hello/index.marko';
-import ClickCount from '../components/click-count/index.marko';
-import StopWatch from '../components/stop-watch/index.marko';
-import Welcome from '../components/welcome/index.marko';
-
-storiesOf('Main|Welcome', module)
- .addParameters({
- component: Welcome,
- })
- .add('welcome', () => Welcome.renderSync({}));
-
-storiesOf('Main|Hello', module)
- .addParameters({
- component: Hello,
- })
- .add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
- .add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
-
-storiesOf('Main|ClickCount', module)
- .addParameters({
- component: ClickCount,
- })
- .add('Simple', () => ClickCount.renderSync({}));
-
-storiesOf('Main|StopWatch', module)
- .addParameters({
- component: StopWatch,
- })
- .add('Simple', () => StopWatch.renderSync({}));
diff --git a/examples/marko-cli/src/stories/stopwatch.stories.js b/examples/marko-cli/src/stories/stopwatch.stories.js
new file mode 100644
index 000000000000..3fc37effb062
--- /dev/null
+++ b/examples/marko-cli/src/stories/stopwatch.stories.js
@@ -0,0 +1,10 @@
+import StopWatch from '../components/stop-watch/index.marko';
+
+export default {
+ title: 'Main|StopWatch',
+ parameters: {
+ component: StopWatch,
+ },
+};
+
+export const Simple = () => StopWatch.renderSync({});
diff --git a/examples/marko-cli/src/stories/welcome.stories.js b/examples/marko-cli/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..9cd2db677092
--- /dev/null
+++ b/examples/marko-cli/src/stories/welcome.stories.js
@@ -0,0 +1,10 @@
+import Welcome from '../components/welcome/index.marko';
+
+export default {
+ title: 'Main|Welcome',
+ parameters: {
+ component: Welcome,
+ },
+};
+
+export const welcome = () => Welcome.renderSync({});
From 98d647563fd62dbc276aee4afcf734006e16ddcc Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 00:51:22 +0800
Subject: [PATCH 176/371] Convert mithril-kitchen-sink to module format
---
.../mithril-kitchen-sink/.storybook/config.js | 9 +-
.../src/stories/addon-actions.stories.js | 67 +++++-----
.../src/stories/addon-backgrounds.stories.js | 27 ++--
.../src/stories/addon-centered.stories.js | 19 +--
.../src/stories/addon-knobs.stories.js | 119 +++++++++---------
.../src/stories/addon-links.stories.js | 10 +-
.../src/stories/addon-notes.stories.js | 90 ++++++-------
.../src/stories/button.stories.js | 28 +++++
.../src/stories/index.stories.js | 32 -----
.../src/stories/welcome.stories.js | 16 +++
10 files changed, 223 insertions(+), 194 deletions(-)
create mode 100644 examples/mithril-kitchen-sink/src/stories/button.stories.js
delete mode 100644 examples/mithril-kitchen-sink/src/stories/index.stories.js
create mode 100644 examples/mithril-kitchen-sink/src/stories/welcome.stories.js
diff --git a/examples/mithril-kitchen-sink/.storybook/config.js b/examples/mithril-kitchen-sink/.storybook/config.js
index 1155598a41c8..952cb333b8ce 100644
--- a/examples/mithril-kitchen-sink/.storybook/config.js
+++ b/examples/mithril-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/mithril';
+import { load, addParameters, addDecorator } from '@storybook/mithril';
import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y);
@@ -8,9 +8,4 @@ addParameters({
},
});
-function loadStories() {
- const req = require.context('../src/stories', true, /\.stories\.js$/);
- req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
index 358031795d45..846efb85992d 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,37 +1,44 @@
/** @jsx m */
import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
import { action, actions } from '@storybook/addon-actions';
import Button from '../Button';
-storiesOf('Addons|Actions', module)
- .add('Action only', () => ({
- view: () => Click me to log the action ,
- }))
- .add('Multiple actions', () => ({
- view: () => (
- (Double) click me to log the action
- ),
- }))
- .add('Multiple actions, object', () => ({
- view: () => (
-
- (Double) click me to log the action
-
- ),
- }))
+export default {
+ title: 'Addons|Actions',
+};
+
+export const story1 = () => ({
+ view: () => Click me to log the action ,
+});
+story1.title = 'Action only';
+
+export const story2 = () => ({
+ view: () => (
+ (Double) click me to log the action
+ ),
+});
+story2.title = 'Multiple actions';
+
+export const story3 = () => ({
+ view: () => (
+
+ (Double) click me to log the action
+
+ ),
+});
+story3.title = 'Multiple actions, object';
- .add('Action and method', () => ({
- view: () => (
- {
- e.preventDefault();
- action('log2')(e.target);
- }}
- >
- Click me to log the action
-
- ),
- }));
+export const story4 = () => ({
+ view: () => (
+ {
+ e.preventDefault();
+ action('log2')(e.target);
+ }}
+ >
+ Click me to log the action
+
+ ),
+});
+story4.title = 'Action and method';
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
index ea67de2836c9..a99963c6775a 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,21 +1,24 @@
/** @jsx m */
import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-
import BaseButton from '../BaseButton';
-storiesOf('Addons|Backgrounds', module)
- .addParameters({
+export default {
+ title: 'Addons|Backgrounds',
+ parameters: {
backgrounds: [
{ name: 'light', value: '#eeeeee' },
{ name: 'dark', value: '#222222', default: true },
],
- })
- .add('story 1', () => ({
- view: () => ,
- }))
- .add('story 2', () => ({
- view: () => ,
- }));
+ },
+};
+
+export const story1 = () => ({
+ view: () => ,
+});
+story1.title = 'story 1';
+
+export const story2 = () => ({
+ view: () => ,
+});
+story2.title = 'story 2';
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
index 3623a83e701b..f646d74b4a23 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,16 +1,17 @@
/** @jsx m */
import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
import Centered from '@storybook/addon-centered/mithril';
import Button from '../Button';
-storiesOf('Addons|Centered', module)
- .addParameters({
+export default {
+ title: 'Addons|Centered',
+ decorators: [Centered],
+ parameters: {
component: Centered,
- })
- .addDecorator(Centered)
- .add('button', () => ({
- view: () => A button ,
- }));
+ },
+};
+
+export const button = () => ({
+ view: () => A button ,
+});
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
index 244a3bd8a505..c799da483209 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,8 +1,6 @@
/** @jsx m */
import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
import { action } from '@storybook/addon-actions';
import {
withKnobs,
@@ -16,63 +14,70 @@ import {
button,
} from '@storybook/addon-knobs';
-storiesOf('Addons|Knobs', module)
- .addDecorator(withKnobs)
- .add('Simple', () => {
- const name = text('Name', 'John Doe');
- const age = number('Age', 44);
- const content = `I am ${name} and I'm ${age} years old.`;
+export default {
+ title: 'Addons|Knobs',
+ decorators: [withKnobs],
+};
+
+export const Simple = () => {
+ const name = text('Name', 'John Doe');
+ const age = number('Age', 44);
+ const content = `I am ${name} and I'm ${age} years old.`;
+
+ return {
+ view: () => {content}
,
+ };
+};
+
+export const story2 = () => {
+ const name = text('Name', 'Jane');
+ const stock = number('Stock', 20, {
+ range: true,
+ min: 0,
+ max: 30,
+ step: 5,
+ });
+ const fruits = {
+ Apple: 'apples',
+ Banana: 'bananas',
+ Cherry: 'cherries',
+ };
+ const fruit = select('Fruit', fruits, 'apples');
+ const price = number('Price', 2.25);
- return {
- view: () => {content}
,
- };
- })
- .add('All knobs', () => {
- const name = text('Name', 'Jane');
- const stock = number('Stock', 20, {
- range: true,
- min: 0,
- max: 30,
- step: 5,
- });
- const fruits = {
- Apple: 'apples',
- Banana: 'bananas',
- Cherry: 'cherries',
- };
- const fruit = select('Fruit', fruits, 'apples');
- const price = number('Price', 2.25);
+ const colour = color('Border', 'deeppink');
+ const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+ const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+ const nice = boolean('Nice', true);
- const colour = color('Border', 'deeppink');
- const today = date('Today', new Date('Jan 20 2017 GMT+0'));
- const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
- const nice = boolean('Nice', true);
+ const stockMessage = stock
+ ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
+ : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+ const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+ const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
- const stockMessage = stock
- ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
- : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
- const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
- const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+ button('Arbitrary action', action('You clicked it!'));
- button('Arbitrary action', action('You clicked it!'));
+ return {
+ view: () => (
+
+
My name is {name},
+
today is {new Date(today).toLocaleDateString('en-US', dateOptions)}
+
{stockMessage}
+
Also, I have:
+
+ {items.map(item => (
+ {item}
+ ))}
+
+
{salutation}
+
+ ),
+ };
+};
+story2.title = 'All knobs';
- return {
- view: () => (
-
-
My name is {name},
-
today is {new Date(today).toLocaleDateString('en-US', dateOptions)}
-
{stockMessage}
-
Also, I have:
-
- {items.map(item => (
- {item}
- ))}
-
-
{salutation}
-
- ),
- };
- })
- .add('XSS safety', () => ({
- view: () => text('Rendered string', ' '),
- }));
+export const story3 = () => ({
+ view: () => text('Rendered string', ' '),
+});
+story3.title = 'XSS safety';
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
index 51e786293367..0e0e7e0e0958 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
@@ -2,10 +2,14 @@
import m from 'mithril';
-import { storiesOf } from '@storybook/mithril';
import { linkTo } from '@storybook/addon-links';
import Button from '../Button';
-storiesOf('Addons|Links', module).add('Go to welcome', () => ({
+export default {
+ title: 'Addons|Links',
+};
+
+export const story1 = () => ({
view: () => This buttons links to Welcome ,
-}));
+});
+story1.title = 'Go to welcome';
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
index 4e5287f1aeba..0e83907e9e48 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,47 +1,49 @@
/** @jsx m */
import m from 'mithril';
-import { storiesOf } from '@storybook/mithril';
-
-storiesOf('Addons|Notes', module)
- .add(
- 'Simple note',
- () => ({
- view: () => (
-
-
- Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam
- sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec
- consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus
- arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at
- fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam,
- efficitur pulvinar mi urna id urna.
-
-
- ),
- }),
- { notes: 'My notes on some bold text' }
- )
- .add(
- 'Note with HTML',
- () => ({
- view: () => (
-
- 🤔😳😯😮
-
- 😄😩😓😱
-
- 🤓😑😶😊
-
- ),
- }),
- {
- notes: `
- My notes on emojies
-
- It's not all that important to be honest, but..
-
- Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
- `,
- }
- );
+
+export default {
+ title: 'Addons|Notes',
+};
+
+export const story1 = () => ({
+ view: () => (
+
+
+ Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
+ vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
+ velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
+ amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
+ sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi
+ urna id urna.
+
+
+ ),
+});
+
+story1.title = 'Simple note';
+story1.parameters = { notes: 'My notes on some bold text' };
+
+export const story2 = () => ({
+ view: () => (
+
+ 🤔😳😯😮
+
+ 😄😩😓😱
+
+ 🤓😑😶😊
+
+ ),
+});
+
+story2.title = 'Note with HTML';
+
+story2.parameters = {
+ notes: `
+ My notes on emojies
+
+ It's not all that important to be honest, but..
+
+ Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+ `,
+};
diff --git a/examples/mithril-kitchen-sink/src/stories/button.stories.js b/examples/mithril-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 000000000000..d0d7f351643b
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,28 @@
+import m from 'mithril';
+
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from '../Button';
+
+export default {
+ title: 'Button',
+ parameters: {
+ component: Button,
+ },
+};
+
+export const story1 = () => ({
+ view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+});
+story1.title = 'with text';
+
+export const story2 = () => ({
+ view: () =>
+ m(
+ Button,
+ { onclick: action('clicked') },
+ m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+ ),
+});
+story2.title = 'with some emoji';
diff --git a/examples/mithril-kitchen-sink/src/stories/index.stories.js b/examples/mithril-kitchen-sink/src/stories/index.stories.js
deleted file mode 100644
index fb5175691afd..000000000000
--- a/examples/mithril-kitchen-sink/src/stories/index.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Button from '../Button';
-import Welcome from '../Welcome';
-
-storiesOf('Welcome', module)
- .addParameters({
- component: Welcome,
- })
- .add('to Storybook', () => ({
- view: () => m(Welcome, { showApp: linkTo('Button') }),
- }));
-
-storiesOf('Button', module)
- .addParameters({
- component: Button,
- })
- .add('with text', () => ({
- view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
- }))
- .add('with some emoji', () => ({
- view: () =>
- m(
- Button,
- { onclick: action('clicked') },
- m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
- ),
- }));
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..19ed69d99cef
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,16 @@
+import m from 'mithril';
+import { linkTo } from '@storybook/addon-links';
+import Welcome from '../Welcome';
+
+export default {
+ title: 'Welcome',
+ parameters: {
+ component: Welcome,
+ },
+};
+
+export const story1 = () => ({
+ view: () => m(Welcome, { showApp: linkTo('Button') }),
+});
+
+story1.title = 'to Storybook';
From ab348ce0b622dc257c39656af5c290523821274f Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Sun, 23 Jun 2019 21:50:22 +0200
Subject: [PATCH 177/371] FIX lockfile
---
yarn.lock | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/yarn.lock b/yarn.lock
index cb304d8a382f..6f2cfb9bebbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10740,6 +10740,11 @@ envinfo@^5.7.0:
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.12.1.tgz#83068c33e0972eb657d6bc69a6df30badefb46ef"
integrity sha512-pwdo0/G3CIkQ0y6PCXq4RdkvId2elvtPCJMG0konqlrfkWQbf1DWeH9K2b/cvu2YgGvPPTOnonZxXM1gikFu1w==
+envinfo@^7.3.1:
+ version "7.3.1"
+ resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.3.1.tgz#892e42f7bf858b3446d9414ad240dbaf8da52f09"
+ integrity sha512-GvXiDTqLYrORVSCuJCsWHPXF5BFvoWMQA9xX4YVjPT1jyS3aZEHUBwjzxU/6LTPF9ReHgVEbX7IEN5UvSXHw/A==
+
enzyme-adapter-react-16@^1.9.1:
version "1.13.1"
resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.13.1.tgz#2e8ee300e38674b9914ae52b04af9493050355e2"
From df43048bf64966da4f1c3e8e6e88f18a91464af4 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 10:09:21 +0800
Subject: [PATCH 178/371] Module format codemod: add warnings && format with
prettier
---
lib/codemod/package.json | 1 +
.../convert-to-module-format/basic.output.js | 10 ++--
.../story-parameters.output.js | 10 ++--
.../transforms/convert-to-module-format.js | 47 +++++++++++++++----
4 files changed, 50 insertions(+), 18 deletions(-)
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index a7adaa35a17f..a5b6db2080b6 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -23,6 +23,7 @@
"dependencies": {
"core-js": "^3.0.1",
"jscodeshift": "^0.6.3",
+ "prettier": "^1.16.4",
"regenerator-runtime": "^0.12.1"
},
"publishConfig": {
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
index a2903f7cb7ca..1a8cd5c0b5ca 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -14,10 +14,10 @@ export const story2 = () =>
story2.title = 'second story';
export const story3 = () => (
-
-
-
-
- );
+
+
+
+
+);
story3.title = 'complex story';
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
index dd9ef9210c53..f89b007cb6e5 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -10,12 +10,12 @@ export const story1 = () => ;
story1.title = 'with story parameters';
story1.parameters = {
- header: false,
- inline: true,
- };
+ header: false,
+ inline: true,
+};
export const foo = () => ;
foo.parameters = {
- bar: 1,
- };
+ bar: 1,
+};
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index 508873c3a5dd..a776cc505483 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -1,4 +1,4 @@
-import { stat } from 'fs';
+import prettier from 'prettier';
/**
* Convert a legacy story file to module format
@@ -21,15 +21,10 @@ import { stat } from 'fs';
*
* NOTES: only support chained storiesOf() calls
*/
-export default function transformer(file, api) {
+export default function transformer(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
- const defaultExports = root.find(j.ExportDefaultDeclaration);
- if (defaultExports.size() > 0) {
- return root.toSource();
- }
-
function convertToModuleExports(path) {
const base = j(path);
@@ -145,6 +140,25 @@ export default function transformer(file, api) {
base.remove();
}
+ // Save the original storiesOf
+ const initialStoriesOf = root
+ .find(j.CallExpression)
+ .filter(call => call.node.callee.name === 'storiesOf');
+
+ const defaultExports = root.find(j.ExportDefaultDeclaration);
+ // If there's already a default export
+ if (defaultExports.size() > 0) {
+ if (initialStoriesOf.size() > 0) {
+ // eslint-disable-next-line no-console
+ console.log(
+ `Found ${initialStoriesOf.size()} 'storiesOf' calls but existing default export, SKIPPING: '${
+ file.path
+ }'`
+ );
+ }
+ return root.toSource();
+ }
+
// each top-level add expression corresponds to the last "add" of the chain.
// replace it with the entire export statements
root
@@ -167,5 +181,22 @@ export default function transformer(file, api) {
j(toRemove).remove();
});
- return root.toSource({ quote: 'single', trailingComma: 'true', tabWidth: 2 });
+ const source = root.toSource({ trailingComma: true, quote: 'single', tabWidth: 2 });
+ if (initialStoriesOf.size() > 1) {
+ // eslint-disable-next-line no-console
+ console.log(
+ `Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`
+ );
+ return source;
+ }
+
+ return prettier.format(source, {
+ parser: options.parser || 'babel',
+ // FIXME: storybook defaults
+ printWidth: 100,
+ tabWidth: 2,
+ bracketSpacing: true,
+ trailingComma: 'es5',
+ singleQuote: true,
+ });
}
From 3cf6acc579d383a8fc5f9b8e9b65e474b2cb3966 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Mon, 24 Jun 2019 17:23:37 +0800
Subject: [PATCH 179/371] Clean up comments
---
lib/api/src/modules/url.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index aa3a9bec6190..5530b9e6d717 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -103,7 +103,6 @@ export interface SubAPI {
setQueryParams: (input: QueryParams) => void;
}
-// export default function({ store, navigate, location, path: initialPath, ...rest }: Module) {
export default function({ store, navigate, state, provider, ...rest }: Module) {
const api: SubAPI = {
getQueryParam: key => {
@@ -144,7 +143,6 @@ export default function({ store, navigate, state, provider, ...rest }: Module) {
return {
api,
- // state: initialUrlSupport({ store, navigate, location, path: initialPath, ...rest }),
state: initialUrlSupport({ store, navigate, state, provider, ...rest }),
};
}
From ae915f75a51130c6015c80422f29ec9ceccea4be Mon Sep 17 00:00:00 2001
From: Norbert de Langen
Date: Mon, 24 Jun 2019 15:13:33 +0200
Subject: [PATCH 180/371] FIX snapshots && IMPROVE the DX of
`integrityTestTemplate`
---
.../src/api/integrityTestTemplate.js | 3 +-
.../addon-a11y.stories.storyshot | 27 --
.../addon-actions.stories.storyshot | 62 -----
.../addon-backgrounds.stories.storyshot | 17 --
.../addon-centered.stories.storyshot | 17 --
.../addon-events.stories.storyshot | 6 -
.../addon-jest.stories.storyshot | 3 -
.../addon-knobs.stories.storyshot | 70 -----
.../addon-notes.stories.storyshot | 15 --
...es.storyshot => welcome.stories.storyshot} | 29 ---
.../__snapshots__/htmlshots.test.js.snap | 239 ++++++++++++++++++
11 files changed, 241 insertions(+), 247 deletions(-)
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
delete mode 100644 examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
rename examples/html-kitchen-sink/stories/__snapshots__/{index.stories.storyshot => welcome.stories.storyshot} (80%)
create mode 100644 examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
diff --git a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
index 684c99c4b9e9..cc7fa979914e 100644
--- a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
+++ b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
@@ -16,7 +16,8 @@ function integrityTest(integrityOptions, stories2snapsConverter) {
const possibleStoriesFiles = stories2snapsConverter.getPossibleStoriesFiles(fileName);
return !possibleStoriesFiles.some(fs.existsSync);
});
- expect(abandonedStoryshots.length).toBe(0);
+
+ expect(abandonedStoryshots).toEqual([]);
});
});
}
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
deleted file mode 100644
index 8c979f07574a..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|a11y Default 1`] = ` `;
-
-exports[`Storyshots Addons|a11y Delayed render 1`] = `
`;
-
-exports[`Storyshots Addons|a11y Disabled 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-
- Testing the a11y addon
-
-`;
-
-exports[`Storyshots Addons|a11y Label 1`] = `
-
- Testing the a11y addon
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index b5a33580d65d..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Hello World 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
-
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 211e0b453450..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
-
- You should be able to switch backgrounds for this story
-
-`;
-
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
-
- This one too!
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index 681a29fffda8..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Centered button in center 1`] = `
-
-
-
- I am a Button !
-
-
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
deleted file mode 100644
index 84466dd440ae..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
+++ /dev/null
@@ -1,6 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Events Logger 1`] = `
-
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
deleted file mode 100644
index 7c83d5b812b4..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 7a21a63b844a..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,70 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
-
-
-
-
- My name is Jane,
-
-
-
-
- today is January 20, 2017
-
-
-
-
- I have a stock of 20 apples, costing $2.25 each.
-
-
-
-
- Also, I have:
-
-
-
-
-
- Laptop
-
-
- Book
-
-
- Whiskey
-
-
-
-
-
- Nice to meet you!
-
-
-
-
-`;
-
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-
- John Doe
-
-`;
-
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-
- John Doe
-
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-
- I am John Doe and I'm 44 years old.
-
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `<img src=x onerror="alert('XSS Attack')" >`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index b7b58fa7badb..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
-
-
-
-
-
- This is a fragment of HTML
-
-
-
-
-
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
similarity index 80%
rename from examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
rename to examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
index 9fc155940224..8b68425a1eaf 100644
--- a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
+++ b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
@@ -1,34 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storyshots Demo button 1`] = `
-
- Hello Button
-
-`;
-
-exports[`Storyshots Demo heading 1`] = `
-
- Hello World
-
-`;
-
-exports[`Storyshots Demo headings 1`] = `
-
-
- Hello World
-
-
- Hello World
-
-
- Hello World
-
-
- Hello World
-
-
-`;
-
exports[`Storyshots Welcome Welcome 1`] = `
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Hello World 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
+
+
+`;
+
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+
+ You should be able to switch backgrounds for this story
+
+`;
+
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+
+ This one too!
+
+`;
+
+exports[`Storyshots Addons|Centered button in center 1`] = `
+
+
+
+ I am a Button !
+
+
+
+`;
+
+exports[`Storyshots Addons|Events Logger 1`] = `
+
+
+`;
+
+exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
+
+exports[`Storyshots Addons|Knobs All knobs 1`] = `
+
+
+
+
+ My name is Jane,
+
+
+
+
+ today is January 20, 2017
+
+
+
+
+ I have a stock of 20 apples, costing $2.25 each.
+
+
+
+
+ Also, I have:
+
+
+
+
+
+ Laptop
+
+
+ Book
+
+
+ Whiskey
+
+
+
+
+
+ Nice to meet you!
+
+
+
+
+`;
+
+exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
+
+ John Doe
+
+`;
+
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+
+ John Doe
+
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+
+ I am John Doe and I'm 44 years old.
+
+`;
+
+exports[`Storyshots Addons|Knobs XSS safety 1`] = `<img src=x onerror="alert('XSS Attack')" >`;
+
+exports[`Storyshots Addons|Notes Simple note 1`] = `
+
+
+
+
+
+ This is a fragment of HTML
+
+
+
+
+
+`;
+
+exports[`Storyshots Addons|a11y Default 1`] = `
`;
+
+exports[`Storyshots Addons|a11y Delayed render 1`] = `
`;
+
+exports[`Storyshots Addons|a11y Disabled 1`] = `
+
+ Testing the a11y addon
+
+`;
+
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
+
+ Testing the a11y addon
+
+`;
+
+exports[`Storyshots Addons|a11y Label 1`] = `
+
+ Testing the a11y addon
+
+`;
+
+exports[`Storyshots Demo button 1`] = `
+
+ Hello Button
+
+`;
+
+exports[`Storyshots Demo heading 1`] = `
+
+ Hello World
+
+`;
+
+exports[`Storyshots Demo headings 1`] = `
+
+
+ Hello World
+
+
+ Hello World
+
+
+ Hello World
+
+
+ Hello World
+
+
+`;
From 3530366230ea703160a87d54a97447535b0d13b2 Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 25 Jun 2019 00:27:57 +0800
Subject: [PATCH 181/371] Source-loader: fix official-storybook webpack config
---
examples/official-storybook/webpack.config.js | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js
index e298566a2acf..b027a4b06a0e 100644
--- a/examples/official-storybook/webpack.config.js
+++ b/examples/official-storybook/webpack.config.js
@@ -39,8 +39,13 @@ module.exports = async ({ config }) => ({
exclude: [/node_modules/, /dist/],
},
{
- test: /\.stories\.jsx?$/,
- use: require.resolve('@storybook/source-loader'),
+ test: /\.stories\.[tj]sx?$/,
+ use: [
+ {
+ loader: require.resolve('@storybook/source-loader'),
+ options: { injectParameters: true },
+ },
+ ],
include: [
path.resolve(__dirname, './stories'),
path.resolve(__dirname, '../../lib/ui/src'),
From fce1eb39d0ea41b7ec73e2b11bb2a27523e27a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?=
Date: Mon, 10 Jun 2019 18:17:13 +0200
Subject: [PATCH 182/371] chore: add tsconfig in addons/viewport
---
addons/viewport/tsconfig.json | 13 +++++++++++++
1 file changed, 13 insertions(+)
create mode 100644 addons/viewport/tsconfig.json
diff --git a/addons/viewport/tsconfig.json b/addons/viewport/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/viewport/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src",
+ "types": ["webpack-env"]
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "src/__tests__/**/*"
+ ]
+}
From 1925520158db58c74efaa1bcda4aabb15199f69b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?=
Date: Mon, 10 Jun 2019 18:33:09 +0200
Subject: [PATCH 183/371] chore: migrate src of addons/viewport to Typescript
---
addons/viewport/package.json | 3 ++
addons/viewport/src/{Tool.js => Tool.tsx} | 30 ++++++++++++-------
.../src/{constants.js => constants.ts} | 0
.../viewport/src/{defaults.js => defaults.ts} | 0
.../src/legacy_preview/{index.js => index.ts} | 0
.../{withViewport.js => withViewport.ts} | 2 +-
.../src/{register.js => register.tsx} | 0
7 files changed, 23 insertions(+), 12 deletions(-)
rename addons/viewport/src/{Tool.js => Tool.tsx} (88%)
rename addons/viewport/src/{constants.js => constants.ts} (100%)
rename addons/viewport/src/{defaults.js => defaults.ts} (100%)
rename addons/viewport/src/legacy_preview/{index.js => index.ts} (100%)
rename addons/viewport/src/legacy_preview/{withViewport.js => withViewport.ts} (85%)
rename addons/viewport/src/{register.js => register.tsx} (100%)
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index a49570604932..4ea07928793d 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -37,5 +37,8 @@
},
"publishConfig": {
"access": "public"
+ },
+ "devDependencies": {
+ "@types/util-deprecate": "^1.0.0"
}
}
diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.tsx
similarity index 88%
rename from addons/viewport/src/Tool.js
rename to addons/viewport/src/Tool.tsx
index 073e0cc6b4c7..561bdb40aadc 100644
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.tsx
@@ -26,7 +26,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
value,
}));
-const flip = ({ width, height }) => ({ height: width, width: height });
+const flip = ({ width, height }: { width: any; height: any }) => ({ height: width, width: height });
const deprecatedViewportString = deprecate(
() => 0,
@@ -45,7 +45,7 @@ const getState = memoize(10)((props, state, change) => {
deprecatedViewportString();
}
- const { disable, viewports, defaultViewport, onViewportChange } = parameters || {};
+ const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
if (onViewportChange) {
deprecateOnViewportChange();
@@ -56,7 +56,7 @@ const getState = memoize(10)((props, state, change) => {
const selected =
state.selected === 'responsive' || list.find(i => i.id === state.selected)
? state.selected
- : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
+ : list.find(i => (i as any).default) || defaultViewport || DEFAULT_VIEWPORT;
const resets =
selected !== 'responsive'
@@ -78,7 +78,9 @@ const getState = memoize(10)((props, state, change) => {
]
: [];
const items = list.length
- ? resets.concat(list.map(({ id, name, styles: value }) => createItem(id, name, value, change)))
+ ? resets.concat(
+ list.map(({ id, name, styles: value }: any) => createItem(id, name, value, change))
+ )
: list;
return {
@@ -116,8 +118,10 @@ const IconButtonLabel = styled.div(({ theme }) => ({
marginLeft: '10px',
}));
-export default class ViewportTool extends Component {
- constructor(props) {
+export default class ViewportTool extends Component {
+ listener: any;
+
+ constructor(props: any) {
super(props);
this.state = {
@@ -144,12 +148,16 @@ export default class ViewportTool extends Component {
api.off(SET_STORIES, this.listener);
}
- change = (...args) => this.setState(...args);
+ // @ts-ignore
+ change = (...args: any[]) => this.setState(...args);
flipViewport = () =>
- this.setState(({ isRotated }) => ({ isRotated: !isRotated, expanded: false }));
+ this.setState(({ isRotated }: { isRotated: boolean }) => ({
+ isRotated: !isRotated,
+ expanded: false,
+ }));
- resetViewport = e => {
+ resetViewport = (e: any) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
@@ -159,7 +167,7 @@ export default class ViewportTool extends Component {
render() {
const { expanded } = this.state;
const { items, selected, isRotated } = getState(this.props, this.state, this.change);
- const item = items.find(i => i.id === selected);
+ const item: any = items.find(i => i.id === selected);
let viewportX = 0;
let viewportY = 0;
@@ -225,7 +233,7 @@ export default class ViewportTool extends Component {
}
}
-ViewportTool.propTypes = {
+(ViewportTool as any).propTypes = {
api: PropTypes.shape({
on: PropTypes.func,
}).isRequired,
diff --git a/addons/viewport/src/constants.js b/addons/viewport/src/constants.ts
similarity index 100%
rename from addons/viewport/src/constants.js
rename to addons/viewport/src/constants.ts
diff --git a/addons/viewport/src/defaults.js b/addons/viewport/src/defaults.ts
similarity index 100%
rename from addons/viewport/src/defaults.js
rename to addons/viewport/src/defaults.ts
diff --git a/addons/viewport/src/legacy_preview/index.js b/addons/viewport/src/legacy_preview/index.ts
similarity index 100%
rename from addons/viewport/src/legacy_preview/index.js
rename to addons/viewport/src/legacy_preview/index.ts
diff --git a/addons/viewport/src/legacy_preview/withViewport.js b/addons/viewport/src/legacy_preview/withViewport.ts
similarity index 85%
rename from addons/viewport/src/legacy_preview/withViewport.js
rename to addons/viewport/src/legacy_preview/withViewport.ts
index f1f6ca2a6f9e..3bf60e21bc17 100644
--- a/addons/viewport/src/legacy_preview/withViewport.js
+++ b/addons/viewport/src/legacy_preview/withViewport.ts
@@ -5,7 +5,7 @@ const withViewport = makeDecorator({
name: 'withViewport',
parameterName: 'viewport',
wrapper: deprecate(
- (getStory, context) => getStory(context),
+ (getStory: any, context: any) => getStory(context),
'withViewport is no longer supported, use .addParameters({ viewport }) instead'
),
});
diff --git a/addons/viewport/src/register.js b/addons/viewport/src/register.tsx
similarity index 100%
rename from addons/viewport/src/register.js
rename to addons/viewport/src/register.tsx
From 2c5b08ff6b4b152425dbe919f5d11b11c1495c53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?=
Date: Mon, 24 Jun 2019 20:48:21 +0200
Subject: [PATCH 184/371] chore: improve typings of addons/viewport
---
addons/viewport/package.json | 1 +
addons/viewport/src/Tool.tsx | 174 ++++++++++--------
addons/viewport/src/constants.ts | 10 +-
addons/viewport/src/defaults.ts | 4 +-
addons/viewport/src/legacy_preview/index.ts | 1 -
.../src/legacy_preview/withViewport.ts | 4 +-
addons/viewport/src/models/Viewport.ts | 19 ++
.../src/models/ViewportAddonParameter.ts | 12 ++
addons/viewport/src/models/index.ts | 2 +
addons/viewport/src/register.tsx | 4 +-
10 files changed, 146 insertions(+), 85 deletions(-)
create mode 100644 addons/viewport/src/models/Viewport.ts
create mode 100644 addons/viewport/src/models/ViewportAddonParameter.ts
create mode 100644 addons/viewport/src/models/index.ts
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 4ea07928793d..b75df98e5834 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -22,6 +22,7 @@
},
"dependencies": {
"@storybook/addons": "5.2.0-alpha.23",
+ "@storybook/api": "5.2.0-alpha.23",
"@storybook/client-logger": "5.2.0-alpha.23",
"@storybook/components": "5.2.0-alpha.23",
"@storybook/core-events": "5.2.0-alpha.23",
diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
index 561bdb40aadc..5427f3ae948f 100644
--- a/addons/viewport/src/Tool.tsx
+++ b/addons/viewport/src/Tool.tsx
@@ -1,5 +1,4 @@
import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
import memoize from 'memoizerific';
import deprecate from 'util-deprecate';
@@ -10,23 +9,37 @@ import { SET_STORIES } from '@storybook/core-events';
import { PARAM_KEY } from './constants';
import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from './defaults';
+import { ViewportAddonParameter, ViewportMap, ViewportStyles } from './models';
-const toList = memoize(50)(items =>
+const toList = memoize(50)((items: ViewportMap) =>
items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : []
);
const iframeId = 'storybook-preview-iframe';
-const createItem = memoize(1000)((id, name, value, change) => ({
- id: id || name,
- title: name,
- onClick: () => {
- change({ selected: id, expanded: false });
- },
- right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
- value,
-}));
+interface ViewportVM {
+ id: string;
+ title: string;
+ onClick: () => void;
+ right: string;
+ value: ViewportStyles;
+}
+
+const createItem = memoize(1000)(
+ (id: string, name: string, value: ViewportStyles, change: (...args: unknown[]) => void) => {
+ const result: ViewportVM = {
+ id: id || name,
+ title: name,
+ onClick: () => {
+ change({ selected: id, expanded: false });
+ },
+ right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
+ value,
+ };
+ return result;
+ }
+);
-const flip = ({ width, height }: { width: any; height: any }) => ({ height: width, width: height });
+const flip = ({ width, height }: ViewportStyles) => ({ height: width, width: height });
const deprecatedViewportString = deprecate(
() => 0,
@@ -37,58 +50,69 @@ const deprecateOnViewportChange = deprecate(
'The viewport parameter `onViewportChange` is no longer supported'
);
-const getState = memoize(10)((props, state, change) => {
- const data = props.api.getCurrentStoryData();
- const parameters = data && data.parameters && data.parameters[PARAM_KEY];
-
- if (parameters && typeof parameters !== 'object') {
- deprecatedViewportString();
- }
+const getState = memoize(10)(
+ (
+ props: ViewportToolProps,
+ state: ViewportToolState,
+ change: (statePatch: Partial) => void
+ ) => {
+ const data = props.api.getCurrentStoryData();
+ const parameters: ViewportAddonParameter =
+ data && (data as any).parameters && (data as any).parameters[PARAM_KEY];
+
+ if (parameters && typeof parameters !== 'object') {
+ deprecatedViewportString();
+ }
- const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
+ const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
- if (onViewportChange) {
- deprecateOnViewportChange();
- }
+ if (onViewportChange) {
+ deprecateOnViewportChange();
+ }
- const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
-
- const selected =
- state.selected === 'responsive' || list.find(i => i.id === state.selected)
- ? state.selected
- : list.find(i => (i as any).default) || defaultViewport || DEFAULT_VIEWPORT;
-
- const resets =
- selected !== 'responsive'
- ? [
- {
- id: 'reset',
- title: 'Reset viewport',
- onClick: () => {
- change({ selected: undefined, expanded: false });
+ const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
+ const viewportVMList = list.map(({ id, name, styles: value }) =>
+ createItem(id, name, value, change)
+ );
+
+ const selected =
+ state.selected === 'responsive' || list.find(i => i.id === state.selected)
+ ? state.selected
+ : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
+
+ const resets: ViewportVM[] =
+ selected !== 'responsive'
+ ? [
+ {
+ id: 'reset',
+ title: 'Reset viewport',
+ onClick: () => {
+ change({ selected: undefined, expanded: false });
+ },
+ right: undefined,
+ value: undefined,
},
- },
- {
- id: 'rotate',
- title: 'Rotate viewport',
- onClick: () => {
- change({ isRotated: !state.isRotated, expanded: false });
+ {
+ id: 'rotate',
+ title: 'Rotate viewport',
+ onClick: () => {
+ change({ isRotated: !state.isRotated, expanded: false });
+ },
+ right: undefined,
+ value: undefined,
},
- },
- ]
- : [];
- const items = list.length
- ? resets.concat(
- list.map(({ id, name, styles: value }: any) => createItem(id, name, value, change))
- )
- : list;
-
- return {
- isRotated: state.isRotated,
- items,
- selected,
- };
-});
+ ]
+ : [];
+
+ const items = viewportVMList.length !== 0 ? resets.concat(viewportVMList) : [];
+
+ return {
+ isRotated: state.isRotated,
+ items,
+ selected,
+ };
+ }
+);
const ActiveViewportSize = styled.div(() => ({
display: 'inline-flex',
@@ -118,10 +142,20 @@ const IconButtonLabel = styled.div(({ theme }) => ({
marginLeft: '10px',
}));
-export default class ViewportTool extends Component {
- listener: any;
+interface ViewportToolState {
+ isRotated: boolean;
+ items: any[];
+ selected: string;
+ expanded: boolean;
+}
+interface ViewportToolProps {
+ api: any;
+}
- constructor(props: any) {
+export class ViewportTool extends Component {
+ listener: () => void;
+
+ constructor(props: ViewportToolProps) {
super(props);
this.state = {
@@ -157,7 +191,7 @@ export default class ViewportTool extends Component {
expanded: false,
}));
- resetViewport = (e: any) => {
+ resetViewport = (e: React.MouseEvent) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
@@ -167,10 +201,10 @@ export default class ViewportTool extends Component {
render() {
const { expanded } = this.state;
const { items, selected, isRotated } = getState(this.props, this.state, this.change);
- const item: any = items.find(i => i.id === selected);
+ const item = items.find(i => i.id === selected);
- let viewportX = 0;
- let viewportY = 0;
+ let viewportX = '0';
+ let viewportY = '0';
let viewportTitle = '';
if (item) {
const height = item.value.height.replace('px', '');
@@ -196,7 +230,7 @@ export default class ViewportTool extends Component {
boxShadow: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);',
boxSizing: 'content-box',
- ...(isRotated ? flip(item.value || {}) : item.value || {}),
+ ...(isRotated ? flip(item.value) : item.value),
},
}}
/>
@@ -232,9 +266,3 @@ export default class ViewportTool extends Component {
) : null;
}
}
-
-(ViewportTool as any).propTypes = {
- api: PropTypes.shape({
- on: PropTypes.func,
- }).isRequired,
-};
diff --git a/addons/viewport/src/constants.ts b/addons/viewport/src/constants.ts
index 1a9e8f7376b2..db9c73f1976f 100644
--- a/addons/viewport/src/constants.ts
+++ b/addons/viewport/src/constants.ts
@@ -1,9 +1,7 @@
export const ADDON_ID = 'storybook/viewport';
export const PARAM_KEY = 'viewport';
-export default {
- UPDATE: `${ADDON_ID}/update`,
- CONFIGURE: `${ADDON_ID}/configure`,
- SET: `${ADDON_ID}/setStoryDefaultViewport`,
- CHANGED: `${ADDON_ID}/viewportChanged`,
-};
+export const UPDATE = `${ADDON_ID}/update`;
+export const CONFIGURE = `${ADDON_ID}/configure`;
+export const SET = `${ADDON_ID}/setStoryDefaultViewport`;
+export const CHANGED = `${ADDON_ID}/viewportChanged`;
diff --git a/addons/viewport/src/defaults.ts b/addons/viewport/src/defaults.ts
index bd3dcf6065f9..a6d5f858b86a 100644
--- a/addons/viewport/src/defaults.ts
+++ b/addons/viewport/src/defaults.ts
@@ -1,4 +1,6 @@
-export const INITIAL_VIEWPORTS = {
+import { ViewportMap } from './models';
+
+export const INITIAL_VIEWPORTS: ViewportMap = {
iphone5: {
name: 'iPhone 5',
styles: {
diff --git a/addons/viewport/src/legacy_preview/index.ts b/addons/viewport/src/legacy_preview/index.ts
index 7bb7c3ef5fc5..0e4f8e090b98 100644
--- a/addons/viewport/src/legacy_preview/index.ts
+++ b/addons/viewport/src/legacy_preview/index.ts
@@ -1,7 +1,6 @@
import deprecate from 'util-deprecate';
export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults';
-export { default as withViewport } from './withViewport';
export const configureViewport = deprecate(() => {},
'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
diff --git a/addons/viewport/src/legacy_preview/withViewport.ts b/addons/viewport/src/legacy_preview/withViewport.ts
index 3bf60e21bc17..d4b0e3b96a55 100644
--- a/addons/viewport/src/legacy_preview/withViewport.ts
+++ b/addons/viewport/src/legacy_preview/withViewport.ts
@@ -1,11 +1,11 @@
-import { makeDecorator } from '@storybook/addons';
+import { makeDecorator, StoryGetter, StoryContext } from '@storybook/addons';
import deprecate from 'util-deprecate';
const withViewport = makeDecorator({
name: 'withViewport',
parameterName: 'viewport',
wrapper: deprecate(
- (getStory: any, context: any) => getStory(context),
+ (getStory: StoryGetter, context: StoryContext) => getStory(context),
'withViewport is no longer supported, use .addParameters({ viewport }) instead'
),
});
diff --git a/addons/viewport/src/models/Viewport.ts b/addons/viewport/src/models/Viewport.ts
new file mode 100644
index 000000000000..f799d061ef57
--- /dev/null
+++ b/addons/viewport/src/models/Viewport.ts
@@ -0,0 +1,19 @@
+export interface Viewport {
+ name: string;
+ styles: ViewportStyles;
+ type: 'desktop' | 'mobile' | 'tablet';
+ /*
+ * @deprecated
+ * Deprecated option?
+ */
+ default?: boolean;
+}
+
+export interface ViewportStyles {
+ height: string;
+ width: string;
+}
+
+export interface ViewportMap {
+ [key: string]: Viewport;
+}
diff --git a/addons/viewport/src/models/ViewportAddonParameter.ts b/addons/viewport/src/models/ViewportAddonParameter.ts
new file mode 100644
index 000000000000..fe8598fa54bb
--- /dev/null
+++ b/addons/viewport/src/models/ViewportAddonParameter.ts
@@ -0,0 +1,12 @@
+import { ViewportMap } from './Viewport';
+
+export interface ViewportAddonParameter {
+ disable: boolean;
+ defaultViewport: string;
+ viewports: ViewportMap;
+ /*
+ * @deprecated
+ * The viewport parameter `onViewportChange` is no longer supported
+ */
+ onViewportChange?: never;
+}
diff --git a/addons/viewport/src/models/index.ts b/addons/viewport/src/models/index.ts
new file mode 100644
index 000000000000..0cc15c61f914
--- /dev/null
+++ b/addons/viewport/src/models/index.ts
@@ -0,0 +1,2 @@
+export * from './Viewport';
+export * from './ViewportAddonParameter';
diff --git a/addons/viewport/src/register.tsx b/addons/viewport/src/register.tsx
index deb8bf839d2a..16faa8171e6d 100644
--- a/addons/viewport/src/register.tsx
+++ b/addons/viewport/src/register.tsx
@@ -3,13 +3,13 @@ import addons, { types } from '@storybook/addons';
import { ADDON_ID } from './constants';
-import Tool from './Tool';
+import { ViewportTool } from './Tool';
addons.register(ADDON_ID, api => {
addons.add(ADDON_ID, {
title: 'viewport / media-queries',
type: types.TOOL,
match: ({ viewMode }) => viewMode === 'story',
- render: () => ,
+ render: () => ,
});
});
From c9f0978c3e991f770c5f92db6a6bc2ccd6e1cc85 Mon Sep 17 00:00:00 2001
From: libetl
Date: Mon, 24 Jun 2019 23:46:33 +0200
Subject: [PATCH 185/371] handle no parameters case
---
.../abstract-syntax-tree/generate-helpers.js | 7 +++++-
.../abstract-syntax-tree/traverse-helpers.js | 23 +++++++++++--------
2 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
index 8a1bc48553f9..a79e96fec7d6 100644
--- a/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
+++ b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -150,13 +150,18 @@ export function generateSourcesInExportedParameters(source, ast, additionalParam
splicedSource,
parametersSliceOfCode,
indexWhereToAppend,
+ foundParametersProperty,
} = popParametersObjectFromDefaultExport(source, ast);
if (indexWhereToAppend !== -1) {
const additionalParametersAsJson = JSON.stringify({ storySource: additionalParameters }).slice(
0,
-1
);
- const newParameters = `${additionalParametersAsJson},${parametersSliceOfCode.substring(1)}`;
+ const propertyDeclaration = foundParametersProperty ? '' : 'parameters: ';
+ const comma = foundParametersProperty ? '' : ',';
+ const newParameters = `${propertyDeclaration}${additionalParametersAsJson},${parametersSliceOfCode.substring(
+ 1
+ )}${comma}`;
const result =
splicedSource.substring(0, indexWhereToAppend) +
newParameters +
diff --git a/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
index 983afa04f7f3..8dd3b1a2061f 100644
--- a/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
+++ b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
@@ -172,6 +172,7 @@ export function popParametersObjectFromDefaultExport(source, ast) {
let splicedSource = source;
let parametersSliceOfCode = '';
let indexWhereToAppend = -1;
+ let foundParametersProperty = false;
estraverse.traverse(ast, {
fallback: 'iteration',
enter: node => {
@@ -186,18 +187,22 @@ export function popParametersObjectFromDefaultExport(source, ast) {
p => p.key.name === 'parameters' && p.value.type === 'ObjectExpression'
);
- splicedSource =
- source.substring(0, parametersProperty.value.start) +
- source.substring(parametersProperty.value.end + 1);
+ foundParametersProperty = !!parametersProperty;
- parametersSliceOfCode = source.substring(
- parametersProperty.value.start,
- parametersProperty.value.end
- );
+ splicedSource = parametersProperty
+ ? source.substring(0, parametersProperty.value.start) +
+ source.substring(parametersProperty.value.end + 1)
+ : splicedSource;
+
+ parametersSliceOfCode = parametersProperty
+ ? source.substring(parametersProperty.value.start, parametersProperty.value.end)
+ : '{}';
- indexWhereToAppend = parametersProperty.value.start;
+ indexWhereToAppend = parametersProperty
+ ? parametersProperty.value.start
+ : node.declaration.start + 1;
}
},
});
- return { splicedSource, parametersSliceOfCode, indexWhereToAppend };
+ return { splicedSource, parametersSliceOfCode, indexWhereToAppend, foundParametersProperty };
}
From c546d4d516efceaf11c55fc9cb81a508aee3e7fe Mon Sep 17 00:00:00 2001
From: Michael Shilman
Date: Tue, 25 Jun 2019 11:06:48 +0800
Subject: [PATCH 186/371] Rename example => story
---
lib/core/src/client/preview/start.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 77a84389d1bf..ed2535c59b0b 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -283,7 +283,7 @@ export default function start(render, { decorateStory } = {}) {
);
}
- const { default: meta, ...examples } = fileExports;
+ const { default: meta, ...stories } = fileExports;
const kindName = meta.title;
if (previousExports[filename]) {
@@ -307,10 +307,10 @@ export default function start(render, { decorateStory } = {}) {
kind.addParameters(meta.parameters);
}
- Object.keys(examples).forEach(key => {
- const example = examples[key];
- const { title = example.title || key, parameters } = example;
- kind.add(title, example, parameters);
+ Object.keys(stories).forEach(key => {
+ const story = stories[key];
+ const { title = story.title || key, parameters } = story;
+ kind.add(title, story, parameters);
});
previousExports[filename] = fileExports;
From 33f1960b64662740bf986c51f6c5a886cd9a84e9 Mon Sep 17 00:00:00 2001
From: lonyele
Date: Tue, 25 Jun 2019 14:08:33 +0900
Subject: [PATCH 187/371] refactor: improve types of index.ts, manager.tsx
---
addons/events/src/index.ts | 33 ++++++++++++++++++++++++++-------
addons/events/src/manager.tsx | 2 +-
2 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/addons/events/src/index.ts b/addons/events/src/index.ts
index 4c77147d4cda..db09b493cad1 100644
--- a/addons/events/src/index.ts
+++ b/addons/events/src/index.ts
@@ -1,13 +1,20 @@
+import { ReactNode } from 'react';
+
import addons from '@storybook/addons';
import CoreEvents from '@storybook/core-events';
import deprecate from 'util-deprecate';
import { EVENTS } from './constants';
-let prevEvents: any;
-let currentEmit: any;
+let prevEvents: Event[];
+let currentEmit: (name: string, payload: unknown) => void;
+
+export interface OnEmitEvent {
+ name: string;
+ payload: unknown;
+}
-const onEmit = (event: any) => {
+const onEmit = (event: OnEmitEvent) => {
currentEmit(event.name, event.payload);
};
@@ -21,7 +28,7 @@ const subscription = () => {
};
};
-const addEvents = ({ emit, events }: any) => {
+const addEvents = ({ emit, events }: Options) => {
if (prevEvents !== events) {
addons.getChannel().emit(EVENTS.ADD, events);
prevEvents = events;
@@ -30,16 +37,28 @@ const addEvents = ({ emit, events }: any) => {
addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
};
-const WithEvents = deprecate(({ children, ...options }: any) => {
+export interface Event {
+ name: string;
+ title: string;
+ payload: unknown;
+}
+
+interface Options {
+ children?: ReactNode;
+ emit: (eventName: string, ...args: any) => void;
+ events: Event[];
+}
+
+const WithEvents = deprecate(({ children, ...options }: Options) => {
addEvents(options);
return children;
}, `