Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(my-joy-beta): create instance - general ui fixes

Browse Source 
fixes #1016
This commit is contained in:
Sara Vieira 2018-01-16 11:54:22 +00:00 committed by Sérgio Ramos
parent 5266b5d485
commit 74a4b82006
18 changed files with 1183 additions and 1154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
View File

@ -481,6 +481,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
font-weight: 600;
}
.c1 + p,

308
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap
View File

@ -589,9 +589,10 @@ Array [
.c1 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
font-weight: 600;
}
.c1 + p,
@ -625,11 +626,11 @@ Array [
<div
className="c0"
>
<h2
<h3
className="c1"
>
test
</h2>
</h3>
<div
className="c2"
>
@ -823,9 +824,10 @@ Array [
.c1 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
font-weight: 600;
}
.c1 + p,
@ -859,11 +861,11 @@ Array [
<div
className="c0"
>
<h2
<h3
className="c1"
>
test
</h2>
</h3>
<div
className="c2"
>
@ -1338,7 +1340,11 @@ exports[`renders <Package /> without throwing 1`] = `
`;
exports[`renders <Packages expanded /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: 2rem;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1351,30 +1357,30 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1414,28 +1420,28 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -1650,19 +1656,27 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
selected={undefined}
/>
</table>
<button
className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
<div
className="c7"
>
Next
</button>
<button
className="c8 c9 c10"
disabled={undefined}
href=""
type="submit"
>
Next
</button>
</div>
</form>
`;
exports[`renders <Packages isVmSelected /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: 2rem;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1675,30 +1689,30 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1738,28 +1752,28 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -1974,19 +1988,27 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
selected={undefined}
/>
</table>
<button
className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
<div
className="c7"
>
Next
</button>
<button
className="c8 c9 c10"
disabled={undefined}
href=""
type="submit"
>
Next
</button>
</div>
</form>
`;
exports[`renders <Packages loading /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: 2rem;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1999,30 +2021,30 @@ exports[`renders <Packages loading /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2062,28 +2084,28 @@ exports[`renders <Packages loading /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -2298,19 +2320,27 @@ exports[`renders <Packages loading /> without throwing 1`] = `
selected={undefined}
/>
</table>
<button
className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
<div
className="c7"
>
Next
</button>
<button
className="c8 c9 c10"
disabled={undefined}
href=""
type="submit"
>
Next
</button>
</div>
</form>
`;
exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: 2rem;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2323,30 +2353,30 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2386,28 +2416,28 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -2622,19 +2652,27 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
selected={undefined}
/>
</table>
<button
className="c7 c8 c9"
disabled={undefined}
href=""
type="submit"
<div
className="c7"
>
Next
</button>
<button
className="c8 c9 c10"
disabled={undefined}
href=""
type="submit"
>
Next
</button>
</div>
</form>
`;
exports[`renders <Packages pristine={false} /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: 2rem;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2647,30 +2685,30 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2710,28 +2748,28 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -2946,13 +2984,17 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
selected={undefined}
/>
</table>
<button
className="c7 c8 c9"
disabled={false}
href=""
type="submit"
<div
className="c7"
>
Next
</button>
<button
className="c8 c9 c10"
disabled={false}
href=""
type="submit"
>
Next
</button>
</div>
</form>
`;

144
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap
View File

@ -3,23 +3,10 @@
exports[`renders <Title /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c0 {
@ -85,11 +72,11 @@ Array [
className="c2"
/>
</div>
<p
<small
className="c3"
/>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -108,22 +95,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -133,23 +125,10 @@ Array [
exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c0 {
@ -235,11 +214,11 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
/>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -258,22 +237,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -283,23 +267,10 @@ Array [
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c0 {
@ -385,11 +356,11 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
/>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -408,22 +379,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -433,23 +409,10 @@ Array [
exports[`renders <Title label="Test"/> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c0 {
@ -515,11 +478,11 @@ Array [
className="c2"
/>
</div>
<p
<small
className="c3"
/>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -538,22 +501,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,

2
packages/my-joy-beta/src/components/create-instance/image.js
View File

@ -173,7 +173,7 @@ export default ({
imageID && (
<Fragment>
<Margin bottom={2} top={3}>
<H3>
<H3 bold>
{titleCase(getImageByID(imageID, images).name)} -{' '}
{getImageByID(imageID, images).version}
</H3>

2
packages/my-joy-beta/src/components/create-instance/name.js
View File

@ -35,7 +35,7 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
{name ? (
<Fragment>
<Margin bottom={2} top={3}>
<H3>{name}</H3>
<H3 bold>{name}</H3>
</Margin>
<Button type="button" secondary onClick={onCancel}>
Edit

12
packages/my-joy-beta/src/components/create-instance/package.js
View File

@ -7,7 +7,7 @@ import Flex from 'styled-flex-component';
import pretty from 'prettysize';
import {
H2,
H3,
H4,
FormGroup,
Button,
@ -229,9 +229,11 @@ export const Packages = ({
</TableThead>
<TableTbody>{children}</TableTbody>
</Table>
<Button type="submit" disabled={pristine}>
Next
</Button>
<Margin top={4}>
<Button type="submit" disabled={pristine}>
Next
</Button>
</Margin>
</form>
);
@ -247,7 +249,7 @@ export const Overview = ({
}) => (
<Fragment>
<Margin bottom={2} top={3}>
<H2>{name}</H2>
<H3 bold>{name}</H3>
<Flex alignCenter>
<span>{price} $</span>
<VerticalDivider />

16
packages/my-joy-beta/src/components/create-instance/title.js
View File

@ -2,8 +2,16 @@ import React, { Fragment } from 'react';
import Flex from 'styled-flex-component';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import styled from 'styled-components';
import { Divider, P } from 'joyent-ui-toolkit';
import { Divider, Small } from 'joyent-ui-toolkit';
const IsEmpty = styled(Margin)`
+ div:empty,
+ form:empty {
margin-bottom: ${remcalc(40)};
}
`;
export default ({ icon, children }) => (
<Fragment>
@ -13,10 +21,10 @@ export default ({ icon, children }) => (
{icon}
</Flex>
</Margin>
<P>{children}</P>
<Small noMargin>{children}</Small>
</Flex>
<Margin top={1} bottom={3}>
<IsEmpty top={1} bottom={3}>
<Divider height={remcalc(1)} />
</Margin>
</IsEmpty>
</Fragment>
);

484
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -3,23 +3,10 @@
exports[`renders <Metadata /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -146,13 +133,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Metadata
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -171,22 +158,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -197,23 +189,10 @@ Array [
exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -340,13 +319,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Metadata
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -365,22 +344,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -1495,7 +1479,7 @@ Array [
height="0.8125rem"
/>
</form>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1508,30 +1492,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1575,50 +1559,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1658,49 +1642,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Metadata
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Metadata
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;
@ -1708,23 +1700,10 @@ Array [
exports[`renders <Metadata expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -1851,13 +1830,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Metadata
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -1876,22 +1855,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -1991,7 +1975,7 @@ Array [
</div>
</div>
</div>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2004,30 +1988,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2071,50 +2055,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2154,49 +2138,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Metadata
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Metadata
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;
@ -2204,23 +2196,10 @@ Array [
exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -2347,13 +2326,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Metadata
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -2372,22 +2351,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -4464,23 +4448,10 @@ Array [
exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -4607,13 +4578,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Metadata
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -4632,22 +4603,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -6813,7 +6789,7 @@ Array [
height="0.8125rem"
/>
</form>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -6826,30 +6802,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -6893,50 +6869,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -6976,49 +6952,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Metadata
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Metadata
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;

441
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -3,23 +3,10 @@
exports[`renders <Networks /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -118,13 +105,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -143,49 +130,48 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
<form />,
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
/>,
]
`;
exports[`renders <Networks loading /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -284,13 +270,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -309,48 +295,47 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
/>,
]
`;
exports[`renders <Networks loading expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -449,13 +434,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -474,22 +459,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -706,7 +696,7 @@ Array [
Loading...
</p>
</div>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -719,30 +709,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -782,63 +772,58 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
<button
className="c0 c1 c2"
href=""
onClick={undefined}
type="button"
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
>
Next
</button>,
<button
className="c1 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>,
]
`;
exports[`renders <Networks networks=[] /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -937,13 +922,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -962,22 +947,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -1315,29 +1305,23 @@ Array [
</div>
</div>
</form>,
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
/>,
]
`;
exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -1436,13 +1420,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -1461,22 +1445,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -2316,6 +2305,10 @@ Array [
margin-right: 0.25rem;
}
.c2 {
margin-bottom: 2rem;
}
.c15 {
margin-bottom: 1rem;
}
@ -2324,10 +2317,6 @@ Array [
margin-right: 2rem;
}
.c2 {
margin-bottom: 2rem;
}
.c22 {
margin-top: 1rem;
}
@ -2852,7 +2841,7 @@ Array [
</div>
</div>
</form>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2865,30 +2854,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2928,63 +2917,58 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
<button
className="c0 c1 c2"
href=""
onClick={undefined}
type="button"
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
>
Next
</button>,
<button
className="c1 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>,
]
`;
exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -3083,13 +3067,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Networks
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -3108,22 +3092,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -3490,7 +3479,7 @@ Array [
</div>
</div>
</form>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -3503,30 +3492,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -3570,56 +3559,64 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
<button
className="c0 c1 c2"
href=""
onClick={undefined}
type="button"
.c0 {
margin-bottom: 2rem;
}
<div
className="c0"
>
Edit
</button>,
<button
className="c1 c2 c3"
href=""
onClick={undefined}
type="button"
>
Edit
</button>
</div>,
]
`;

484
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
View File

@ -3,23 +3,10 @@
exports[`renders <Tags /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -133,13 +120,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Tags
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -158,22 +145,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -184,23 +176,10 @@ Array [
exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -314,13 +293,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Tags
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -339,22 +318,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -1459,7 +1443,7 @@ Array [
height="0.8125rem"
/>
</form>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1472,30 +1456,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1539,50 +1523,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1622,49 +1606,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Tag
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Tag
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;
@ -1672,23 +1664,10 @@ Array [
exports[`renders <Tags expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -1802,13 +1781,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Tags
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -1827,22 +1806,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -1958,7 +1942,7 @@ Array [
<ul
className="c0"
/>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1971,30 +1955,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2038,50 +2022,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2121,49 +2105,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Tag
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Tag
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;
@ -2171,23 +2163,10 @@ Array [
exports[`renders <Tags metadata=[] /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -2301,13 +2280,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Tags
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -2326,22 +2305,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -2352,23 +2336,10 @@ Array [
exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
Array [
.c3 {
font-size: 80%;
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c3 + p,
.c3 + small,
.c3 + h1,
.c3 + h2,
.c3 + label,
.c3 + h3,
.c3 + h4,
.c3 + h5,
.c3 + div,
.c3 + span {
padding-bottom: 2.25rem;
line-height: 1.125rem;
font-size: 0.8125rem;
}
.c1 {
@ -2482,13 +2453,13 @@ Array [
</svg>
</div>
</div>
<p
<small
className="c3"
>
Tags
</p>
</small>
</div>,
.c2 {
.c3 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -2507,22 +2478,27 @@ Array [
margin-left: -0.5rem;
}
.c1 {
.c2 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
.c1 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
.c0 + div:empty,
.c0 + form:empty {
margin-bottom: 2.5rem;
}
<div
className="c0"
className="c0 c1"
>
<div
className="c1 c2"
className="c2 c3"
height="0.0625rem"
/>
</div>,
@ -2638,7 +2614,7 @@ Array [
<ul
className="c0"
/>,
.c2 {
.c3 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2651,30 +2627,30 @@ Array [
min-width: 7.5rem;
}
.c2::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner {
.c3::-moz-focus-inner,
.c3[type='button']::-moz-focus-inner,
.c3[type='reset']::-moz-focus-inner,
.c3[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c2:-moz-focusring,
.c2[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring {
.c3:-moz-focusring,
.c3[type='button']:-moz-focusring,
.c3[type='reset']:-moz-focusring,
.c3[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c2 + button {
.c3 + button {
margin-left: 0.375rem;
}
.c1 {
.c2 {
display: inline-block;
}
.c0 {
.c1 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2718,50 +2694,50 @@ Array [
border-color: rgb(216,216,216);
}
.c0:focus {
.c1:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c0:hover {
.c1:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c0[disabled] {
.c1[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0:focus {
.c1:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c0:hover {
.c1:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c0:active,
.c0:active:hover,
.c0:active:focus {
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c3 {
.c4 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2801,49 +2777,57 @@ Array [
border: solid 0.0625rem rgb(45,56,132);
}
.c3:focus {
.c4:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c3:hover {
.c4:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c3:active,
.c3:active:hover,
.c3:active:focus {
.c4:active,
.c4:active:hover,
.c4:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c3[disabled] {
.c4[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c0 {
margin-bottom: 2rem;
}
<div>
<button
className="c0 c1 c2"
href=""
onClick={[Function]}
type="button"
<div
className="c0"
>
Add Tag
</button>
<button
className="c3 c1 c2"
href=""
onClick={undefined}
type="button"
>
Next
</button>
<button
className="c1 c2 c3"
href=""
onClick={[Function]}
type="button"
>
Add Tag
</button>
<button
className="c4 c2 c3"
href=""
onClick={undefined}
type="button"
>
Next
</button>
</div>
</div>,
]
`;

4
packages/my-joy-beta/src/containers/create-instance/affinity.js
View File

@ -118,7 +118,7 @@ export const Affinity = ({
onClick={() => handleChangeAddOpen(true)}
secondary
>
Create affinity rule
Create Affinity Rule
</Button>
) : null}
<Margin top={2} bottom={4}>
@ -133,7 +133,7 @@ export const Affinity = ({
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
<Margin top={3}>
<Margin top={4}>
<Divider height={remcalc(1)} />
</Margin>
</Fragment>

196
packages/my-joy-beta/src/containers/create-instance/cns.js
View File

@ -64,103 +64,109 @@ const CNSContainer = ({
</a>
</Description>
) : null}
{expanded && cnsEnabled ? (
<Card>
<Padding all={4} bottom={0}>
<Header />
<Flex column>
{hostnames
.filter(({ service }) => !service)
.map(({ value, ...hostname }) => (
<Hostname key={value} value={value} {...hostname} />
))}
</Flex>
<Divider height={remcalc(1)} />
<Margin top={4}>
{serviceNames.length ? (
<Margin>
<FormLabel>Existing CNS service name(s)</FormLabel>
<Margin top={0.5}>
<TagList>
{serviceNames.map((value, index) => (
<Tag
active
key={index}
value={value}
onRemoveClick={() => handleRemoveService(index)}
/>
))}
</TagList>
</Margin>
</Margin>
) : null}
<HostnamesHeader />
<ReduxForm
form={`${CNS_FORM}-new-service`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddService}
>
{props => <AddServiceForm {...props} />}
</ReduxForm>
<Margin top={4}>
<Flex column>
{hostnames
.filter(({ service }) => service)
.map(({ value, ...hostname }) => (
<Hostname key={value} value={value} {...hostname} />
))}
</Flex>
</Margin>
</Margin>
</Padding>
</Card>
) : null}
{expanded ? (
<Fragment>
<Margin bottom={4} top={4}>
<FormGroup name="cns-enabled">
<Flex alignCenter>
<FormLabel>Disabled CNS</FormLabel>
<Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
Enabled CNS
</Toggle>
</Flex>
</FormGroup>
</Margin>
<Margin bottom={4}>
<P>
*All hostnames are indicative and will be confirmed after
deployment.
</P>
</Margin>
<Button type="button" onClick={handleNext}>
Next
</Button>
</Fragment>
) : null}
{proceeded && !expanded ? (
<Fragment>
<Margin bottom={4}>
<H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
</Margin>
{cnsEnabled ? (
<Fragment>
<FormLabel>Existing CNS service name(s)</FormLabel>
<Margin top={0.5}>
<TagList>
{serviceNames.map((value, index) => (
<Tag key={index} value={value} />
<div>
{expanded && cnsEnabled ? (
<Card>
<Padding all={4} bottom={0}>
<Header />
<Flex column>
{hostnames
.filter(({ service }) => !service)
.map(({ value, ...hostname }) => (
<Hostname key={value} value={value} {...hostname} />
))}
</TagList>
</Flex>
<Divider height={remcalc(1)} />
<Margin top={4}>
{serviceNames.length ? (
<Margin>
<FormLabel>Existing CNS service name(s)</FormLabel>
<Margin top={0.5}>
<TagList>
{serviceNames.map((value, index) => (
<Tag
active
key={index}
value={value}
onRemoveClick={() => handleRemoveService(index)}
/>
))}
</TagList>
</Margin>
</Margin>
) : null}
<HostnamesHeader />
<ReduxForm
form={`${CNS_FORM}-new-service`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddService}
>
{props => <AddServiceForm {...props} />}
</ReduxForm>
<Margin top={4}>
<Flex column>
{hostnames
.filter(({ service }) => service)
.map(({ value, ...hostname }) => (
<Hostname key={value} value={value} {...hostname} />
))}
</Flex>
</Margin>
</Margin>
</Fragment>
) : null}
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Fragment>
) : null}
</Padding>
</Card>
) : null}
{expanded ? (
<Fragment>
<Margin bottom={4} top={4}>
<FormGroup name="cns-enabled">
<Flex alignCenter>
<FormLabel>Disabled CNS</FormLabel>
<Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
Enabled CNS
</Toggle>
</Flex>
</FormGroup>
</Margin>
<Margin bottom={4}>
<P>
*All hostnames are indicative and will be confirmed after
deployment.
</P>
</Margin>
<Margin bottom={4}>
<Button type="button" onClick={handleNext}>
Next
</Button>
</Margin>
</Fragment>
) : null}
{proceeded && !expanded ? (
<Fragment>
<Margin bottom={4}>
<H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
</Margin>
{cnsEnabled ? (
<Fragment>
<FormLabel>Existing CNS service name(s)</FormLabel>
<Margin top={0.5}>
<TagList>
{serviceNames.map((value, index) => (
<Tag key={index} value={value} />
))}
</TagList>
</Margin>
</Fragment>
) : null}
<Margin bottom={4}>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Margin>
</Fragment>
) : null}
</div>
</Fragment>
);

72
packages/my-joy-beta/src/containers/create-instance/firewall.js
View File

@ -43,40 +43,46 @@ const Firewall = ({
</a>
</Description>
) : null}
{loading && expanded ? <StatusLoader /> : null}
{!loading ? (
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
{props =>
expanded ? (
<FirewallForm
{...props}
defaultRules={defaultRules}
tagRules={tagRules}
enabled={enabled}
/>
) : null}
</ReduxForm>
) : null}
{proceeded && !expanded ? (
<Margin bottom={4}>
<H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
</Margin>
) : null}
<Fragment>
{expanded ? (
<Button type="button" onClick={handleNext}>
Next
</Button>
) : proceeded ? (
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
<div>
{loading && expanded ? <StatusLoader /> : null}
{!loading ? (
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
{props =>
expanded ? (
<FirewallForm
{...props}
defaultRules={defaultRules}
tagRules={tagRules}
enabled={enabled}
/>
) : null}
</ReduxForm>
) : null}
</Fragment>
{proceeded && !expanded ? (
<Margin bottom={4}>
<H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
</Margin>
) : null}
<Fragment>
{expanded ? (
<Margin bottom={4}>
<Button type="button" onClick={handleNext}>
Next
</Button>
</Margin>
) : proceeded ? (
<Margin bottom={4}>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Margin>
) : null}
</Fragment>
</div>
</Fragment>
);

12
packages/my-joy-beta/src/containers/create-instance/metadata.js
View File

@ -97,7 +97,7 @@ export const Metadata = ({
) : null}
<div>
{expanded ? (
<Fragment>
<Margin bottom={4}>
<Button
type="button"
onClick={() => handleChangeAddOpen(true)}
@ -108,11 +108,13 @@ export const Metadata = ({
<Button type="button" onClick={handleNext}>
Next
</Button>
</Fragment>
</Margin>
) : proceeded ? (
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
<Margin bottom={4}>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Margin>
) : null}
</div>
</Fragment>

5
packages/my-joy-beta/src/containers/create-instance/networks.js
View File

@ -4,6 +4,7 @@ import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import get from 'lodash.get';
import { Margin } from 'styled-components-spacing';
import forceArray from 'force-array';
import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
@ -76,7 +77,7 @@ export const Networks = ({
)}
</ReduxForm>
) : null}
<Fragment>
<Margin bottom={4}>
{expanded ? (
<Button type="button" onClick={handleNext}>
Next
@ -86,7 +87,7 @@ export const Networks = ({
Edit
</Button>
) : null}
</Fragment>
</Margin>
</Fragment>
);
};

122
packages/my-joy-beta/src/containers/create-instance/package.js
View File

@ -38,65 +38,71 @@ const PackageContainer = ({
}) => (
<Fragment>
<Title icon={<PackageIcon />}>Package</Title>
{expanded ? (
<Description>
A package defines the specs of your instance. On Triton, packages can
only increase in size.{' '}
<a
href="https://docs.joyent.com/private-cloud/packages"
target="_blank"
rel="noopener noreferrer"
<div>
{expanded ? (
<Description>
A package defines the specs of your instance. On Triton, packages can
only increase in size.{' '}
<a
href="https://docs.joyent.com/private-cloud/packages"
target="_blank"
rel="noopener noreferrer"
>
Read the docs
</a>
</Description>
) : null}
{!loading && expanded ? (
<ReduxForm
form={`${FORM_NAME}-filters`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
Read the docs
</a>
</Description>
) : null}
{!loading && expanded ? (
<ReduxForm
form={`${FORM_NAME}-filters`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
{props => <Filters {...props} />}
</ReduxForm>
) : null}
{loading && expanded ? (
<StatusLoader />
) : (
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleSubmit}
>
{props => (
<Fragment>
{expanded ? (
<Packages
{...props}
hasVms={hasVms}
sortBy={sortBy}
sortOrder={sortOrder}
onSortBy={handleSortBy}
>
{packages.map(({ id, ...pkg }) => (
<Package
key={id}
id={id}
selected={selected.id === id}
hasVms={hasVms}
{...pkg}
/>
))}
</Packages>
) : null}
{!expanded && selected.id ? (
<Overview {...selected} hasVms={hasVms} onCancel={handleCancel} />
) : null}
</Fragment>
)}
</ReduxForm>
)}
{props => <Filters {...props} />}
</ReduxForm>
) : null}
{loading && expanded ? (
<StatusLoader />
) : (
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleSubmit}
>
{props => (
<Fragment>
{expanded ? (
<Packages
{...props}
hasVms={hasVms}
sortBy={sortBy}
sortOrder={sortOrder}
onSortBy={handleSortBy}
>
{packages.map(({ id, ...pkg }) => (
<Package
key={id}
id={id}
selected={selected.id === id}
hasVms={hasVms}
{...pkg}
/>
))}
</Packages>
) : null}
{!expanded && selected.id ? (
<Overview
{...selected}
hasVms={hasVms}
onCancel={handleCancel}
/>
) : null}
</Fragment>
)}
</ReduxForm>
)}
</div>
</Fragment>
);

12
packages/my-joy-beta/src/containers/create-instance/tags.js
View File

@ -85,7 +85,7 @@ export const Tags = ({
) : null}
<div>
{expanded ? (
<Fragment>
<Margin bottom={4}>
<Button
type="button"
onClick={() => handleChangeAddOpen(true)}
@ -96,11 +96,13 @@ export const Tags = ({
<Button type="button" onClick={handleNext}>
Next
</Button>
</Fragment>
</Margin>
) : proceeded ? (
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
<Margin bottom={4}>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
</Margin>
) : null}
</div>
</Fragment>

20
packages/ui-toolkit/src/text/headings.js
View File

@ -16,6 +16,10 @@ export const H1 = NH1.extend`
display: inline-block;
`};
${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('white')`
-webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white}
@ -48,6 +52,10 @@ export const H2 = styled.h2`
display: inline-block;
`};
${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('white')`
-webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white}
@ -80,6 +88,10 @@ export const H3 = styled.h3`
display: inline-block;
`};
${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('white')`
-webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white}
@ -145,6 +157,10 @@ export const H5 = styled.h4`
display: inline-block;
`};
${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('white')`
-webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white}
@ -177,6 +193,10 @@ export const H6 = styled.h6`
display: inline-block;
`};
${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('white')`
-webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white}