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/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`] = `
-
- 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`] = `
-
- 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 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
-
-
-
- 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
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
- 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
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
- -
-
-
-
- {}
-
-
-
-
-
-
-
-
-
- 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:
-
-
-
- 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:
-
-
-
- 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"
-
-
- <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.
-
-
- See these sample
-
- stories
-
- for a component called
-
- Button
-
- .
-
-
- Just like that, you can add your own components as stories.
-
- Button
-
- stories located at
-
- src/stories/index.js
-
- .)
-
-
- Usually we create stories with smaller UI components in the app.
-
- Writing Stories
-
- section in our documentation.
-
-
-
- NOTE:
-
-
- .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
-
-
-
-
- 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
-
-
-
-
-
-
- This is a placeholder with single child, it's bolded
-
-
-
- This has two children, the first bold
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
- 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
-
-
-
- 🎉 This is a long message that extends over two lines!
-
-
-
- 🎉 Storybook is cool!
-
-
-
-
- 🎉 Storybook is cool!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
-
-
-
-
-
- My title is way to long to actually fit
-
-
-
-
-
-
-
-
- Storybook
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 
-