GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

REMOVE emotion from snapshots, as they become too big, and they provide little value

Browse Source 
provided we're also using Chromatic
This commit is contained in:
Norbert de Langen 2018-12-22 00:15:03 +01:00
parent 0e905b5cb0
commit 053473882e
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
27 changed files with 2721 additions and 16905 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -1,41 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`addon Info should render <Info /> and external markdown 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
}
.emotion-4 {
position: relative;
overflow: auto;
}
.emotion-4 code {
opacity: 0.7;
}
.emotion-2 {
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: 0;
}
.emotion-0 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 0;
opacity: 1;
}
<deprecated>
<Story
PropTable={[Function]}
@ -288,11 +253,11 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
>
<Wrapper>
<div
className="emotion-6 emotion-7"
className="css-fri0s0-Wrapper epklh870"
>
<Scroller>
<div
className="emotion-4 emotion-5"
className="css-1et2y5f-Scroller epklh871"
>
<SyntaxHighlighter
CodeTag={
@ -340,11 +305,11 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
className="hljs"
>
<pre
className="hljs emotion-2 emotion-3"
className="hljs css-1x8ad3z-Pre epklh872"
>
<Code>
<code
className="emotion-0 emotion-1"
className="css-1igagyr-Code epklh873"
>
<span
className="token tag"
@ -811,41 +776,6 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
`;
exports[`addon Info should render <Info /> and markdown 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
}
.emotion-4 {
position: relative;
overflow: auto;
}
.emotion-4 code {
opacity: 0.7;
}
.emotion-2 {
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: 0;
}
.emotion-0 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 0;
opacity: 1;
}
<deprecated>
<Story
PropTable={[Function]}
@ -1191,11 +1121,11 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
>
<Wrapper>
<div
className="emotion-6 emotion-7"
className="css-fri0s0-Wrapper epklh870"
>
<Scroller>
<div
className="emotion-4 emotion-5"
className="css-1et2y5f-Scroller epklh871"
>
<SyntaxHighlighter
CodeTag={
@ -1243,11 +1173,11 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
className="hljs"
>
<pre
className="hljs emotion-2 emotion-3"
className="hljs css-1x8ad3z-Pre epklh872"
>
<Code>
<code
className="emotion-0 emotion-1"
className="css-1igagyr-Code epklh873"
>
<span
className="token tag"
@ -1714,41 +1644,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
`;
exports[`addon Info should render component description if story kind matches component 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
}
.emotion-4 {
position: relative;
overflow: auto;
}
.emotion-4 code {
opacity: 0.7;
}
.emotion-2 {
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: 0;
}
.emotion-0 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 0;
opacity: 1;
}
<Info>
<Story
PropTable={[Function]}
@ -2022,11 +1917,11 @@ exports[`addon Info should render component description if story kind matches co
>
<Wrapper>
<div
className="emotion-6 emotion-7"
className="css-fri0s0-Wrapper epklh870"
>
<Scroller>
<div
className="emotion-4 emotion-5"
className="css-1et2y5f-Scroller epklh871"
>
<SyntaxHighlighter
CodeTag={
@ -2074,11 +1969,11 @@ exports[`addon Info should render component description if story kind matches co
className="hljs"
>
<pre
className="hljs emotion-2 emotion-3"
className="hljs css-1x8ad3z-Pre epklh872"
>
<Code>
<code
className="emotion-0 emotion-1"
className="css-1igagyr-Code epklh873"
>
<span
className="token tag"
@ -2495,41 +2390,6 @@ exports[`addon Info should render component description if story kind matches co
`;
exports[`addon Info should render component description if story name matches component 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
}
.emotion-4 {
position: relative;
overflow: auto;
}
.emotion-4 code {
opacity: 0.7;
}
.emotion-2 {
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: 0;
}
.emotion-0 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 0;
opacity: 1;
}
<Info>
<Story
PropTable={[Function]}
@ -2803,11 +2663,11 @@ exports[`addon Info should render component description if story name matches co
>
<Wrapper>
<div
className="emotion-6 emotion-7"
className="css-fri0s0-Wrapper epklh870"
>
<Scroller>
<div
className="emotion-4 emotion-5"
className="css-1et2y5f-Scroller epklh871"
>
<SyntaxHighlighter
CodeTag={
@ -2855,11 +2715,11 @@ exports[`addon Info should render component description if story name matches co
className="hljs"
>
<pre
className="hljs emotion-2 emotion-3"
className="hljs css-1x8ad3z-Pre epklh872"
>
<Code>
<code
className="emotion-0 emotion-1"
className="css-1igagyr-Code epklh873"
>
<span
className="token tag"

173
examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
View File

@ -1,107 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button with new info 1`] = `
.emotion-6 {
position: relative;
overflow: hidden;
}
.emotion-4 {
position: relative;
overflow: auto;
}
.emotion-4 code {
opacity: 0.7;
}
.emotion-2 {
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: 0;
}
.emotion-0 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-right: 0;
opacity: 1;
}
.emotion-70 {
border-collapse: collapse;
margin-top: 16px;
width: auto;
table-layout: auto;
}
.emotion-18 {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.emotion-8 {
padding: 2px 6px;
line-height: 18px;
vertical-align: middle;
padding: 8px 16px;
}
.emotion-68 {
font-size: 14px;
}
.emotion-30 {
border-bottom: 1px solid #eee;
}
.emotion-20 {
padding: 2px 6px;
white-space: nowrap;
font-family: Monaco,Consolas,"Courier New",monospace;
text-align: left;
padding: 8px 16px;
color: #774dd7;
}
.emotion-22 {
padding: 2px 6px;
white-space: nowrap;
font-family: Monaco,Consolas,"Courier New",monospace;
text-align: left;
padding: 8px 16px;
color: #1ea7fd;
}
.emotion-22 button {
color: #37d5d3;
}
.emotion-22 span {
white-space: pre;
}
.emotion-24 {
padding: 2px 6px;
white-space: nowrap;
font-family: Monaco,Consolas,"Courier New",monospace;
text-align: left;
padding: 8px 16px;
}
.emotion-28 {
padding: 2px 6px;
text-align: left;
padding: 8px 16px;
}
<div>
<div
style="position:relative;z-index:0"
@ -181,16 +80,16 @@ exports[`Storyshots Button with new info 1`] = `
Story Source
</h1>
<div
class="emotion-6 emotion-7"
class="css-fri0s0-Wrapper epklh870"
>
<div
class="emotion-4 emotion-5"
class="css-1et2y5f-Scroller epklh871"
>
<pre
class="hljs emotion-2 emotion-3"
class="hljs css-1x8ad3z-Pre epklh872"
>
<code
class="emotion-0 emotion-1"
class="css-1igagyr-Code epklh873"
>
<span
class="token tag"
@ -334,124 +233,124 @@ exports[`Storyshots Button with new info 1`] = `
"Container" Component
</h3>
<table
class="emotion-70 emotion-71"
class="css-919xfk-Table-Table e1fg2ikb0"
>
<thead
class="emotion-18 emotion-19"
class="css-ig77mj-THead e1fg2ikb1"
>
<tr>
<th
class="emotion-8 emotion-9"
class="css-6pdatc-Th-TH e1fg2ikb2"
>
Property
</th>
<th
class="emotion-8 emotion-9"
class="css-6pdatc-Th-TH e1fg2ikb2"
>
Type
</th>
<th
class="emotion-8 emotion-9"
class="css-6pdatc-Th-TH e1fg2ikb2"
>
Required
</th>
<th
class="emotion-8 emotion-9"
class="css-6pdatc-Th-TH e1fg2ikb2"
>
Default
</th>
<th
class="emotion-8 emotion-9"
class="css-6pdatc-Th-TH e1fg2ikb2"
>
Description
</th>
</tr>
</thead>
<tbody
class="emotion-68 emotion-69"
class="css-4b5un0-TBody e1fg2ikb3"
>
<tr
class="emotion-30 emotion-31"
class="css-rss5jh-TBodyTR e1fg2ikb4"
>
<td
class="emotion-20 emotion-21"
class="css-v0hv6k-Td-TD-TDName e1fg2ikb6"
>
children
</td>
<td
class="emotion-22 emotion-23"
class="css-yv1lmn-Td-TD-TDType e1fg2ikb7"
>
<span>
node
</span>
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
yes
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
-
</td>
<td
class="emotion-28 emotion-25"
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
<tr
class="emotion-30 emotion-31"
class="css-rss5jh-TBodyTR e1fg2ikb4"
>
<td
class="emotion-20 emotion-21"
class="css-v0hv6k-Td-TD-TDName e1fg2ikb6"
>
isAmazing
</td>
<td
class="emotion-22 emotion-23"
class="css-yv1lmn-Td-TD-TDType e1fg2ikb7"
>
<span>
bool
</span>
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
-
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
<span>
false
</span>
</td>
<td
class="emotion-28 emotion-25"
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
<tr
class="emotion-30 emotion-31"
class="css-rss5jh-TBodyTR e1fg2ikb4"
>
<td
class="emotion-20 emotion-21"
class="css-v0hv6k-Td-TD-TDName e1fg2ikb6"
>
age
</td>
<td
class="emotion-22 emotion-23"
class="css-yv1lmn-Td-TD-TDType e1fg2ikb7"
>
<span>
other
</span>
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
-
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
<span>
{
@ -478,38 +377,38 @@ exports[`Storyshots Button with new info 1`] = `
</span>
</td>
<td
class="emotion-28 emotion-25"
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
<tr
class="emotion-30 emotion-31"
class="css-rss5jh-TBodyTR e1fg2ikb4"
>
<td
class="emotion-20 emotion-21"
class="css-v0hv6k-Td-TD-TDName e1fg2ikb6"
>
title
</td>
<td
class="emotion-22 emotion-23"
class="css-yv1lmn-Td-TD-TDType e1fg2ikb7"
>
<span>
string
</span>
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
-
</td>
<td
class="emotion-24 emotion-25"
class="css-6qgefz-Td-TD e1fg2ikb5"
>
<span>
the best container ever
</span>
</td>
<td
class="emotion-28 emotion-25"
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
</tbody>

3
examples/cra-kitchen-sink/src/storyshots.test.js
View File

@ -1,5 +1,4 @@
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
import path from 'path';
import { render as renderer, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
@ -14,5 +13,5 @@ initStoryshots({
test: multiSnapshotWithOptions({
renderer,
}),
snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
snapshotSerializers: [createSerializer()],
});

1126
examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

24
examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
View File

@ -1,19 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Events Logger 1`] = `
.emotion-2 {
padding: 20px;
}
.emotion-0 {
margin: 0;
}
<div
class="emotion-2 emotion-3"
class="css-124l3n3-Wrapper e1igy6c50"
>
<h1
class="emotion-0 emotion-1"
class="css-hfjtt6-Title e1igy6c51"
>
Logger
</h1>
@ -22,19 +14,11 @@ exports[`Storyshots Addons|Events Logger 1`] = `
`;
exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
.emotion-2 {
padding: 20px;
}
.emotion-0 {
margin: 0;
}
<div
class="emotion-2 emotion-3"
class="css-124l3n3-Wrapper e1igy6c50"
>
<h1
class="emotion-0 emotion-1"
class="css-hfjtt6-Title e1igy6c51"
>
Logger
</h1>

8882
examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

46
examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
View File

@ -23,12 +23,8 @@ exports[`Storyshots Addons|Links.Href log 1`] = `
`;
exports[`Storyshots Addons|Links.Link First 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go to Second
@ -36,12 +32,8 @@ exports[`Storyshots Addons|Links.Link First 1`] = `
`;
exports[`Storyshots Addons|Links.Link Second 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go to First
@ -55,12 +47,8 @@ Array [
>
Scroll down to see the link
</div>,
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
<a
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go to Second
@ -75,12 +63,8 @@ Array [
>
Scroll down to see the link
</div>,
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
<a
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go to First
@ -89,12 +73,8 @@ Array [
`;
exports[`Storyshots Addons|Links.Select First 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go back
@ -121,12 +101,8 @@ exports[`Storyshots Addons|Links.Select Index 1`] = `
`;
exports[`Storyshots Addons|Links.Select Second 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go back
@ -134,12 +110,8 @@ exports[`Storyshots Addons|Links.Select Second 1`] = `
`;
exports[`Storyshots Addons|Links.Select Third 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Go back

6
examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
View File

@ -2,7 +2,7 @@
exports[`Storyshots Addons|Viewport default 1`] = `
<div
class="emotion-0 emotion-1"
class="css-mpcyc0-Panel ehw333c0"
>
I don't have problems being rendered using the default viewport.
</div>
@ -10,7 +10,7 @@ exports[`Storyshots Addons|Viewport default 1`] = `
exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
<div
class="emotion-0 emotion-1"
class="css-mpcyc0-Panel ehw333c0"
>
I've inherited
<b>
@ -22,7 +22,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
<div
class="emotion-0 emotion-1"
class="css-mpcyc0-Panel ehw333c0"
>
I respect my parents but I should be looking good on
<b>

30
examples/official-storybook/stories/__snapshots__/core.stories.storyshot
View File

@ -1,36 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Events Force re-render 1`] = `
.emotion-0 {
padding: 0 10px;
color: #444;
background: rgba(0,0,0,0.1);
border-radius: 4px;
-webkit-transition: border-bottom-color .3s linear;
transition: border-bottom-color .3s linear;
border: 0 solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
box-sizing: border-box;
position: relative;
display: inline;
text-align: left;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 32px;
box-sizing: border-box;
}
.emotion-0:focus {
outline: 0 none;
border-bottom-color: #9fdaff;
}
<button
class="emotion-0 emotion-1"
class="css-1pzmux7-Button e1lk8yn73"
>
Clicked: 0
</button>

3
examples/official-storybook/tests/storyshots.test.js
View File

@ -1,5 +1,4 @@
import path from 'path';
import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
import { render as renderer } from 'enzyme';
import { createSerializer } from 'enzyme-to-json';
@ -12,5 +11,5 @@ initStoryshots({
test: multiSnapshotWithOptions({
renderer,
}),
snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
snapshotSerializers: [createSerializer()],
});

1
jest.config.js
View File

@ -23,7 +23,6 @@ module.exports = {
'<rootDir>/lib',
'<rootDir>/examples/official-storybook',
],
snapshotSerializers: ['jest-emotion'],
transform: {
'^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
'^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',

1020
lib/components/src/form/__snapshots__/form.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

235
lib/components/src/grid/__snapshots__/grid.stories.storyshot
View File

@ -2,57 +2,25 @@
exports[`Storyshots Components|Grid col 1`] = `
Array [
.emotion-0 {
background: silver;
display: inline-block;
padding: 20px;
}
<span
class="emotion-0 emotion-1"
<span
class="css-1bdt3um-PlaceholderInline ea0irds1"
color="silver"
/>,
.emotion-6 {
display: inline-block;
vertical-align: inherit;
}
.emotion-6 > * {
margin-left: 10px;
vertical-align: inherit;
}
.emotion-6 > *:nth-child(0) {
margin-left: 0;
}
.emotion-0 {
background: hotpink;
display: inline-block;
padding: 20px;
}
<div
class="emotion-6 emotion-7"
<div
class="css-14cpgt7-Container ecq4n7c0"
>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
</div>,
.emotion-0 {
background: silver;
display: inline-block;
padding: 20px;
}
<span
class="emotion-0 emotion-1"
<span
class="css-1bdt3um-PlaceholderInline ea0irds1"
color="silver"
/>,
]
@ -60,59 +28,25 @@ Array [
exports[`Storyshots Components|Grid col outer 1`] = `
Array [
.emotion-0 {
background: silver;
display: inline-block;
padding: 20px;
}
<span
class="emotion-0 emotion-1"
<span
class="css-1bdt3um-PlaceholderInline ea0irds1"
color="silver"
/>,
.emotion-0 {
background: hotpink;
display: inline-block;
padding: 20px;
}
.emotion-6 {
display: inline-block;
vertical-align: inherit;
margin-left: 10px;
margin-right: 10px;
}
.emotion-6 > * {
margin-left: 10px;
vertical-align: inherit;
}
.emotion-6 > *:nth-child(0) {
margin-left: 0;
}
<div
class="emotion-6 emotion-7"
<div
class="css-1ufl575-Container ecq4n7c0"
>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
<span
class="emotion-0 emotion-1"
class="css-ol8bih-PlaceholderInline ea0irds1"
/>
</div>,
.emotion-0 {
background: silver;
display: inline-block;
padding: 20px;
}
<span
class="emotion-0 emotion-1"
<span
class="css-1bdt3um-PlaceholderInline ea0irds1"
color="silver"
/>,
]
@ -120,48 +54,25 @@ Array [
exports[`Storyshots Components|Grid row 1`] = `
Array [
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
.emotion-6 > * {
margin-top: 10px;
}
.emotion-6 > *:nth-child(0) {
margin-top: 0;
}
.emotion-0 {
background: hotpink;
padding: 20px;
}
<div
class="emotion-6 emotion-7"
<div
class="css-1mvfu07-Container ecq4n7c0"
>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
</div>,
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
]
@ -169,53 +80,25 @@ Array [
exports[`Storyshots Components|Grid row multiply 1`] = `
Array [
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
.emotion-0 {
background: hotpink;
padding: 20px;
}
.emotion-6 {
margin-top: 5px;
margin-bottom: 5px;
}
.emotion-6 > * {
margin-top: 30px;
}
.emotion-6 > *:nth-child(0) {
margin-top: 0;
}
<div
class="emotion-6 emotion-7"
<div
class="css-tch0nx-Container ecq4n7c0"
>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
</div>,
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
]
@ -223,53 +106,25 @@ Array [
exports[`Storyshots Components|Grid row outer 1`] = `
Array [
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
.emotion-0 {
background: hotpink;
padding: 20px;
}
.emotion-6 {
margin-top: 10px;
margin-bottom: 10px;
}
.emotion-6 > * {
margin-top: 10px;
}
.emotion-6 > *:nth-child(0) {
margin-top: 0;
}
<div
class="emotion-6 emotion-7"
<div
class="css-1lrgwpd-Container ecq4n7c0"
>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
<div
class="emotion-0 emotion-1"
class="css-19zkc89-PlaceholderBlock ea0irds0"
/>
</div>,
.emotion-0 {
background: silver;
padding: 20px;
}
<div
class="emotion-0 emotion-1"
<div
class="css-sekvhc-PlaceholderBlock ea0irds0"
color="silver"
/>,
]

173
lib/components/src/heading/__snapshots__/heading.stories.storyshot
View File

@ -1,142 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Heading types 1`] = `
.emotion-4 {
margin: 10px;
border: 1px dashed deepskyblue;
}
.emotion-0 {
color: currentColor;
font-weight: normal;
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: #444;
line-height: 1em;
}
.emotion-0 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-0 > sub {
color: rgba(0,0,0,0.4);
}
.emotion-18 {
color: currentColor;
font-weight: normal;
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
line-height: 1em;
font-size: 22px;
}
.emotion-18 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-18 > sub {
color: rgba(0,0,0,0.4);
}
.emotion-30 {
color: currentColor;
font-weight: normal;
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
-webkit-letter-spacing: 4.3px;
-moz-letter-spacing: 4.3px;
-ms-letter-spacing: 4.3px;
letter-spacing: 4.3px;
font-weight: 400;
font-size: 10px;
}
.emotion-30 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-36 {
color: currentColor;
font-weight: normal;
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
-webkit-letter-spacing: 4.3px;
-moz-letter-spacing: 4.3px;
-ms-letter-spacing: 4.3px;
letter-spacing: 4.3px;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
}
.emotion-36 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
.emotion-40 {
color: currentColor;
font-weight: normal;
font-family: -apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Lucida Grande","Arial",sans-serif;
margin: 0;
padding: 0;
line-height: 1.2em;
display: block;
color: rgba(0,0,0,0.4);
-webkit-letter-spacing: 4.3px;
-moz-letter-spacing: 4.3px;
-ms-letter-spacing: 4.3px;
letter-spacing: 4.3px;
font-weight: 400;
font-size: 10px;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-40 > sub {
display: block;
padding-top: 5px;
line-height: 1.2em;
font-size: 14px;
}
<div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-0 emotion-1"
class="css-4bak20-getElement e1mflg050"
>
<span>
DEFAULT WITH ALL CAPS
@ -145,13 +18,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-0 emotion-1"
class="css-4bak20-getElement e1mflg050"
>
<span>
THIS LONG DEFAULT WITH ALL CAPS & SUB
@ -163,13 +36,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-0 emotion-1"
class="css-4bak20-getElement e1mflg050"
>
<span>
page type
@ -178,13 +51,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-18 emotion-1"
class="css-16jm7o7-getElement e1mflg050"
>
<span>
secondary type
@ -193,13 +66,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-0 emotion-1"
class="css-4bak20-getElement e1mflg050"
>
<span>
page type
@ -211,13 +84,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-30 emotion-1"
class="css-14lrs4x-getElement e1mflg050"
>
<span>
section type
@ -226,13 +99,13 @@ exports[`Storyshots Components|Heading types 1`] = `
</header>
</div>
<div
class="emotion-4 emotion-5"
class="css-ys6tvt-Holder e1662bpg0"
>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-36 emotion-1"
class="css-vn0zam-getElement e1mflg050"
>
<span>
section type
@ -240,10 +113,10 @@ exports[`Storyshots Components|Heading types 1`] = `
</h1>
</header>
<header
class="emotion-2 emotion-3"
class="css-yfonvn-Container e1mflg051"
>
<h1
class="emotion-40 emotion-1"
class="css-17iy8tu-getElement e1mflg050"
>
<span>
section type

2195
lib/components/src/icon/__snapshots__/icon.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

14
lib/components/src/logo/__snapshots__/logo.stories.storyshot
View File

@ -1,13 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Logo colored 1`] = `
.emotion-0 {
display: block;
max-width: 100%;
}
<svg
class="emotion-0 emotion-1"
class="css-1k2xz3n-Svg ezlaqq40"
version="1.1"
viewBox="0 0 2023.2 538"
width="500"
@ -56,13 +51,8 @@ exports[`Storyshots Components|Logo colored 1`] = `
`;
exports[`Storyshots Components|Logo gray 1`] = `
.emotion-0 {
display: block;
max-width: 100%;
}
<svg
class="emotion-0 emotion-1"
class="css-1k2xz3n-Svg ezlaqq40"
version="1.1"
viewBox="0 0 2023.2 538"
width="500"

52
lib/components/src/menu/__snapshots__/menu.stories.storyshot
View File

@ -1,15 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Menu initial closed 1`] = `
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>
@ -18,28 +14,20 @@ exports[`Storyshots Components|Menu initial closed 1`] = `
exports[`Storyshots Components|Menu multiple open 1`] = `
Array [
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
<span
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>
</span>,
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
<span
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>
@ -48,15 +36,11 @@ Array [
`;
exports[`Storyshots Components|Menu with Items 1`] = `
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>
@ -64,15 +48,11 @@ exports[`Storyshots Components|Menu with Items 1`] = `
`;
exports[`Storyshots Components|Menu with Items that close 1`] = `
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>
@ -80,15 +60,11 @@ exports[`Storyshots Components|Menu with Items that close 1`] = `
`;
exports[`Storyshots Components|Menu with links 1`] = `
.emotion-0 {
background: hotpink;
}
<span
class="emotion-2 emotion-3"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-0 emotion-1"
class="css-1oxeog4-Button e1xfucyx0"
>
Click me
</button>

12
lib/components/src/navigation/__snapshots__/RoutedLink.stories.storyshot
View File

@ -1,12 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Navigation/RoutedLink w/ href 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="http://google.com"
>
Link
@ -14,12 +10,8 @@ exports[`Storyshots Components|Navigation/RoutedLink w/ href 1`] = `
`;
exports[`Storyshots Components|Navigation/RoutedLink w/ onClick 1`] = `
.emotion-0 {
color: inherit;
}
<a
class="emotion-0 emotion-1"
class="css-1a69rwi-A e10n0hn00"
href="/"
>
Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)

154
lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
View File

@ -1,108 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
.emotion-12 {
position: absolute;
bottom: 0;
right: 0;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.1);
background: rgba(255,255,255,1);
border-radius: 4px 0 0 0;
}
.emotion-2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
list-style: none;
padding: 0;
height: 26px;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
text-transform: uppercase;
border-left: 0 none;
}
.emotion-0 {
border: 0 none;
display: block;
background: none;
padding: 0 10px;
cursor: pointer;
text-transform: inherit;
-webkit-letter-spacing: inherit;
-moz-letter-spacing: inherit;
-ms-letter-spacing: inherit;
letter-spacing: inherit;
font-size: inherit;
color: inherit;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.emotion-0:focus {
border-bottom: 2px solid #9fdaff;
outline: 0 none;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
list-style: none;
padding: 0;
height: 26px;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
text-transform: uppercase;
border-left: 1px solid rgba(0,0,0,0.1);
}
<ul
class="emotion-12 emotion-13"
class="css-13c7bym-Container egs2kzf0"
>
<li
class="emotion-2 emotion-3"
class="css-1tizi7s-ActionItem egs2kzf2"
>
<button
class="emotion-0 emotion-1"
class="css-1r3i0dl-ActionButton egs2kzf1"
>
Nr1
</button>
</li>
<li
class="emotion-6 emotion-3"
class="css-1ed8z1i-ActionItem egs2kzf2"
>
<button
class="emotion-0 emotion-1"
class="css-1r3i0dl-ActionButton egs2kzf1"
>
Nr2
</button>
</li>
<li
class="emotion-6 emotion-3"
class="css-1ed8z1i-ActionItem egs2kzf2"
>
<button
class="emotion-0 emotion-1"
class="css-1r3i0dl-ActionButton egs2kzf1"
>
Nr3
</button>
@ -111,72 +35,14 @@ exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
`;
exports[`Storyshots Components|PanelActionBar single item 1`] = `
.emotion-4 {
position: absolute;
bottom: 0;
right: 0;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.1);
background: rgba(255,255,255,1);
border-radius: 4px 0 0 0;
}
.emotion-2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
list-style: none;
padding: 0;
height: 26px;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
text-transform: uppercase;
border-left: 0 none;
}
.emotion-0 {
border: 0 none;
display: block;
background: none;
padding: 0 10px;
cursor: pointer;
text-transform: inherit;
-webkit-letter-spacing: inherit;
-moz-letter-spacing: inherit;
-ms-letter-spacing: inherit;
letter-spacing: inherit;
font-size: inherit;
color: inherit;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.emotion-0:focus {
border-bottom: 2px solid #9fdaff;
outline: 0 none;
}
<ul
class="emotion-4 emotion-5"
class="css-13c7bym-Container egs2kzf0"
>
<li
class="emotion-2 emotion-3"
class="css-1tizi7s-ActionItem egs2kzf2"
>
<button
class="emotion-0 emotion-1"
class="css-1r3i0dl-ActionButton egs2kzf1"
>
CLEAR
</button>

11
lib/components/src/placeholder/__snapshots__/placeholder.stories.storyshot
View File

@ -1,17 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Placeholder default 1`] = `
.emotion-0 {
font-size: 11px;
display: block;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
}
<p
class="emotion-0 emotion-1"
class="css-hftiue ejh6i270"
>
This is a placeholder
</p>

212
lib/components/src/preview/__snapshots__/preview.stories.storyshot
View File

@ -2,286 +2,136 @@
exports[`Storyshots Components|Preview default 1`] = `
Array [
.emotion-10 {
display: block;
}
.emotion-8 {
fill: currentColor;
}
.emotion-0 {
white-space: normal;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
overflow: hidden;
vertical-align: top;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
padding: 0 15px;
text-transform: uppercase;
-webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
transition: color 0.2s linear,border-bottom-color 0.2s linear;
height: 40px;
line-height: 12px;
box-sizing: border-box;
cursor: pointer;
background: transparent;
border: 0 solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
color: #444;
border-bottom-color: rgba(0,0,0,0.1);
}
.emotion-0:empty {
display: none;
}
.emotion-0:focus {
outline: 0 none;
border-bottom-color: #9fdaff;
}
.emotion-54 {
display: none;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40px;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid rgba(0,0,0,0.1);
background: rgba(255,255,255,1);
color: #999999;
z-index: 4;
overflow: auto;
}
.emotion-34 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-34 > * {
margin-right: 15px;
}
.emotion-4 {
overflow: visisble;
white-space: nowrap;
height: 100%;
}
.emotion-2 {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
display: inline-block;
}
.emotion-6 {
width: 1px;
height: 24px;
background: #eee;
margin-top: 8px;
}
.emotion-12 {
height: 40px;
background: none;
color: inherit;
padding: 0;
border: 0 solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.emotion-12:hover,
.emotion-12:focus {
outline: 0 none;
color: #00aaff;
}
.emotion-52 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-52 > * {
margin-right: 15px;
}
<div
class="emotion-54 emotion-55"
<div
class="css-1cvsvnq-Wrapper e18hjm8i3"
>
<div
class="emotion-34 emotion-35"
class="css-1g91tai-Side e18hjm8i2"
>
<div
class="emotion-4 emotion-5"
class="css-1jsscdj-TabBar e1lzzkxx1"
>
<a
class="emotion-2 emotion-3"
class="css-1e55byq-UnstyledLink e15lz5d2"
href="/?path=/components/string"
>
<button
class="emotion-0 emotion-1"
class="css-1jt6nsk-TabButton e1lzzkxx4"
>
Canvas
</button>
</a>
</div>
<span
class="emotion-6 emotion-7"
class="css-cn6lb3-Separator e18hjm8i0"
/>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
/>
</svg>
</button>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
/>
</svg>
</button>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
/>
</svg>
</button>
<span
class="emotion-6 emotion-7"
class="css-cn6lb3-Separator e18hjm8i0"
/>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z"
/>
</svg>
</button>
</div>
<div
class="emotion-52 emotion-35"
class="css-14u1h02-Side e18hjm8i2"
>
<span
class="emotion-6 emotion-7"
class="css-cn6lb3-Separator e18hjm8i0"
/>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
/>
</svg>
</button>
<span
class="emotion-6 emotion-7"
class="css-cn6lb3-Separator e18hjm8i0"
/>
<button
class="emotion-12 emotion-13"
class="css-tavclh-IconButton e18hjm8i1"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
/>
</svg>
</button>
</div>
</div>,
.emotion-0 {
position: absolute;
overflow: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 3;
height: 100%;
background: transparent;
}
<div
class="emotion-0 emotion-1"
<div
class="css-x2uo28-FrameWrap e15lz5d1"
offset="0"
/>,
]

1017
lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

1062
lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

1267
lib/components/src/treeview/__snapshots__/treeview.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

1001
lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
View File

File diff suppressed because it is too large Load Diff

504
lib/ui/src/components/nav/__snapshots__/nav.stories.storyshot
View File

@ -1,174 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UI|Nav/components components 1`] = `
.emotion-24 {
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
padding: 20px;
overflow: auto;
min-height: 100%;
box-sizing: border-box;
}
.emotion-20 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-16 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
margin-right: -10px;
margin-bottom: 15px;
}
.emotion-6 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 30px;
}
.emotion-4 {
min-height: 30px;
vertical-align: top;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-0 {
display: inline-block;
}
.emotion-2 {
padding-left: 10px;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
line-height: 12px;
}
.emotion-12 {
height: 28px;
width: 28px;
border: 1px solid #eee;
position: relative;
border-radius: 14px;
box-sizing: border-box;
background: transparent;
cursor: pointer;
}
.popup-content + .emotion-12,
.emotion-12:focus {
border: 1px solid #00aaff;
outline: 0 none;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}
.emotion-12:after {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #66bf3c;
}
.emotion-12 > * {
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
.emotion-10 {
display: block;
}
.emotion-8 {
fill: currentColor;
}
.emotion-18 {
font-size: 11px;
display: block;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
}
.emotion-26 {
background: transparent;
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
<nav
class="emotion-26 emotion-27"
class="css-1y3wcdx-Container ea9ueuv0"
>
<div
class="emotion-24 emotion-25"
class="css-1w49w0r-Inner ea9ueuv1"
>
<div
class="emotion-20 emotion-21"
class="css-vx98lc-Main ea9ueuv3"
>
<div
class="emotion-16 emotion-17"
class="css-1l8ehjd-Head ea9ueuv2"
>
<div
class="emotion-6 emotion-7"
class="css-1utbklm-HeadMain ea9ueuv6"
>
<div
class="emotion-4 emotion-5"
class="css-12abwdn-BrandWrapper ezlaqq41"
>
<svg
class="emotion-0 emotion-1"
class="css-1hafpwu-Svg e1jx9faa0"
height="30px"
viewBox="0 0 420 538"
>
@ -190,7 +42,7 @@ exports[`Storyshots UI|Nav/components components 1`] = `
/>
</svg>
<span
class="emotion-2 emotion-3"
class="css-1y8nbux-BrandText ezlaqq42"
>
<strong>
Title
@ -199,20 +51,20 @@ exports[`Storyshots UI|Nav/components components 1`] = `
</div>
</div>
<span
class="emotion-14 emotion-15"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-12 emotion-13"
class="css-16kkzcq-RoundButton eclugbz0"
id="storybook-explorer-menu"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z"
/>
</svg>
@ -220,187 +72,39 @@ exports[`Storyshots UI|Nav/components components 1`] = `
</span>
</div>
<p
class="emotion-18 emotion-19"
class="css-hftiue ejh6i270"
>
There have no stories been loaded yet
</p>
</div>
<div
class="emotion-22 emotion-23"
class="css-1yt93tv-Foot ea9ueuv4"
/>
</div>
</nav>
`;
exports[`Storyshots UI|Nav/settings with brand 1`] = `
.emotion-26 {
background: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.emotion-24 {
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
padding: 20px;
overflow: auto;
min-height: 100%;
box-sizing: border-box;
}
.emotion-20 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-16 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
margin-right: -10px;
margin-bottom: 15px;
}
.emotion-6 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 30px;
}
.emotion-4 {
min-height: 30px;
vertical-align: top;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-0 {
display: inline-block;
}
.emotion-2 {
padding-left: 10px;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
line-height: 12px;
}
.emotion-12 {
height: 28px;
width: 28px;
border: 1px solid #eee;
position: relative;
border-radius: 14px;
box-sizing: border-box;
background: transparent;
cursor: pointer;
}
.popup-content + .emotion-12,
.emotion-12:focus {
border: 1px solid #00aaff;
outline: 0 none;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}
.emotion-12:after {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #66bf3c;
}
.emotion-12 > * {
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
.emotion-10 {
display: block;
}
.emotion-8 {
fill: currentColor;
}
.emotion-18 {
font-size: 11px;
display: block;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
}
<nav
class="emotion-26 emotion-27"
class="css-12y23u7-Container ea9ueuv0"
>
<div
class="emotion-24 emotion-25"
class="css-1w49w0r-Inner ea9ueuv1"
>
<div
class="emotion-20 emotion-21"
class="css-vx98lc-Main ea9ueuv3"
>
<div
class="emotion-16 emotion-17"
class="css-1l8ehjd-Head ea9ueuv2"
>
<div
class="emotion-6 emotion-7"
class="css-1utbklm-HeadMain ea9ueuv6"
>
<div
class="emotion-4 emotion-5"
class="css-12abwdn-BrandWrapper ezlaqq41"
>
<svg
class="emotion-0 emotion-1"
class="css-1hafpwu-Svg e1jx9faa0"
height="30px"
viewBox="0 0 420 538"
>
@ -422,7 +126,7 @@ exports[`Storyshots UI|Nav/settings with brand 1`] = `
/>
</svg>
<span
class="emotion-2 emotion-3"
class="css-1y8nbux-BrandText ezlaqq42"
>
<strong>
Title
@ -431,20 +135,20 @@ exports[`Storyshots UI|Nav/settings with brand 1`] = `
</div>
</div>
<span
class="emotion-14 emotion-15"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-12 emotion-13"
class="css-16kkzcq-RoundButton eclugbz0"
id="storybook-explorer-menu"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z"
/>
</svg>
@ -452,164 +156,36 @@ exports[`Storyshots UI|Nav/settings with brand 1`] = `
</span>
</div>
<p
class="emotion-18 emotion-19"
class="css-hftiue ejh6i270"
>
There have no stories been loaded yet
</p>
</div>
<div
class="emotion-22 emotion-23"
class="css-1yt93tv-Foot ea9ueuv4"
/>
</div>
</nav>
`;
exports[`Storyshots UI|Nav/settings without brand 1`] = `
.emotion-22 {
background: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.emotion-20 {
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
padding: 20px;
overflow: auto;
min-height: 100%;
box-sizing: border-box;
}
.emotion-16 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-12 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
margin-right: -10px;
margin-bottom: 15px;
}
.emotion-2 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 30px;
}
.emotion-8 {
height: 28px;
width: 28px;
border: 1px solid #eee;
position: relative;
border-radius: 14px;
box-sizing: border-box;
background: transparent;
cursor: pointer;
}
.popup-content + .emotion-8,
.emotion-8:focus {
border: 1px solid #00aaff;
outline: 0 none;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}
.emotion-8:after {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #66bf3c;
}
.emotion-8 > * {
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
.emotion-6 {
display: block;
}
.emotion-4 {
fill: currentColor;
}
.emotion-14 {
font-size: 11px;
display: block;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
}
.emotion-0 {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
<nav
class="emotion-22 emotion-23"
class="css-12y23u7-Container ea9ueuv0"
>
<div
class="emotion-20 emotion-21"
class="css-1w49w0r-Inner ea9ueuv1"
>
<div
class="emotion-16 emotion-17"
class="css-vx98lc-Main ea9ueuv3"
>
<div
class="emotion-12 emotion-13"
class="css-1l8ehjd-Head ea9ueuv2"
>
<div
class="emotion-2 emotion-3"
class="css-1utbklm-HeadMain ea9ueuv6"
>
<a
class="emotion-0 emotion-1"
class="css-t6n78u-A ea9ueuv5"
href="https://example.com"
tabindex="-1"
>
@ -617,20 +193,20 @@ exports[`Storyshots UI|Nav/settings without brand 1`] = `
</a>
</div>
<span
class="emotion-10 emotion-11"
class="css-1vfjj5t-Trigger e195q2qw0"
>
<button
class="emotion-8 emotion-9"
class="css-16kkzcq-RoundButton eclugbz0"
id="storybook-explorer-menu"
>
<svg
class="emotion-6 emotion-7"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-4 emotion-5"
class="css-1xhbbdd-Path e1gl30fa0"
d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z"
/>
</svg>
@ -638,13 +214,13 @@ exports[`Storyshots UI|Nav/settings without brand 1`] = `
</span>
</div>
<p
class="emotion-14 emotion-15"
class="css-hftiue ejh6i270"
>
There have no stories been loaded yet
</p>
</div>
<div
class="emotion-18 emotion-19"
class="css-1yt93tv-Foot ea9ueuv4"
/>
</div>
</nav>

231
lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
View File

@ -1,221 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots UI|Panel default 1`] = `
.emotion-0 {
white-space: normal;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
overflow: hidden;
vertical-align: top;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
padding: 0 15px;
text-transform: uppercase;
-webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
transition: color 0.2s linear,border-bottom-color 0.2s linear;
height: 40px;
line-height: 12px;
box-sizing: border-box;
cursor: pointer;
background: transparent;
border: 0 solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
color: rgba(0,0,0,0.4);
border-bottom-color: transparent;
}
.emotion-0:empty {
display: none;
}
.emotion-0:focus {
outline: 0 none;
border-bottom-color: #9fdaff;
}
.emotion-10 {
display: block;
}
.emotion-8 {
fill: currentColor;
}
.emotion-26 {
width: 100%;
height: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-22 {
height: 40px;
background: rgba(255,255,255,1);
border-bottom: 1px solid rgba(0,0,0,0.1);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
color: rgba(0,0,0,0.4);
}
.emotion-4 {
overflow: auto;
white-space: nowrap;
height: 100%;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-2 {
white-space: normal;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
overflow: hidden;
vertical-align: top;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 11px;
-webkit-letter-spacing: 1px;
-moz-letter-spacing: 1px;
-ms-letter-spacing: 1px;
letter-spacing: 1px;
padding: 0 15px;
text-transform: uppercase;
-webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
transition: color 0.2s linear,border-bottom-color 0.2s linear;
height: 40px;
line-height: 12px;
box-sizing: border-box;
cursor: pointer;
background: transparent;
border: 0 solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
color: #444;
border-bottom-color: rgba(0,0,0,0.1);
}
.emotion-2:empty {
display: none;
}
.emotion-2:focus {
outline: 0 none;
border-bottom-color: #9fdaff;
}
.emotion-20 {
height: 100%;
padding-right: 15px;
padding-left: 15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.emotion-20 > * {
margin-right: 15px;
}
.emotion-20 > *:last-child {
margin-right: 0;
}
.emotion-6 {
width: 1px;
height: 24px;
background: #eee;
}
.emotion-12 {
background: none;
border: 0 none;
padding: 0;
color: inherit;
}
.emotion-12:hover,
.emotion-12:focus {
color: #300aaff;
outline: 0 none;
cursor: pointer;
}
.emotion-24 {
display: block;
position: relative;
position: relative;
overflow: auto;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
}
<div
style="height:calc(100vh - 20px)"
>
<div
class="emotion-26 emotion-27"
class="css-1rahlzc-Wrapper e1lzzkxx0"
id="storybook-panel-root"
>
<div
class="emotion-22 emotion-23"
class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
>
<div
class="emotion-4 emotion-5"
class="css-i6idqx-TabBar e1lzzkxx1"
role="tablist"
>
<button
class="emotion-0 emotion-1"
class="css-1ghc1c-TabButton e1lzzkxx4"
role="tab"
type="button"
>
Test 1
</button>
<button
class="emotion-2 emotion-1"
class="css-1jt6nsk-TabButton e1lzzkxx4"
role="tab"
type="button"
>
@ -223,37 +31,37 @@ exports[`Storyshots UI|Panel default 1`] = `
</button>
</div>
<div
class="emotion-20 emotion-21"
class="css-1syx3b1-TabBarTools e1lzzkxx3"
>
<span
class="emotion-6 emotion-7"
class="css-fk8yj3-Separator e9z07qj1"
/>
<button
class="emotion-12 emotion-13"
class="css-506fq4-ToolButton e9z07qj0"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
/>
</svg>
</button>
<button
class="emotion-12 emotion-13"
class="css-506fq4-ToolButton e9z07qj0"
>
<svg
class="emotion-10 emotion-11"
class="css-1yaqr10-Svg e1vqr9v80"
height="14px"
viewBox="0 0 1024 1024"
width="14px"
>
<path
class="emotion-8 emotion-9"
class="css-1xhbbdd-Path e1gl30fa0"
d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
/>
</svg>
@ -261,7 +69,7 @@ exports[`Storyshots UI|Panel default 1`] = `
</div>
</div>
<div
class="emotion-24 emotion-25"
class="css-1od9ihz-Content e1lzzkxx5"
>
<div
id="test1"
@ -283,20 +91,11 @@ exports[`Storyshots UI|Panel default 1`] = `
`;
exports[`Storyshots UI|Panel no panels 1`] = `
.emotion-0 {
font-size: 11px;
display: block;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 20px;
}
<div
style="height:calc(100vh - 20px)"
>
<p
class="emotion-0 emotion-1"
class="css-hftiue ejh6i270"
>
no panels available
</p>