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

feat(my-joy-beta): create instance user scripts

Browse Source 
fixes #984
This commit is contained in:
Sérgio Ramos 2018-01-19 17:37:31 +00:00 committed by GitHub
parent e650a070a4
commit 0d207f01e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
92 changed files with 12543 additions and 13066 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/icons/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "joyent-icons", "name": "joyent-icons",
"version": "3.0.0", "version": "4.0.0",
"license": "MPL-2.0", "license": "MPL-2.0",
"repository": "github:yldio/joyent-portal", "repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js", "main": "dist/umd/index.js",

6503
packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

1
packages/icons/src/__tests__/icons.spec.js
View File

@ -1,5 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { ThemeProvider } from 'styled-components';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
import 'jest-styled-components'; import 'jest-styled-components';

18
packages/icons/src/actions.js
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import remcalc from 'remcalc';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
@ -16,29 +15,16 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="4" width="4"
height="16" height="16"
viewBox="0 0 4 16" viewBox="0 0 4 16"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
fill-rule="evenodd" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(6)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(12)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/> />
</svg> </svg>
)} )}

37
packages/icons/src/affinity.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -17,34 +14,12 @@ export default ({
}) => ( }) => (
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg width="20.25" height="14" viewBox="0 0 24 16" style={{ ...style, ...rotateStyle }} {...rest}>
width="18" <path
height="12" fill={calcFill({ fill, disabled, light, colors })}
viewBox="0 0 18 12" d="M13.25 0a7 7 0 0 0-3.13.74A7 7 0 1 0 7 14a7 7 0 0 0 3.12-.74A7 7 0 1 0 13.25 0zM12 7a5 5 0 0 1-1.88 3.87 4.94 4.94 0 0 1 0-7.74A5 5 0 0 1 12 7zM2 7a5 5 0 0 1 5-5 5.26 5.26 0 0 1 1.2.16 7 7 0 0 0 0 9.68A5.26 5.26 0 0 1 7 12a5 5 0 0 1-5-5zm11.25 5a5.26 5.26 0 0 1-1.2-.16 7 7 0 0 0 0-9.68 5.26 5.26 0 0 1 1.2-.16 5 5 0 0 1 0 10z"
version="1.1" />
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1104 1236)">
<g>
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(1104 -1236)"
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12 0C 10.9 0 9.9 0.300003 9 0.800003C 8.1 0.300003 7.1 0 6 0C 2.7 0 0 2.7 0 6C 0 9.3 2.7 12 6 12C 7.1 12 8.1 11.7 9 11.2C 9.9 11.7 10.9 12 12 12C 15.3 12 18 9.3 18 6C 18 2.7 15.3 0 12 0ZM 6 11C 3.2 11 1 8.8 1 6C 1 3.2 3.2 1 6 1C 6.7 1 7.4 1.2 8.1 1.5C 6.8 2.6 6 4.2 6 6C 6 7.8 6.8 9.4 8.1 10.5C 7.4 10.8 6.7 11 6 11ZM 11 6C 11 7.6 10.2 9.1 9 10C 7.8 9.1 7 7.7 7 6C 7 4.3 7.8 2.9 9 2C 10.2 2.9 11 4.4 11 6ZM 12 11C 11.3 11 10.6 10.8 9.9 10.5C 11.2 9.4 12 7.8 12 6C 12 4.2 11.2 2.6 9.9 1.5C 10.5 1.2 11.2 1 12 1C 14.8 1 17 3.2 17 6C 17 8.8 14.8 11 12 11Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>
); );

9
packages/icons/src/arrow.js
View File

@ -15,17 +15,16 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="9"
height="6"
viewBox="0 0 9 6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="9.6"
height="6"
viewBox="0 0 9.6 6"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
/> />
</svg> </svg>
)} )}

34
packages/icons/src/clipboard.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,32 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="13" xmlns="http://www.w3.org/2000/svg"
height="16" width="15"
version="1.1" height="19"
xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 15 19"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-2367 443)"> <path
<use fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`} d="M5,12l2-2v9H8V10l2,2,1-1L7.5,8,4,11ZM11,1h2a2.15,2.15,0,0,1,2,2V16a2.15,2.15,0,0,1-2,2H10V16h3V3H11V5H4V3H2V16H5v2H2a2.15,2.15,0,0,1-2-2V3A2.15,2.15,0,0,1,2,1H4V0h7ZM9,2H6V3H9V2Z"
transform="translate(2370 -437)" />
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2367 -443)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path id={ids[0]} d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z" />
<path
id={ids[1]}
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

9
packages/icons/src/close.js
View File

@ -15,17 +15,16 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="11.31"
height="11.31"
viewBox="0 0 11.31 11.31"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fillRule="evenodd"
/> />
</svg> </svg>
)} )}

54
packages/icons/src/cns.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,51 +15,20 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="16"
height="13"
viewBox="0 0 16 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="18"
height="14"
viewBox="0 0 18 14"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1106 442)"> <path
<use fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`} d="M16,2V5H2V2H16m1-2H1A1,1,0,0,0,0,1V6A1,1,0,0,0,1,7H17a1,1,0,0,0,1-1V1a1,1,0,0,0-1-1Z"
transform="translate(1106 -442)" />
fill={calcFill({ fill, disabled, light, colors })} <polygon points="4.74 11.44 4.11 12.07 4.11 9 3.11 9 3.11 12.1 2.45 11.44 1.74 12.15 3.6 14 5.45 12.15 4.74 11.44" />
/> <polygon points="10.26 11.44 9.63 12.07 9.63 9 8.63 9 8.63 12.1 7.96 11.44 7.26 12.15 9.11 14 10.96 12.15 10.26 11.44" />
<use <polygon points="15.74 11.44 15.11 12.07 15.11 9 14.11 9 14.11 12.1 13.45 11.44 12.74 12.14 14.6 14 16.45 12.14 15.74 11.44" />
xlinkHref={`#${ids[1]}`}
transform="translate(1106.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1112.1 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M15 1v4H1V1h14zm0-1H1C.4 0 0 .4 0 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
/>
<path
id={ids[1]}
d="M3 2.4l-.6.7V0h-1v3.1l-.7-.7-.7.7L1.9 5l1.8-1.9-.7-.7z"
/>
<path
id={ids[2]}
d="M3 2.4l-.6.7V0h-1v3.1l-.6-.7-.8.7L1.9 5l1.9-1.9-.8-.7z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

4
packages/icons/src/cpu.js
View File

@ -15,12 +15,10 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}

7
packages/icons/src/data-center.js
View File

@ -15,17 +15,14 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="9" width="9"
height="13" height="13"
viewBox="0 0 9 13" viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
/> />
</svg> </svg>
)} )}

31
packages/icons/src/delete.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,31 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="9"
height="12"
viewBox="0 0 9 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="12"
height="16"
viewBox="0 0 12 16"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(17403 -18583)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<use d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
fill={calcFill({ fill, disabled, light, colors })} />
xlinkHref={`#${ids[0]}`}
transform="translate(-17403 18583)"
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

39
packages/icons/src/edit.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,35 +15,15 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="17" xmlns="http://www.w3.org/2000/svg"
height="17" width="17.07"
version="1.1" height="17.07"
xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.07 17.07"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<g transform="translate(-1886 444)"> <path
<use fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`} d="M14,9.07v5a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1v-10a1,1,0,0,1,1-1H8v-2H3c-2,0-3,1-3,3v10a2.65,2.65,0,0,0,3,3H13a2.65,2.65,0,0,0,3-3v-5ZM14.24,0,5.76,8.49,4.34,12.73l4.25-1.42,8.48-8.48ZM7.17,8.49l7.07-7.08,1.42,1.42L8.59,9.9Z"
transform="translate(1886 -441.9)" />
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889.4 -444)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M13 7v5c0 .5-.4 1-1 1H2c-.5 0-1-.4-1-1V2c0-.5.4-1 1-1h5V0H2C.9 0 0 .9 0 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V7h-1z"
/>
<path
id={ids[1]}
d="M9.8 0L1.4 8.5 0 12.7l4.2-1.4 8.5-8.5L9.8 0zm-7 8.5l7.1-7.1 1.4 1.4-7.1 7.1-1.4-1.4z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

12
packages/icons/src/fabric.js
View File

@ -15,18 +15,14 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
viewBox="0 0 16.2 16.2"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="16.2"
width="17" height="16.2"
height="17" viewBox="0 0 16.2 16.2"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
/> />
</svg> </svg>
)} )}

32
packages/icons/src/filter.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="15.71"
viewBox="0 0 18 15.71"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M15.28,2a.81.81,0,0,1,.72.86.91.91,0,0,1-.25.65l0,0,0,0L11.54,8.35A4.11,4.11,0,0,0,10,12.17v.88c0,.43,0,.66-1,.66s-1-.23-1-.66v-.88A4.11,4.11,0,0,0,6.46,8.35L2.3,3.58l0,0,0,0A.91.91,0,0,1,2,2.86.81.81,0,0,1,2.72,2H15.28m0-2H2.72A2.8,2.8,0,0,0,0,2.86a2.9,2.9,0,0,0,.8,2L5,9.71c1,1,1,1,1,2.46v.88c0,1.66,1,2.66,3,2.66s3-1,3-2.66v-.88c0-1.46,0-1.46,1-2.46l4.2-4.82a2.9,2.9,0,0,0,.8-2A2.8,2.8,0,0,0,15.28,0Z"
/>
</svg>
)}
</Rotate>
);

47
packages/icons/src/firewall.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,47 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="15"
height="17"
viewBox="0 0 15 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="17"
height="18.56"
viewBox="0 0 17 18.56"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1886 1522)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<g> d="M15.88,1.75h-.07c-.34,0-.72,0-1.14,0-1.73,0-4-.27-5.39-1.49A1.16,1.16,0,0,0,7.72.3C6.35,1.52,4.06,1.79,2.33,1.79c-.42,0-.8,0-1.14,0H1.12A1.12,1.12,0,0,0,0,2.88v.94C0,10.5,3.4,16.29,8.5,18.56h0C13.6,16.29,17,11.64,17,5V2.88A1.12,1.12,0,0,0,15.88,1.75ZM15,5.46c0,5-2.3,8.87-6.5,10.9-4-2-6.5-6.6-6.5-11.9V3.63c.36,0,.72,0,1.07,0,2.43,0,4.26-.53,5.42-1.56l0,0,0,0c1.16,1,3,1.56,5.42,1.56.35,0,.71,0,1.06,0ZM5,4.69a10,10,0,0,1-1-.05V6.05a9,9,0,0,0,5,8.41H9v-11C8.23,4.51,6.27,4.69,5,4.69Zm3,8A8.36,8.36,0,0,1,5,6.05V5.69H5a9.3,9.3,0,0,0,3-.42Z"
<g> />
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1886 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889 -1519)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.5 1.60001C 8.6 2.60001 10.5 3.20001 12.9 3.20001C 13.3 3.20001 13.6 3.20001 14 3.20001L 14 5C 14 10 11.7 13.9 7.5 15.9C 3.5 13.9 1 9.3 1 4L 1 3.20001C 1.3 3.20001 1.7 3.20001 2.1 3.20001C 4.5 3.20001 6.4 2.70001 7.5 1.60001ZM 7.5 0C 6.6 1.8 3.9 2.20001 2.1 2.20001C 0.899998 2.20001 0 2.10001 0 2.10001L 0 4C 0 9.9 3 15 7.5 17C 12 15 15 10.9 15 5L 15 2.10001C 15 2.10001 14.1 2.20001 12.9 2.20001C 11.1 2.20001 8.4 1.8 7.5 0Z"
/>
<path
id={ids[1]}
d="M 4 2.05496L 4 9.06593C 2.1 7.73626 1 5.3187 1 2.65936L 1 2.41758C 2.2 2.41758 3.2 2.29672 4 2.05496ZM 5 0C 4.2 1.08791 2.3 1.20879 1 1.20879C 0.4 1.20879 0 1.20879 0 1.20879L 0 2.65936C 0 6.40661 2 9.67034 5 11L 5 0Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

4
packages/icons/src/general.js
View File

@ -15,12 +15,10 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}

55
packages/icons/src/id.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,53 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="18" xmlns="http://www.w3.org/2000/svg"
height="12" width="20"
version="1.1" height="15"
xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 15"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-2124 441)"> <path
<use fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`} d="M17,2a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H17M3,0A3,3,0,0,0,0,3v9a3,3,0,0,0,3,3H17q3,0,3-3V3q0-3-3-3ZM7.74,5A1.27,1.27,0,0,1,9,6.26V8.74A1.27,1.27,0,0,1,7.74,10H5.26A1.27,1.27,0,0,1,4,8.74V6.26A1.27,1.27,0,0,1,5.26,5H7.74M7.66,4H5.34A2.34,2.34,0,0,0,3,6.34V8.66A2.34,2.34,0,0,0,5.34,11H7.66A2.34,2.34,0,0,0,10,8.66V6.34A2.34,2.34,0,0,0,7.66,4ZM16,5H11V6h5Zm1,2H11V8h6ZM15,9H11v1h4Z"
transform="translate(2124 -441)" />
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2126 -439)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(2134 -438)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[3]}`}
transform="translate(2134 -436)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[4]}`}
transform="translate(2134 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M16 1c.6 0 1 .5 1 1v8c0 .6-.5 1-1 1H2c-.6 0-1-.5-1-1V2c0-.6.5-1 1-1h14zm0-1H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
/>
<path
id={ids[1]}
d="M4.7 1C5.4 1 6 1.6 6 2.3v2.5c0 .7-.6 1.3-1.3 1.3H2.3C1.6 6.1 1 5.5 1 4.8V2.3C1 1.6 1.6 1 2.3 1h2.4zm0-1H2.3C1 0 0 1 0 2.3v2.3c0 1.3 1 2.3 2.3 2.3h2.3C6 7 7 5.9 7 4.6V2.3C7 1 6 0 4.7 0z"
/>
<path id={ids[2]} d="M5 0H0v1h5V0z" />
<path id={ids[3]} d="M6 0H0v1h6V0z" />
<path id={ids[4]} d="M4 0H0v1h4V0z" />
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

61
packages/icons/src/import.js
View File

@ -1,58 +1,31 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()]; export default ({
fill = null,
export default ({ direction = 'down', style = {}, colors = {}, ...rest }) => ( light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="15"
height="18"
viewBox="0 0 15 18"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-2061 2768)"> <path
<clipPath id={`${ids[0]}`} clipRule="evenodd"> fill={calcFill({ fill, disabled, light, colors })}
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" /> d="M0,11H2v5H13V11h2v7H0Zm7.7,2.8.4-.5L12,8.76l-.6-.7L8,12V0H7V12L3.6,8.06l-.6.7L7.5,14Z"
</clipPath> />
<g clipPath={`url(#${ids[0]})`}>
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
<use
xlinkHref={`#${ids[1]}`}
fill={colors.text}
transform="translate(2061 -2754)"
/>
<use
xlinkHref={`#${ids[2]}`}
fill={colors.text}
transform="translate(2072 -2768)"
/>
<use
xlinkHref={`#${ids[3]}`}
fill={colors.text}
transform="translate(2067.29 -2755)"
/>
</g>
</g>
<defs>
<path
id={`${ids[1]}`}
fillRule="evenodd"
d="M0 0h2v8h20V0h2v10H0V0z"
/>
<path id={`${ids[2]}`} fillRule="evenodd" d="M0 0h2v18H0V0z" />
<path
id={`${ids[3]}`}
fillRule="evenodd"
d="M1.414 0L0 1.414l4.295 4.292.655.658.759.756 5.705-5.705L10 0 5.707 4.293 1.414 0z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

2
packages/icons/src/index.js
View File

@ -14,6 +14,7 @@ export { default as Dot } from './dot';
export { default as Duplicate } from './duplicate'; export { default as Duplicate } from './duplicate';
export { default as Edit } from './edit'; export { default as Edit } from './edit';
export { default as Fabric } from './fabric'; export { default as Fabric } from './fabric';
// export { default as Filter } from './filter';
export { default as Firewall } from './firewall'; export { default as Firewall } from './firewall';
export { default as General } from './general'; export { default as General } from './general';
export { default as Health } from './health'; export { default as Health } from './health';
@ -36,6 +37,7 @@ export { default as Public } from './public';
export { default as Randomize } from './randomize'; export { default as Randomize } from './randomize';
export { default as Reset } from './reset'; export { default as Reset } from './reset';
export { default as Restart } from './restart'; export { default as Restart } from './restart';
export { default as Script } from './script';
export { default as Services } from './services'; export { default as Services } from './services';
export { default as Start } from './start'; export { default as Start } from './start';
export { default as Stop } from './stop'; export { default as Stop } from './stop';

75
packages/icons/src/instance-type.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,75 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="15"
height="18"
viewBox="0 0 15 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="16.67"
height="20"
viewBox="0 0 16.67 20"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1106 1522)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<g> d="M12.83,8v6h-9V8h9m0-1h-9a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h9a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1Zm-7,5.5v-3a.5.5,0,0,0-.5-.5h0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h0A.5.5,0,0,0,5.83,12.5Zm2,0v-3a.5.5,0,0,0-.5-.5h0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h0A.5.5,0,0,0,7.83,12.5Zm2,0v-3a.5.5,0,0,0-.5-.5h0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h0A.5.5,0,0,0,9.83,12.5Zm2,0v-3a.5.5,0,0,0-.5-.5h0a.5.5,0,0,0-.5.5v3a.5.5,0,0,0,.5.5h0A.5.5,0,0,0,11.83,12.5Zm3.73-8.06L12.22,1.11,11.11,0h-10A1.11,1.11,0,0,0,0,1.11V18.89A1.11,1.11,0,0,0,1.11,20H15.56a1.11,1.11,0,0,0,1.11-1.11V5.56ZM14.83,5h-3V2Zm-13,13V2h9V6h4V18Z"
<use />
xlinkHref={`#${ids[0]}`}
transform="translate(1108 -1516)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1110 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1112 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1114 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1116 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1106 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 10 1L 10 7L 1 7L 1 1L 10 1ZM 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 7C 0 7.5 0.4 8 1 8L 10 8C 10.5 8 11 7.6 11 7L 11 1C 11 0.4 10.6 0 10 0Z"
/>
<path
id={ids[1]}
d="M 0.5 4C 0.2 4 0 3.8 0 3.5L 0 0.5C 0 0.2 0.2 0 0.5 0C 0.8 0 1 0.2 1 0.5L 1 3.5C 1 3.8 0.8 4 0.5 4Z"
/>
<path
id={ids[2]}
d="M 14 4L 11 1L 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 17C 0 17.5 0.4 18 1 18L 14 18C 14.5 18 15 17.6 15 17L 15 5L 14 4ZM 12.6 4L 11 4L 11 2.4L 12.6 4ZM 1 17L 1 1L 10 1L 10 5L 14 5L 14 17L 1 17Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

43
packages/icons/src/login.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,43 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="18"
height="19"
viewBox="0 0 18 19"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1885 179)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<g> d="M16,2V17H5V12H3v5a2.16,2.16,0,0,0,2,2H16a2.15,2.15,0,0,0,2-2V2a2.15,2.15,0,0,0-2-2H5A2.05,2.05,0,0,0,3,2V7L5,7V2m8.74,7.32-.51-.44L8.77,5l-.71.61L12,9H0v1H12L8.06,13.38l.71.62L14,9.5Z"
<use />
xlinkHref={`#${ids[0]}`}
transform="translate(1889 -179)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1885 -175)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12 1.00001L 12 16L 1 16L 1 11L 0 11L 0 16C 0 16.6 0.4 17 1 17L 12 17C 12.6 17 13 16.6 13 16L 13 1.00001C 13 0.400006 12.6 6.10352e-06 12 6.10352e-06L 1 6.10352e-06C 0.4 6.10352e-06 0 0.400006 0 1.00001L 0 6.00001L 1 6.00001L 1 1.00001L 12 1.00001Z"
/>
<path
id={ids[1]}
d="M 13.7 4.29999L 13.2 3.9L 8.7 6.10352e-06L 8 0.599997L 11.9 4.00001L 0 4.00001L 0 5.00001L 11.9 5.00001L 8 8.4L 8.7 9.00001L 13.9 4.50001L 13.7 4.29999Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

4
packages/icons/src/memory.js
View File

@ -15,12 +15,10 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="21.68" width="21.68"
height="21.68" height="21.68"
viewBox="0 0 21.68 21.68" viewBox="0 0 21.68 21.68"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
> >
<path <path
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}

60
packages/icons/src/metadata.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,55 +15,22 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="18"
height="11"
viewBox="0 0 18 11"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="17.04"
height="11"
viewBox="0 0 17.04 11"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1884 1236)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<g> d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
<g> />
<use <path
xlinkHref={`#${ids[0]}`} fill={calcFill({ fill, disabled, light, colors })}
transform="translate(1884 -1233.9)" d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
fill={calcFill({ fill, disabled, light, colors })} />
/> <polygon points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11" />
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1896 -1233.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1891 -1236)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
/>
<path
id={ids[1]}
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
/>
<path id={ids[2]} d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" />
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

10
packages/icons/src/name.js
View File

@ -15,18 +15,16 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
viewBox="0 0 16.24 13.55"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="21.48"
width="17" height="21.91"
height="17" viewBox="0 0 21.48 21.91"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<path <path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill={calcFill({ fill, disabled, light, colors })} fill={calcFill({ fill, disabled, light, colors })}
d="M20.91,12.51a.76.76,0,0,0-1.17-.16l-.91.77.42-2.19c.12-.59-.51-1.24-1.1-.85L13.83,13c.11-.71.22-1.42.32-2.13a.75.75,0,0,0-1.37-.58l-4.31,6.4Q9.88,12,11.28,7.36c.51-1.69,2.81-6.23.05-7.23C8.87-.76,6.15,3.21,4.93,4.8A29.09,29.09,0,0,0,0,14.9a.75.75,0,0,0,1.45.4A28,28,0,0,1,4.65,7.85,28.22,28.22,0,0,1,7.11,4.48C7.7,3.8,11,.1,11,3.23a23.53,23.53,0,0,1-1.28,4.2c-.42,1.41-.85,2.81-1.27,4.21Q7,16.32,5.59,21A.75.75,0,0,0,7,21.57l5.24-7.78-.08.52c-.09.59.5,1.25,1.1.85l4.24-2.82c-.17.84-.33,1.68-.49,2.52a.76.76,0,0,0,1.25.73l1.72-1.45a2.59,2.59,0,0,1-.21,1.75c-.33.91,1.12,1.3,1.45.4A4.4,4.4,0,0,0,20.91,12.51Z"
/> />
</svg> </svg>
)} )}

30
packages/icons/src/network.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,30 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="18"
height="18"
viewBox="0 0 18 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="19.78"
height="19.78"
viewBox="0 0 19.78 19.78"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1105 710)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<use d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
xlinkHref={`#${ids[0]}`} />
transform="translate(1105 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

30
packages/icons/src/package.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,30 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="17"
height="18"
viewBox="0 0 17 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="19"
height="20.12"
viewBox="0 0 19 20.12"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1885 710)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<use d="M14.45,2.79h0L9.5,0,0,5.36v9.39l9.5,5.37L19,14.75V5.36ZM16,5.86,9.5,9.51,6.44,7.79l6.47-3.66Zm-4.08-2.3L5.43,7.21h0L3,5.86,9.5,2.21ZM2,6.44H2L5,8.12v1.94l1,1V8.68l3,1.7v7.25L2,13.68Zm15,0v7.24l-7,3.95V10.38l7-4Z"
xlinkHref={`#${ids[0]}`} />
transform="translate(1885 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12.9 2.5L 8.5 0L 0 4.79999L 0 13.2L 8.5 18L 17 13.2L 17 4.79999L 12.9 2.5ZM 15 4.79999L 8.5 8.5L 5.4 6.79999L 11.9 3.10001L 15 4.79999ZM 10.9 2.5L 4.4 6.10001L 2 4.79999L 8.5 1.10001L 10.9 2.5ZM 1 5.39999L 4 7.10001L 4 9L 5 10L 5 7.60001L 8 9.29999L 8 16.6L 1 12.6L 1 5.39999ZM 16 5.39999L 16 12.6L 9 16.6L 9 9.29999L 16 5.39999Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

2
packages/icons/src/private.js
View File

@ -16,9 +16,9 @@ export default ({
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 16"
width="12" width="12"
height="16" height="16"
viewBox="0 0 12 16"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >

10
packages/icons/src/public.js
View File

@ -21,12 +21,10 @@ export default ({
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g> <path
<path fill={calcFill({ fill, disabled, light, colors })}
fill={calcFill({ fill, disabled, light, colors })} d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
/>
</g>
</svg> </svg>
)} )}
</Rotate> </Rotate>

4
packages/icons/src/randomize.js
View File

@ -19,8 +19,8 @@ export default ({
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
width="17" width="18.22"
height="17" height="18.22"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >

49
packages/icons/src/restart.js
View File

@ -1,23 +1,32 @@
import React from 'react'; import React from 'react';
export default props => ( import Rotate from './rotate';
<svg import calcFill from './fill';
width="16"
height="19" export default ({
viewBox="0 0 16 19" fill = null,
version="1.1" light = false,
xmlns="http://www.w3.org/2000/svg" disabled = false,
{...props} direction = 'down',
> colors = {},
<path style = {},
{...props} ...rest
style={{ }) => (
transform: 'rotate(30deg) translateX(1px) translateY(-1px)', <Rotate direction={direction}>
transformOrigin: '50%' {({ style: rotateStyle }) => (
}} <svg
fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg"
transform width="12.46"
d="M 6.67853 4.42272L 6.67879 6.61018L 12.4032 3.30519L 6.67874 0L 6.67829 2.4743C 2.88206 3.15051 -0.000481996 6.46786 6.04528e-08 10.4594C -1.2363e-05 14.9384 3.63041 18.5685 8.10965 18.5692C 12.588 18.5682 16.2192 14.9381 16.2192 10.4592L 14.3115 10.46C 14.3108 13.8839 11.535 16.6615 8.10976 16.6612C 4.68462 16.6608 1.90795 13.8842 1.90764 10.4586C 1.90797 7.52657 3.94309 5.06834 6.67853 4.42272Z" height="14.46"
/> viewBox="0 0 12.46 14.46"
</svg> style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M8,3.1,7.11,4.63h5.35L9.78,0l-1,1.73a6.56,6.56,0,1,0,3.46,9.45l-1.34-.77A5,5,0,1,1,8,3.1Z"
/>
</svg>
)}
</Rotate>
); );

32
packages/icons/src/script.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="15.43"
height="18"
viewBox="0 0 15.43 18"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M15.09,13.64,12.29,6h.14a3,3,0,0,0,0-6H3A3,3,0,0,0,0,3a3.37,3.37,0,0,0,.09.71,6.85,6.85,0,0,0,.25.64l3,7.68L3,12a3,3,0,0,0,0,6h9.43a2.94,2.94,0,0,0,3-3.43A7.54,7.54,0,0,0,15.09,13.64ZM12.43,1.46a1.54,1.54,0,1,1,0,3.08,1.52,1.52,0,0,1-1.27-.67l-.24-.6a1.24,1.24,0,0,1,0-.27A1.54,1.54,0,0,1,12.43,1.46ZM2,3.74l-.21-.52a.78.78,0,0,1,0-.22A1.29,1.29,0,0,1,3,1.71H9.73A3,3,0,0,0,9.43,3a2.76,2.76,0,0,0,.09.71L9.63,4c0,.09.77,2,.77,2l2.33,6-.3,0H5.36L2.88,6ZM9.73,16.29H3a1.29,1.29,0,0,1,0-2.58H9.73a2.92,2.92,0,0,0,0,2.58Zm2.7.25A1.54,1.54,0,1,1,14,15,1.54,1.54,0,0,1,12.43,16.54Z"
/>
</svg>
)}
</Rotate>
);

11
packages/icons/src/services.js
View File

@ -21,13 +21,10 @@ export default ({
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g data-name="Layer 2"> <path
<path fill={calcFill({ fill, disabled, light, colors })}
fill={calcFill({ fill, disabled, light, colors })} d="M6,5V4h5V5Zm5,2V6H6V7Zm0,2V8H6V9Zm2-7H4v9h9V2m1-2a1,1,0,0,1,1,1V12a1,1,0,0,1-1,1H2V1A1,1,0,0,1,3,0Zm0,14H1V2H0V14a1,1,0,0,0,1,1H14Z"
d="M6 5V4h5v1zm5 2V6H6v1zm0 2V8H6v1zm2-7H4v9h9V2m1-2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2V1a1 1 0 0 1 1-1zm0 14H1V2H0v12a1 1 0 0 0 1 1h13z" />
data-name="Layer 1"
/>
</g>
</svg> </svg>
)} )}
</Rotate> </Rotate>

49
packages/icons/src/start.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,47 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="15" xmlns="http://www.w3.org/2000/svg"
height="15" width="13.36"
version="1.1" height="14"
xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 13.36 14"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(18292 -19563)"> <path
<mask id={ids[0]}> fill={calcFill({ fill, disabled, light, colors })}
<rect d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
fill="#fff" />
x={-1}
y={-1}
width={15}
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
<use
xlinkHref={`#${ids[1]}`}
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
</mask>
<g mask={`url(#${ids[0]}`}>
<use
xlinkHref={`#${ids[2]}`}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[1]}
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
/>
<path
id={ids[2]}
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

39
packages/icons/src/stop.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,43 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="14" width="14"
height="14" height="14"
viewBox="0 0 14 14" viewBox="0 0 14 14"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(18113 -18582)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<mask id={ids[0]}> d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
<use />
xlinkHref={`#${ids[1]}`}
fill="white"
transform="translate(-18113 18582)"
/>
</mask>
<g mask={`url(#${ids[0]})`}>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(-18113 18582)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[1]}
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
/>
<path
id={ids[2]}
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

6
packages/icons/src/storage.js
View File

@ -15,10 +15,10 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="22"
height="22"
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="22"
height="20"
viewBox="0 0 22 20"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >

45
packages/icons/src/tags.js
View File

@ -1,11 +1,8 @@
import React from 'react'; import React from 'react';
import rndId from 'rnd-id';
import Rotate from './rotate'; import Rotate from './rotate';
import calcFill from './fill'; import calcFill from './fill';
const ids = [rndId(), rndId(), rndId()];
export default ({ export default ({
fill = null, fill = null,
light = false, light = false,
@ -18,45 +15,17 @@ export default ({
<Rotate direction={direction}> <Rotate direction={direction}>
{({ style: rotateStyle }) => ( {({ style: rotateStyle }) => (
<svg <svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="19"
height="19"
viewBox="0 0 19 19"
style={{ ...style, ...rotateStyle }} style={{ ...style, ...rotateStyle }}
{...rest} {...rest}
> >
<g transform="translate(-1885 974)"> <path
<g> fill={calcFill({ fill, disabled, light, colors })}
<g> d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
<g> />
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1885 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1888 -971)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
/>
<path
id={ids[1]}
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
/>
</defs>
</svg> </svg>
)} )}
</Rotate> </Rotate>

3
packages/my-joy-beta/package.json
View File

@ -24,7 +24,8 @@
"constant-case": "^2.0.0", "constant-case": "^2.0.0",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
"declarative-redux-form": "^2.0.8", "declarative-redux-form": "^2.0.8",
"joyent-ui-toolkit": "^4.4.1", "joyent-manifest-editor": "1.4.0",
"joyent-ui-toolkit": "^4.5.0",
"lodash.find": "^4.6.0", "lodash.find": "^4.6.0",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"lodash.isstring": "^4.0.1", "lodash.isstring": "^4.0.1",

1
packages/my-joy-beta/public/index.html
View File

@ -15,6 +15,5 @@
</noscript> </noscript>
<div id="header"></div> <div id="header"></div>
<div id="root"></div> <div id="root"></div>
<script type="text/javascript" src="/nav-static/main.js"></script>
</body> </body>
</html> </html>

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

@ -360,7 +360,7 @@ exports[`renders <Rule/> without throwing 1`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -394,7 +394,7 @@ exports[`renders <Rule/> without throwing 1`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -428,7 +428,7 @@ exports[`renders <Rule/> without throwing 1`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -460,7 +460,7 @@ exports[`renders <Rule/> without throwing 1`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -501,7 +501,7 @@ exports[`renders <Rule/> without throwing 1`] = `
<input <input
className="c9" className="c9"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={null} onBlur={null}
placeholder="Example instance name: nginx" placeholder="Example instance name: nginx"
required={true} required={true}
@ -833,7 +833,7 @@ exports[`renders <Rule/> without throwing 2`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -867,7 +867,7 @@ exports[`renders <Rule/> without throwing 2`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -901,7 +901,7 @@ exports[`renders <Rule/> without throwing 2`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -933,7 +933,7 @@ exports[`renders <Rule/> without throwing 2`] = `
<select <select
className="c5 c6" className="c5 c6"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={undefined} onBlur={undefined}
> >
<option <option
@ -974,7 +974,7 @@ exports[`renders <Rule/> without throwing 2`] = `
<input <input
className="c9" className="c9"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={null} onBlur={null}
placeholder="Example instance name: nginx" placeholder="Example instance name: nginx"
required={true} required={true}

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

@ -83,6 +83,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -236,14 +237,14 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
> >
<label <label
className="c2" className="c2"
htmlFor="Y" htmlFor="k"
> >
Attach to new CNS service name Attach to new CNS service name
</label> </label>
<input <input
className="c3" className="c3"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
placeholder="Example: mySQLdb" placeholder="Example: mySQLdb"
/> />
@ -347,6 +348,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -522,14 +524,14 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
> >
<label <label
className="c2" className="c2"
htmlFor="Z" htmlFor="l"
> >
Attach to new CNS service name Attach to new CNS service name
</label> </label>
<input <input
className="c3" className="c3"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={null} onBlur={null}
placeholder="Example: mySQLdb" placeholder="Example: mySQLdb"
/> />
@ -663,6 +665,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -671,6 +674,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
.c6 { .c6 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;

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

@ -106,6 +106,7 @@ exports[`renders <Images /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -319,7 +320,7 @@ exports[`renders <Images /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="Y" htmlFor="k"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -329,20 +330,20 @@ exports[`renders <Images /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="Y" id="k"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="Y" htmlFor="k"
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="Y" htmlFor="k"
id="Y" id="k"
onBlur={null} onBlur={null}
> >
@ -476,6 +477,7 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -689,7 +691,7 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="a" htmlFor="m"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -699,20 +701,20 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="a" id="m"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="a" htmlFor="m"
id="a" id="m"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="a" htmlFor="m"
id="a" id="m"
onBlur={null} onBlur={null}
> >
@ -846,6 +848,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1059,7 +1062,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="Z" htmlFor="l"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -1069,20 +1072,20 @@ exports[`renders <Images expanded /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="Z" id="l"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="Z" htmlFor="l"
id="Z" id="l"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="Z" htmlFor="l"
id="Z" id="l"
onBlur={null} onBlur={null}
> >
@ -1231,6 +1234,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1613,7 +1617,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
> >
<label <label
className="c3" className="c3"
htmlFor="bc" htmlFor="o"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -1623,20 +1627,20 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="bc" id="o"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="bc" htmlFor="o"
id="bc" id="o"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="bc" htmlFor="o"
id="bc" id="o"
onBlur={null} onBlur={null}
> >
@ -1686,7 +1690,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
<select <select
className="c11 c13 c14" className="c11 c13 c14"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={null} onBlur={null}
> >
<option <option
@ -1821,6 +1825,7 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2034,7 +2039,7 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bf" htmlFor="r"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -2044,20 +2049,20 @@ exports[`renders <Images isVmSelected /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="bf" id="r"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="bf" htmlFor="r"
id="bf" id="r"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="bf" htmlFor="r"
id="bf" id="r"
onBlur={null} onBlur={null}
> >
@ -2191,6 +2196,7 @@ exports[`renders <Images loading /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2404,7 +2410,7 @@ exports[`renders <Images loading /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="be" htmlFor="q"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -2414,20 +2420,20 @@ exports[`renders <Images loading /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="be" id="q"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="be" htmlFor="q"
id="be" id="q"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="be" htmlFor="q"
id="be" id="q"
onBlur={null} onBlur={null}
> >
@ -2561,6 +2567,7 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2774,7 +2781,7 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bb" htmlFor="n"
> >
Infrastructure Container Infrastructure Container
</label> </label>
@ -2784,20 +2791,20 @@ exports[`renders <Images pristine={false} /> without throwing 1`] = `
<input <input
checked={undefined} checked={undefined}
className="c5" className="c5"
id="bb" id="n"
onBlur={null} onBlur={null}
type="checkbox" type="checkbox"
/> />
<label <label
className="c6" className="c6"
htmlFor="bb" htmlFor="n"
id="bb" id="n"
onBlur={null} onBlur={null}
/> />
<label <label
className="c3" className="c3"
htmlFor="bb" htmlFor="n"
id="bb" id="n"
onBlur={null} onBlur={null}
> >

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

File diff suppressed because it is too large Load Diff

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

@ -111,6 +111,7 @@ exports[`renders <Network /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -558,7 +559,7 @@ exports[`renders <Network /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -566,13 +567,13 @@ exports[`renders <Network /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="a" htmlFor="m"
/> />
</div> </div>
</li> </li>
@ -661,22 +662,14 @@ exports[`renders <Network /> without throwing 1`] = `
className="c19" className="c19"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -995,22 +988,14 @@ exports[`renders <Network /> without throwing 2`] = `
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -1152,6 +1137,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -1599,7 +1585,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -1607,13 +1593,13 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bc" htmlFor="o"
/> />
</div> </div>
</li> </li>
@ -1713,22 +1699,14 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
className="c21" className="c21"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -2049,22 +2027,14 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -2206,6 +2176,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2653,7 +2624,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -2661,13 +2632,13 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="be" htmlFor="q"
/> />
</div> </div>
</li> </li>
@ -2767,22 +2738,14 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
className="c21" className="c21"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -3103,22 +3066,14 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -3269,6 +3224,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -3846,7 +3802,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -3854,13 +3810,13 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bi" htmlFor="u"
/> />
</div> </div>
</li> </li>
@ -3960,19 +3916,10 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
className="c21" className="c21"
> >
<svg <svg
className="" height="16.2"
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.2 16.2" viewBox="0 0 16.2 16.2"
width="17" width="16.2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z" d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
@ -4037,14 +3984,13 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -4354,19 +4300,10 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
className="c12" className="c12"
> >
<svg <svg
className="" height="16.2"
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.2 16.2" viewBox="0 0 16.2 16.2"
width="17" width="16.2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z" d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
@ -4548,6 +4485,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -5110,7 +5048,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bj" id="v"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -5118,13 +5056,13 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bk" htmlFor="w"
/> />
</div> </div>
</li> </li>
@ -5224,19 +5162,10 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
className="c21" className="c21"
> >
<svg <svg
className="" height="16.2"
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.2 16.2" viewBox="0 0 16.2 16.2"
width="17" width="16.2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z" d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
@ -5301,14 +5230,13 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -5334,14 +5262,14 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
> >
<label <label
className="c27" className="c27"
htmlFor="bl" htmlFor="x"
> >
ID ID
</label> </label>
<input <input
className="c28" className="c28"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={null} onBlur={null}
value="1" value="1"
/> />
@ -5358,14 +5286,14 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
> >
<label <label
className="c27" className="c27"
htmlFor="bm" htmlFor="y"
> >
Subnet Subnet
</label> </label>
<input <input
className="c28" className="c28"
disabled={false} disabled={false}
id="bm" id="y"
onBlur={null} onBlur={null}
value="255.255.255.0" value="255.255.255.0"
/> />
@ -5382,14 +5310,14 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
> >
<label <label
className="c27" className="c27"
htmlFor="bn" htmlFor="z"
> >
IP range IP range
</label> </label>
<input <input
className="c28" className="c28"
disabled={false} disabled={false}
id="bn" id="z"
onBlur={null} onBlur={null}
value="192.168.1.2 - 192.168.1.253" value="192.168.1.2 - 192.168.1.253"
/> />
@ -5703,19 +5631,10 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
className="c12" className="c12"
> >
<svg <svg
className="" height="16.2"
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.2 16.2" viewBox="0 0 16.2 16.2"
width="17" width="16.2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z" d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
@ -5861,6 +5780,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -6308,7 +6228,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -6316,13 +6236,13 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bg" htmlFor="s"
/> />
</div> </div>
</li> </li>
@ -6386,12 +6306,10 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
viewBox="0 0 12 16" viewBox="0 0 12 16"
width="12" width="12"
> >
<g> <path
<path d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
/>
</g>
</svg> </svg>
</div> </div>
</div> </div>
@ -6423,22 +6341,14 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
className="c21" className="c21"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -6723,12 +6633,10 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
viewBox="0 0 12 16" viewBox="0 0 12 16"
width="12" width="12"
> >
<g> <path
<path d="M6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Zm4-7V4A4,4,0,0,0,2,4H4c0-1.65.35-2,2-2s2,.35,2,2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6Zm0,7a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1Z"
d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
/>
</g>
</svg> </svg>
</div> </div>
</div> </div>
@ -6760,22 +6668,14 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>

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

@ -111,6 +111,7 @@ exports[`renders <Filters /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -189,6 +190,7 @@ exports[`renders <Filters /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -394,7 +396,7 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c5" className="c5"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -402,20 +404,20 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c7" className="c7"
htmlFor="bb" htmlFor="n"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
> >
<label <label
@ -425,14 +427,7 @@ exports[`renders <Filters /> without throwing 1`] = `
className="c10" className="c10"
> >
<svg <svg
className=""
height="24" height="24"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="24" width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -466,7 +461,7 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c5" className="c5"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -474,20 +469,20 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c7" className="c7"
htmlFor="bd" htmlFor="p"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={undefined} onBlur={undefined}
> >
<label <label
@ -497,14 +492,7 @@ exports[`renders <Filters /> without throwing 1`] = `
className="c10" className="c10"
> >
<svg <svg
className=""
height="21.68" height="21.68"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 21.68 21.68" viewBox="0 0 21.68 21.68"
width="21.68" width="21.68"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -538,7 +526,7 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c5" className="c5"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -546,20 +534,20 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c7" className="c7"
htmlFor="bf" htmlFor="r"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
> >
<label <label
@ -569,14 +557,7 @@ exports[`renders <Filters /> without throwing 1`] = `
className="c10" className="c10"
> >
<svg <svg
className=""
height="20" height="20"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 20 20" viewBox="0 0 20 20"
width="20" width="20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -610,7 +591,7 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c5" className="c5"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -618,20 +599,20 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c7" className="c7"
htmlFor="bh" htmlFor="t"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={undefined} onBlur={undefined}
> >
<label <label
@ -642,14 +623,14 @@ exports[`renders <Filters /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="22" height="20"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 22 22" viewBox="0 0 22 20"
width="22" width="22"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
@ -682,7 +663,7 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c5" className="c5"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -690,20 +671,20 @@ exports[`renders <Filters /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bj" id="v"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c7" className="c7"
htmlFor="bj" htmlFor="v"
/> />
</div> </div>
<div <div
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={undefined} onBlur={undefined}
> >
<label <label
@ -884,6 +865,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1129,6 +1111,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1245,6 +1228,7 @@ exports[`renders <Package /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -1453,7 +1437,7 @@ exports[`renders <Package /> without throwing 1`] = `
<div <div
className="c4" className="c4"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
type="radio" type="radio"
> >
@ -1461,19 +1445,19 @@ exports[`renders <Package /> without throwing 1`] = `
checked={undefined} checked={undefined}
className="c5" className="c5"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={null} onBlur={null}
type="radio" type="radio"
/> />
<label <label
className="c6" className="c6"
htmlFor="Z" htmlFor="l"
/> />
</div> </div>
<div <div
className="c7" className="c7"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
> >
<div <div
@ -1623,6 +1607,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1871,14 +1856,13 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2069,6 +2053,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2317,14 +2302,13 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2515,6 +2499,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2763,14 +2748,13 @@ exports[`renders <Packages loading /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2922,6 +2906,7 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3123,14 +3108,13 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -3294,6 +3278,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3542,14 +3527,13 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>

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

@ -3,6 +3,7 @@
exports[`renders <Title /> without throwing 1`] = ` exports[`renders <Title /> without throwing 1`] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -127,6 +128,7 @@ exports[`renders <Title /> without throwing 1`] = `
exports[`renders <Title icon="NameIcon"/> without throwing 1`] = ` exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -234,21 +236,19 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="17" height="21.91"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 21.48 21.91"
viewBox="0 0 16.24 13.55" width="21.48"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" d="M20.91,12.51a.76.76,0,0,0-1.17-.16l-.91.77.42-2.19c.12-.59-.51-1.24-1.1-.85L13.83,13c.11-.71.22-1.42.32-2.13a.75.75,0,0,0-1.37-.58l-4.31,6.4Q9.88,12,11.28,7.36c.51-1.69,2.81-6.23.05-7.23C8.87-.76,6.15,3.21,4.93,4.8A29.09,29.09,0,0,0,0,14.9a.75.75,0,0,0,1.45.4A28,28,0,0,1,4.65,7.85,28.22,28.22,0,0,1,7.11,4.48C7.7,3.8,11,.1,11,3.23a23.53,23.53,0,0,1-1.28,4.2c-.42,1.41-.85,2.81-1.27,4.21Q7,16.32,5.59,21A.75.75,0,0,0,7,21.57l5.24-7.78-.08.52c-.09.59.5,1.25,1.1.85l4.24-2.82c-.17.84-.33,1.68-.49,2.52a.76.76,0,0,0,1.25.73l1.72-1.45a2.59,2.59,0,0,1-.21,1.75c-.33.91,1.12,1.3,1.45.4A4.4,4.4,0,0,0,20.91,12.51Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
/> />
</svg> </svg>
@ -272,6 +272,7 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = ` exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -380,21 +381,19 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
> >
<svg <svg
className="" className=""
height="17" height="21.91"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 21.48 21.91"
viewBox="0 0 16.24 13.55" width="21.48"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z" d="M20.91,12.51a.76.76,0,0,0-1.17-.16l-.91.77.42-2.19c.12-.59-.51-1.24-1.1-.85L13.83,13c.11-.71.22-1.42.32-2.13a.75.75,0,0,0-1.37-.58l-4.31,6.4Q9.88,12,11.28,7.36c.51-1.69,2.81-6.23.05-7.23C8.87-.76,6.15,3.21,4.93,4.8A29.09,29.09,0,0,0,0,14.9a.75.75,0,0,0,1.45.4A28,28,0,0,1,4.65,7.85,28.22,28.22,0,0,1,7.11,4.48C7.7,3.8,11,.1,11,3.23a23.53,23.53,0,0,1-1.28,4.2c-.42,1.41-.85,2.81-1.27,4.21Q7,16.32,5.59,21A.75.75,0,0,0,7,21.57l5.24-7.78-.08.52c-.09.59.5,1.25,1.1.85l4.24-2.82c-.17.84-.33,1.68-.49,2.52a.76.76,0,0,0,1.25.73l1.72-1.45a2.59,2.59,0,0,1-.21,1.75c-.33.91,1.12,1.3,1.45.4A4.4,4.4,0,0,0,20.91,12.51Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
/> />
</svg> </svg>
@ -418,6 +417,7 @@ exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`]
exports[`renders <Title label="Test"/> without throwing 1`] = ` exports[`renders <Title label="Test"/> without throwing 1`] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;

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

@ -13,8 +13,6 @@ import {
RandomizeIcon RandomizeIcon
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import Description from '@components/create-instance/description';
export default ({ export default ({
handleSubmit, handleSubmit,
pristine, pristine,
@ -24,9 +22,6 @@ export default ({
onRandomize onRandomize
}) => ( }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Description>
Your instance name will be used to identify this specific instance.
</Description>
<Flex> <Flex>
<FlexItem> <FlexItem>
<FormGroup name="name" fluid field={Field}> <FormGroup name="name" fluid field={Field}>

312
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
View File

@ -166,6 +166,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -254,6 +255,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -343,6 +345,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -831,7 +834,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Y" htmlFor="k"
> >
Metadata Metadata
key key
@ -839,7 +842,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
@ -861,7 +864,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Z" htmlFor="l"
> >
Metadata Metadata
value value
@ -869,7 +872,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={null} onBlur={null}
/> />
<label <label
@ -919,40 +922,24 @@ exports[`renders <KeyValue /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -1321,6 +1308,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1409,6 +1397,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1498,6 +1487,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1986,7 +1976,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="a" htmlFor="m"
> >
Metadata Metadata
key key
@ -1994,7 +1984,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="a" id="m"
onBlur={null} onBlur={null}
/> />
<label <label
@ -2016,7 +2006,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bb" htmlFor="n"
> >
Metadata Metadata
value value
@ -2024,7 +2014,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={null} onBlur={null}
/> />
<label <label
@ -2074,40 +2064,24 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -2249,6 +2223,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2337,6 +2312,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2426,6 +2402,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2985,7 +2962,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bc" htmlFor="o"
> >
Metadata Metadata
key key
@ -2993,7 +2970,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={null} onBlur={null}
/> />
<label <label
@ -3020,7 +2997,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bd" htmlFor="p"
> >
Metadata Metadata
value value
@ -3028,7 +3005,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -3082,40 +3059,24 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -3291,6 +3252,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3379,6 +3341,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3468,6 +3431,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3956,7 +3920,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bg" htmlFor="s"
> >
Metadata Metadata
key key
@ -3964,7 +3928,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={null} onBlur={null}
/> />
<label <label
@ -3986,7 +3950,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bh" htmlFor="t"
> >
Metadata Metadata
value value
@ -3994,7 +3958,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4044,40 +4008,24 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -4253,6 +4201,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4341,6 +4290,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4430,6 +4380,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4910,7 +4861,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bi" htmlFor="u"
> >
Metadata Metadata
key key
@ -4918,7 +4869,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4940,7 +4891,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bj" htmlFor="v"
> >
Metadata Metadata
value value
@ -4948,7 +4899,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bj" id="v"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4998,40 +4949,24 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -5260,6 +5195,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5348,6 +5284,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5437,6 +5374,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5947,7 +5885,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bk" htmlFor="w"
> >
Metadata Metadata
key key
@ -5955,7 +5893,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={null} onBlur={null}
/> />
<label <label
@ -5977,7 +5915,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bl" htmlFor="x"
> >
Metadata Metadata
value value
@ -5985,7 +5923,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={null} onBlur={null}
/> />
<label <label
@ -6290,6 +6228,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6379,6 +6318,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6527,6 +6467,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -7014,7 +6955,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bm" htmlFor="y"
> >
Metadata Metadata
key key
@ -7022,7 +6963,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={true} disabled={true}
id="bm" id="y"
onBlur={null} onBlur={null}
/> />
<label <label
@ -7044,7 +6985,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bn" htmlFor="z"
> >
Metadata Metadata
value value
@ -7052,7 +6993,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={true} disabled={true}
id="bn" id="z"
onBlur={null} onBlur={null}
/> />
<label <label
@ -7129,40 +7070,24 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(216, 216, 216)"
<g> />
<use
fill="rgb(216, 216, 216)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -7338,6 +7263,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -7426,6 +7352,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -7515,6 +7442,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -8003,7 +7931,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="be" htmlFor="q"
> >
Tag Tag
key key
@ -8011,7 +7939,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="be" id="q"
onBlur={null} onBlur={null}
/> />
<label <label
@ -8033,7 +7961,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bf" htmlFor="r"
> >
Tag Tag
value value
@ -8041,7 +7969,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={null} onBlur={null}
/> />
<label <label
@ -8091,40 +8019,24 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>

208
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -428,7 +429,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -437,14 +438,14 @@ exports[`renders <InstanceList /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bi" htmlFor="u"
/> />
</div> </div>
</li> </li>
@ -471,14 +472,13 @@ exports[`renders <InstanceList /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -540,6 +540,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -961,7 +962,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
checked={true} checked={true}
className="c8" className="c8"
disabled={false} disabled={false}
id="bt" id="F"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -970,14 +971,14 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
checked={true} checked={true}
className="c9" className="c9"
disabled={false} disabled={false}
id="bu" id="G"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bu" htmlFor="G"
/> />
</div> </div>
</li> </li>
@ -1004,14 +1005,13 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -1073,6 +1073,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -1494,7 +1495,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -1503,14 +1504,14 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bl" htmlFor="x"
/> />
</div> </div>
</li> </li>
@ -1548,14 +1549,13 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -1606,6 +1606,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2027,7 +2028,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bn" id="z"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -2036,14 +2037,14 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bo" id="A"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bo" htmlFor="A"
/> />
</div> </div>
</li> </li>
@ -2081,14 +2082,13 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2139,6 +2139,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2560,7 +2561,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={true} disabled={true}
id="bq" id="C"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -2569,14 +2570,14 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={true} disabled={true}
id="br" id="D"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="br" htmlFor="D"
/> />
</div> </div>
</li> </li>
@ -2603,14 +2604,13 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2672,6 +2672,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -3093,7 +3094,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bw" id="I"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -3102,14 +3103,14 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bx" id="J"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bx" htmlFor="J"
/> />
</div> </div>
</li> </li>
@ -3136,14 +3137,13 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -3206,6 +3206,7 @@ exports[`renders <Item /> without throwing 1`] = `
.c12 { .c12 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c9 { .c9 {
@ -3214,6 +3215,7 @@ exports[`renders <Item /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -3571,7 +3573,7 @@ exports[`renders <Item /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -3579,13 +3581,13 @@ exports[`renders <Item /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="Z" htmlFor="l"
/> />
</div> </div>
</li> </li>
@ -3665,29 +3667,8 @@ exports[`renders <Item /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</div> </div>
@ -3701,6 +3682,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c12 { .c12 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c9 { .c9 {
@ -3709,6 +3691,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -4066,7 +4049,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -4074,13 +4057,13 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bf" htmlFor="r"
/> />
</div> </div>
</li> </li>
@ -4162,29 +4145,8 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</div> </div>
@ -4198,6 +4160,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
.c12 { .c12 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c9 { .c9 {
@ -4206,6 +4169,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -4563,7 +4527,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -4571,13 +4535,13 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bd" htmlFor="p"
/> />
</div> </div>
</li> </li>
@ -4657,29 +4621,8 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</div> </div>
@ -4693,6 +4636,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
.c12 { .c12 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c9 { .c9 {
@ -4701,6 +4645,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -5081,7 +5026,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -5089,13 +5034,13 @@ exports[`renders <Item mutating /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bb" htmlFor="n"
/> />
</div> </div>
</li> </li>
@ -5187,29 +5132,8 @@ exports[`renders <Item mutating /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgb(216, 216, 216)" fill="rgb(216, 216, 216)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgb(216, 216, 216)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgb(216, 216, 216)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</td> </td>

86
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -132,6 +132,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -220,6 +221,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -309,6 +311,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -878,7 +881,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Y" htmlFor="k"
> >
Metadata Metadata
key key
@ -886,7 +889,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
@ -913,7 +916,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Z" htmlFor="l"
> >
Metadata Metadata
value value
@ -921,7 +924,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -975,40 +978,24 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -1164,6 +1151,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1252,6 +1240,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1341,6 +1330,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1912,7 +1902,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="a" htmlFor="m"
> >
Metadata Metadata
key key
@ -1920,7 +1910,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="a" id="m"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1947,7 +1937,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bb" htmlFor="n"
> >
Metadata Metadata
value value
@ -1955,7 +1945,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -2009,40 +1999,24 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>

144
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`renders <Actions /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -389,7 +390,7 @@ exports[`renders <Actions /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -398,14 +399,14 @@ exports[`renders <Actions /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bi" id="u"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bi" htmlFor="u"
/> />
</div> </div>
</li> </li>
@ -432,14 +433,13 @@ exports[`renders <Actions /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -500,6 +500,7 @@ exports[`renders <Item /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -790,7 +791,7 @@ exports[`renders <Item /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -798,13 +799,13 @@ exports[`renders <Item /> without throwing 1`] = `
checked={false} checked={false}
className="c7" className="c7"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c8" className="c8"
htmlFor="a" htmlFor="m"
/> />
</div> </div>
</li> </li>
@ -875,29 +876,8 @@ exports[`renders <Item /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</div> </div>
@ -912,6 +892,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -1202,7 +1183,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
checked={false} checked={false}
className="c6" className="c6"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -1210,13 +1191,13 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
checked={false} checked={false}
className="c7" className="c7"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c8" className="c8"
htmlFor="bc" htmlFor="o"
/> />
</div> </div>
</li> </li>
@ -1289,29 +1270,8 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.375rem)",
}
}
/>
<path
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="rgba(73, 73, 73, 1)"
fill-rule="evenodd"
style={
Object {
"transform": "translateY(0.75rem)",
}
}
/> />
</svg> </svg>
</div> </div>
@ -1525,6 +1485,7 @@ exports[`renders <SnapshotList /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -1907,7 +1868,7 @@ exports[`renders <SnapshotList /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -1916,14 +1877,14 @@ exports[`renders <SnapshotList /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bf" htmlFor="r"
/> />
</div> </div>
</li> </li>
@ -1950,14 +1911,13 @@ exports[`renders <SnapshotList /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2018,6 +1978,7 @@ exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2400,7 +2361,7 @@ exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
checked={true} checked={true}
className="c8" className="c8"
disabled={false} disabled={false}
id="bt" id="F"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -2409,14 +2370,14 @@ exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
checked={true} checked={true}
className="c9" className="c9"
disabled={false} disabled={false}
id="bu" id="G"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bu" htmlFor="G"
/> />
</div> </div>
</li> </li>
@ -2443,14 +2404,13 @@ exports[`renders <SnapshotList allSelected /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -2511,6 +2471,7 @@ exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2893,7 +2854,7 @@ exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -2902,14 +2863,14 @@ exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bl" htmlFor="x"
/> />
</div> </div>
</li> </li>
@ -2947,14 +2908,13 @@ exports[`renders <SnapshotList sortBy /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -3004,6 +2964,7 @@ exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -3386,7 +3347,7 @@ exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="bn" id="z"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -3395,14 +3356,14 @@ exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bo" id="A"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bo" htmlFor="A"
/> />
</div> </div>
</li> </li>
@ -3440,14 +3401,13 @@ exports[`renders <SnapshotList sortBy sortOrder /> without throwing 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>
@ -3497,6 +3457,7 @@ exports[`renders <SnapshotList submitting /> without throwing 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -3879,7 +3840,7 @@ exports[`renders <SnapshotList submitting /> without throwing 1`] = `
checked={false} checked={false}
className="c8" className="c8"
disabled={true} disabled={true}
id="bq" id="C"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@ -3888,14 +3849,14 @@ exports[`renders <SnapshotList submitting /> without throwing 1`] = `
checked={false} checked={false}
className="c9" className="c9"
disabled={true} disabled={true}
id="br" id="D"
onBlur={undefined} onBlur={undefined}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="br" htmlFor="D"
/> />
</div> </div>
</li> </li>
@ -3922,14 +3883,13 @@ exports[`renders <SnapshotList submitting /> without throwing 1`] = `
"transform": "rotate(180deg)", "transform": "rotate(180deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</th> </th>

2772
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

86
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -64,6 +64,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -152,6 +153,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -241,6 +243,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -860,7 +863,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Y" htmlFor="k"
> >
Tag Tag
key key
@ -868,7 +871,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
@ -890,7 +893,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="Z" htmlFor="l"
> >
Tag Tag
value value
@ -898,7 +901,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={null} onBlur={null}
/> />
<label <label
@ -948,40 +951,24 @@ exports[`renders <AddForm /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -1060,6 +1047,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1148,6 +1136,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1237,6 +1226,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1848,7 +1838,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="a" htmlFor="m"
> >
Tag Tag
key key
@ -1856,7 +1846,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="a" id="m"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1878,7 +1868,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<label <label
className="c11" className="c11"
htmlFor="bb" htmlFor="n"
> >
Tag Tag
value value
@ -1886,7 +1876,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1936,40 +1926,24 @@ exports[`renders <EditForm /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>

73
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
View File

@ -55,6 +55,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -323,14 +324,14 @@ exports[`renders <Toolbar /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="Y" htmlFor="k"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -346,7 +347,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="a" htmlFor="m"
> >
⁣ ⁣
</label> </label>
@ -420,6 +421,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -688,14 +690,14 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bk" htmlFor="w"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -711,7 +713,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bm" htmlFor="y"
> >
⁣ ⁣
</label> </label>
@ -785,6 +787,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1075,14 +1078,14 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bn" htmlFor="z"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="bn" id="z"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -1098,7 +1101,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bp" htmlFor="B"
> >
⁣ ⁣
</label> </label>
@ -1172,6 +1175,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1440,14 +1444,14 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bq" htmlFor="C"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="bq" id="C"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -1463,7 +1467,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bs" htmlFor="E"
> >
⁣ ⁣
</label> </label>
@ -1537,6 +1541,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1805,14 +1810,14 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bb" htmlFor="n"
> >
Search label Search label
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -1828,7 +1833,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bd" htmlFor="p"
> >
⁣ ⁣
</label> </label>
@ -1902,6 +1907,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2170,14 +2176,14 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="be" htmlFor="q"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
placeholder="Search placeholder" placeholder="Search placeholder"
/> />
@ -2193,7 +2199,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bg" htmlFor="s"
> >
⁣ ⁣
</label> </label>
@ -2267,6 +2273,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2287,11 +2294,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-radius: 0.25rem; border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
@ -2330,23 +2332,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
pointer-events: none; pointer-events: none;
} }
.c7:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c7:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c7 svg + span { .c7 svg + span {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -2572,14 +2557,14 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bh" htmlFor="t"
> >
Filter Filter
</label> </label>
<input <input
className="c4" className="c4"
disabled={true} disabled={true}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
placeholder="" placeholder=""
/> />
@ -2595,13 +2580,13 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
> >
<label <label
className="c3" className="c3"
htmlFor="bj" htmlFor="v"
> >
⁣ ⁣
</label> </label>
<button <button
className="c7 c8 c9" className="c7 c8 c9"
disabled={true} disabled={false}
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}

142
packages/my-joy-beta/src/components/instances/key-value.js
View File

@ -8,7 +8,8 @@ import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import titleCase from 'title-case'; import titleCase from 'title-case';
import Flex, { FlexItem } from 'styled-flex-component'; import Flex, { FlexItem } from 'styled-flex-component';
// import Editor from 'joyent-ui-toolkit/dist/es/editor';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { import {
Message, Message,
@ -50,70 +51,73 @@ class ValueTextareaField extends PureComponent {
const { input = {}, submitting } = this.props; const { input = {}, submitting } = this.props;
return input.value === 'user-script' ? ( return input.value === 'user-script' ? (
<Field name="value" component="textarea" /> <Field
name="value"
component={props => <Editor {...props} mode="sh" />}
/>
) : ( ) : (
<Textarea resize="vertical" disabled={submitting} fluid /> <Textarea resize="vertical" disabled={submitting} fluid />
); );
} }
} }
const TextareaKeyValue = ({ type, submitting }) => [ const TextareaKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<Row key="key"> <Fragment>
<Col xs={12}> {!onlyValue ? (
<FormGroup name="name" field={Field} fluid> <Row>
<FormLabel>{titleCase(type)} key</FormLabel> <Col xs={12}>
<Input onBlur={null} type="text" disabled={submitting} /> <FormGroup name="name" field={Field} fluid>
<FormMeta /> <FormLabel>{titleCase(type)} key</FormLabel>
</FormGroup> <Input onBlur={null} type="text" disabled={submitting} />
<Divider height={remcalc(12)} transparent /> <FormMeta />
</Col> </FormGroup>
</Row>, <Divider height={remcalc(12)} transparent />
<Row key="value"> </Col>
<Col xs={12}> </Row>
<FormGroup name="value" field={Field} fluid> ) : null}
<FormLabel>{titleCase(type)} value</FormLabel> {!onlyName ? (
<Field <Row>
name="name" <Col xs={12}>
fluid <FormGroup name="value" field={Field} fluid>
component={ValueTextareaField} <FormLabel>{titleCase(type)} value</FormLabel>
props={{ submitting }} <Field
/> name="name"
<FormMeta /> fluid
</FormGroup> component={ValueTextareaField}
<Divider height={remcalc(12)} transparent /> props={{ submitting }}
</Col> />
</Row> <FormMeta />
]; </FormGroup>
<Divider height={remcalc(12)} transparent />
const InputKeyValue = ({ type, submitting }) => ( </Col>
<Flex justifyStart contentStretch> </Row>
<FlexItem basis="auto"> ) : null}
<FormGroup name="name" field={Field} fluid> </Fragment>
<FormLabel>{titleCase(type)} key</FormLabel>
<Input onBlur={null} type="text" disabled={submitting} />
<FormMeta />
</FormGroup>
</FlexItem>
<FlexItem basis={remcalc(12)} />
<FlexItem basis="auto">
<FormGroup name="value" field={Field} fluid>
<FormLabel>{titleCase(type)} value</FormLabel>
<Input onBlur={null} disabled={submitting} />
<FormMeta />
</FormGroup>
</FlexItem>
</Flex>
); );
const InputName = ({ type, submitting }) => ( const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
<Flex justifyStart contentStretch> <Flex justifyStart contentStretch>
<FlexItem basis="auto"> {!onlyValue ? (
<FormGroup name="name" field={Field} fluid> <FlexItem basis="auto">
<FormLabel>{titleCase(type)} Name</FormLabel> <FormGroup name="name" field={Field} fluid>
<Input onBlur={null} type="text" disabled={submitting} /> <FormLabel>{titleCase(type)} key</FormLabel>
<FormMeta /> <Input onBlur={null} type="text" disabled={submitting} />
</FormGroup> <FormMeta />
</FlexItem> </FormGroup>
</FlexItem>
) : null}
{!onlyName ? (
<Fragment>
<FlexItem basis={remcalc(12)} />
<FlexItem basis="auto">
<FormGroup name="value" field={Field} fluid>
<FormLabel>{titleCase(type)} value</FormLabel>
<Input onBlur={null} disabled={submitting} />
<FormMeta />
</FormGroup>
</FlexItem>
</Fragment>
) : null}
</Flex> </Flex>
); );
@ -133,6 +137,7 @@ export const KeyValue = ({
onRemove = () => null, onRemove = () => null,
theme = {}, theme = {},
onlyName = false, onlyName = false,
onlyValue = false,
noRemove = false, noRemove = false,
customHeader customHeader
}) => { }) => {
@ -182,18 +187,21 @@ export const KeyValue = ({
</Row> </Row>
) : null} ) : null}
{input === 'input' ? ( {input === 'input' ? (
onlyName ? ( <InputKeyValue
<InputName onBlur={null} type={type} submitting={submitting} /> onBlur={null}
) : ( type={type}
<InputKeyValue submitting={submitting}
onBlur={null} onlyName={onlyName}
type={type} onlyValue={onlyValue}
submitting={submitting} />
/>
)
) : null} ) : null}
{input === 'textarea' ? ( {input === 'textarea' ? (
<TextareaKeyValue type={type} submitting={submitting} /> <TextareaKeyValue
type={type}
submitting={submitting}
onlyName={onlyName}
onlyValue={onlyValue}
/>
) : null} ) : null}
{input !== 'textarea' && input !== 'input' {input !== 'textarea' && input !== 'input'
? input(submitting) ? input(submitting)
@ -235,7 +243,7 @@ export const KeyValue = ({
disabled={submitting} disabled={submitting}
fill={submitting ? undefined : theme.red} fill={submitting ? undefined : theme.red}
/> />
<span>Delete</span> <span>Remove</span>
</Button> </Button>
</Col> </Col>
)} )}

2
packages/my-joy-beta/src/components/instances/toolbar.js
View File

@ -32,7 +32,7 @@ export const Toolbar = ({
<FormLabel>&#8291;</FormLabel> <FormLabel>&#8291;</FormLabel>
<Button <Button
type={onActionClick ? 'button' : 'submit'} type={onActionClick ? 'button' : 'submit'}
disabled={!searchable || !actionable} disabled={!actionable}
onClick={onActionClick} onClick={onActionClick}
icon icon
fluid fluid

1
packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap
View File

@ -10,6 +10,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
.c6 { .c6 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c5 { .c5 {

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

@ -4,6 +4,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -119,57 +120,21 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 17.04 11"
viewBox="0 0 18 11" width="17.04"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1884 1236)" d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g> <path
<g> d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
<use fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
transform="translate(1884 -1233.9)" <polygon
xlinkHref="#F" points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
/> />
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1896 -1233.9)"
xlinkHref="#G"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1891 -1236)"
xlinkHref="#H"
/>
</g>
</g>
</g>
<defs>
<path
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
id="F"
/>
<path
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
id="G"
/>
<path
d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
id="H"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -196,6 +161,7 @@ exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -311,57 +277,21 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 17.04 11"
viewBox="0 0 18 11" width="17.04"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1884 1236)" d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g> <path
<g> d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
<use fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
transform="translate(1884 -1233.9)" <polygon
xlinkHref="#F" points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
/> />
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1896 -1233.9)"
xlinkHref="#G"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1891 -1236)"
xlinkHref="#H"
/>
</g>
</g>
</g>
<defs>
<path
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
id="F"
/>
<path
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
id="G"
/>
<path
d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
id="H"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -542,6 +472,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -630,6 +561,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -719,6 +651,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1353,7 +1286,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bg" htmlFor="s"
> >
Metadata Metadata
key key
@ -1361,7 +1294,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bg" id="s"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1388,7 +1321,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bh" htmlFor="t"
> >
Metadata Metadata
value value
@ -1396,7 +1329,7 @@ Array [
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -1450,40 +1383,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -1550,6 +1467,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1637,6 +1555,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1718,6 +1637,7 @@ exports[`renders <Metadata expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -1833,57 +1753,21 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 17.04 11"
viewBox="0 0 18 11" width="17.04"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1884 1236)" d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g> <path
<g> d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
<use fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
transform="translate(1884 -1233.9)" <polygon
xlinkHref="#F" points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
/> />
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1896 -1233.9)"
xlinkHref="#G"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1891 -1236)"
xlinkHref="#H"
/>
</g>
</g>
</g>
<defs>
<path
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
id="F"
/>
<path
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
id="G"
/>
<path
d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
id="H"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -2052,6 +1936,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2139,6 +2024,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2220,6 +2106,7 @@ exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -2335,57 +2222,21 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 17.04 11"
viewBox="0 0 18 11" width="17.04"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1884 1236)" d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g> <path
<g> d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
<use fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
transform="translate(1884 -1233.9)" <polygon
xlinkHref="#F" points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
/> />
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1896 -1233.9)"
xlinkHref="#G"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1891 -1236)"
xlinkHref="#H"
/>
</g>
</g>
</g>
<defs>
<path
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
id="F"
/>
<path
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
id="G"
/>
<path
d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
id="H"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -2470,6 +2321,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2558,6 +2410,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2647,6 +2500,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3299,7 +3153,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="Y" htmlFor="k"
> >
Metadata Metadata
key key
@ -3307,7 +3161,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
@ -3334,7 +3188,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="Z" htmlFor="l"
> >
Metadata Metadata
value value
@ -3342,7 +3196,7 @@ Array [
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -3396,40 +3250,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -3508,6 +3346,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3596,6 +3435,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3685,6 +3525,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4337,7 +4178,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="a" htmlFor="m"
> >
Metadata Metadata
key key
@ -4345,7 +4186,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="a" id="m"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4372,7 +4213,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bb" htmlFor="n"
> >
Metadata Metadata
value value
@ -4380,7 +4221,7 @@ Array [
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -4434,40 +4275,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -4488,6 +4313,7 @@ exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -4603,57 +4429,21 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 17.04 11"
viewBox="0 0 18 11" width="17.04"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1884 1236)" d="M5.41,9,.24,5.93a.51.51,0,0,1,0-.86L5.41,2V3.45a.5.5,0,0,1-.25.44L2.39,5.5,5.17,7.19a.5.5,0,0,1,.24.43Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g> <path
<g> d="M11.63,9l5.16-3.07a.5.5,0,0,0,0-.86L11.63,2V3.45a.52.52,0,0,0,.25.44L14.65,5.5,11.87,7.19a.5.5,0,0,0-.24.43Z"
<use fill="rgba(73, 73, 73, 1)"
fill="rgba(73, 73, 73, 1)" />
transform="translate(1884 -1233.9)" <polygon
xlinkHref="#F" points="7.52 11 6.52 11 9.52 0 10.52 0 7.52 11"
/> />
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1896 -1233.9)"
xlinkHref="#G"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1891 -1236)"
xlinkHref="#H"
/>
</g>
</g>
</g>
<defs>
<path
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
id="F"
/>
<path
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
id="G"
/>
<path
d="M 1 11L 0 11L 3 0L 4 0L 1 11Z"
id="H"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -4834,6 +4624,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4922,6 +4713,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5011,6 +4803,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5663,7 +5456,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bc" htmlFor="o"
> >
Metadata Metadata
key key
@ -5671,7 +5464,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="bc" id="o"
onBlur={null} onBlur={null}
/> />
<label <label
@ -5698,7 +5491,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bd" htmlFor="p"
> >
Metadata Metadata
value value
@ -5706,7 +5499,7 @@ Array [
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bd" id="p"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -5760,40 +5553,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -5872,6 +5649,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5960,6 +5738,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6049,6 +5828,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6701,7 +6481,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="be" htmlFor="q"
> >
Metadata Metadata
key key
@ -6709,7 +6489,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="be" id="q"
onBlur={null} onBlur={null}
/> />
<label <label
@ -6736,7 +6516,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="bf" htmlFor="r"
> >
Metadata Metadata
value value
@ -6744,7 +6524,7 @@ Array [
<textarea <textarea
className="c15 c16" className="c15 c16"
disabled={false} disabled={false}
id="bf" id="r"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -6798,40 +6578,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -6898,6 +6662,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6985,6 +6750,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;

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

@ -4,6 +4,7 @@ exports[`renders <Networks /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -112,36 +113,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -175,6 +161,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -283,36 +270,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -345,6 +317,7 @@ exports[`renders <Networks loading expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -453,36 +426,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -768,6 +726,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -862,6 +821,7 @@ exports[`renders <Networks networks=[] /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -970,36 +930,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -1313,22 +1258,14 @@ Array [
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -1368,6 +1305,7 @@ exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -1476,36 +1414,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -1626,6 +1549,7 @@ Array [
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -2504,7 +2428,7 @@ Array [
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -2512,13 +2436,13 @@ Array [
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="Z" htmlFor="l"
/> />
</div> </div>
</li> </li>
@ -2618,19 +2542,10 @@ Array [
className="c21" className="c21"
> >
<svg <svg
className="" height="16.2"
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.2 16.2" viewBox="0 0 16.2 16.2"
width="17" width="16.2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<path <path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z" d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
@ -2695,14 +2610,13 @@ Array [
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -2752,7 +2666,7 @@ Array [
checked={false} checked={false}
className="c8" className="c8"
disabled={false} disabled={false}
id="a" id="m"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
> >
@ -2760,13 +2674,13 @@ Array [
checked={false} checked={false}
className="c9" className="c9"
disabled={false} disabled={false}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
type="checkbox" type="checkbox"
/> />
<label <label
className="c10" className="c10"
htmlFor="bb" htmlFor="n"
/> />
</div> </div>
</li> </li>
@ -2866,22 +2780,14 @@ Array [
className="c21" className="c21"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -2960,6 +2866,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3032,6 +2939,7 @@ exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -3140,36 +3048,21 @@ Array [
> >
<svg <svg
className="" className=""
height="18" height="19.78"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19.78 19.78"
viewBox="0 0 18 18" width="19.78"
width="18"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1105 710)" d="M16.48,6.59a3.22,3.22,0,0,0-1.9.62l-2-2a3.22,3.22,0,0,0,.62-1.9,3.3,3.3,0,1,0-6.6,0,3.22,3.22,0,0,0,.62,1.9l-2,2a3.22,3.22,0,0,0-1.9-.62,3.3,3.3,0,0,0,0,6.6,3.22,3.22,0,0,0,1.9-.62l2,2a3.22,3.22,0,0,0-.62,1.9,3.3,3.3,0,1,0,6.6,0,3.22,3.22,0,0,0-.62-1.9l2-2a3.22,3.22,0,0,0,1.9.62,3.3,3.3,0,1,0,0-6.6Zm-6.59,6.3a3,3,0,0,0-1.73.56L6.33,11.62a3,3,0,0,0,0-3.46L8.16,6.33a3,3,0,0,0,3.46,0l1.83,1.83a3,3,0,0,0,0,3.46l-1.83,1.83A3,3,0,0,0,9.89,12.89Zm0-11.39A1.89,1.89,0,1,1,8,3.39,1.89,1.89,0,0,1,9.89,1.5ZM1.34,9.89a2,2,0,1,1,2,2A2,2,0,0,1,1.34,9.89Zm8.55,8.39a1.89,1.89,0,1,1,1.89-1.89A1.89,1.89,0,0,1,9.89,18.28Zm6.39-6.39a2,2,0,1,1,2-2A2,2,0,0,1,16.28,11.89Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -710)"
xlinkHref="#I"
/>
</g>
</g>
<defs>
<path
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
id="I"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -3512,22 +3405,14 @@ Array [
className="c12" className="c12"
> >
<svg <svg
className=""
height="13" height="13"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
viewBox="0 0 9 13" viewBox="0 0 9 13"
width="9" width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" d="M0,0V13H9V0ZM7,11H2V2H7ZM3,4H6V3H3ZM3,6H6V5H3ZM3,8H6V7H3Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -3607,6 +3492,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;

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

@ -4,6 +4,7 @@ exports[`renders <Tags /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -112,51 +113,21 @@ Array [
> >
<svg <svg
className="" className=""
height="17" height="19"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19 19"
viewBox="0 0 17 17" width="19"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1885 974)" d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1885 -974)"
xlinkHref="#R"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1888 -971)"
xlinkHref="#S"
/>
</g>
</g>
</g>
<defs>
<path
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
id="R"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="S"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -183,6 +154,7 @@ exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -291,51 +263,21 @@ Array [
> >
<svg <svg
className="" className=""
height="17" height="19"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19 19"
viewBox="0 0 17 17" width="19"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1885 974)" d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1885 -974)"
xlinkHref="#R"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1888 -971)"
xlinkHref="#S"
/>
</g>
</g>
</g>
<defs>
<path
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
id="R"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="S"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -528,6 +470,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -616,6 +559,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -705,6 +649,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1333,7 +1278,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="Y" htmlFor="k"
> >
Tag Tag
key key
@ -1341,7 +1286,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1363,7 +1308,7 @@ Array [
> >
<label <label
className="c11" className="c11"
htmlFor="Z" htmlFor="l"
> >
Tag Tag
value value
@ -1371,7 +1316,7 @@ Array [
<input <input
className="c12" className="c12"
disabled={false} disabled={false}
id="Z" id="l"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1421,40 +1366,24 @@ Array [
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -1521,6 +1450,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1608,6 +1538,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1689,6 +1620,7 @@ exports[`renders <Tags expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -1797,51 +1729,21 @@ Array [
> >
<svg <svg
className="" className=""
height="17" height="19"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19 19"
viewBox="0 0 17 17" width="19"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1885 974)" d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1885 -974)"
xlinkHref="#R"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1888 -971)"
xlinkHref="#S"
/>
</g>
</g>
</g>
<defs>
<path
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
id="R"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="S"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -2034,6 +1936,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2121,6 +2024,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2202,6 +2106,7 @@ exports[`renders <Tags metadata=[] /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -2310,51 +2215,21 @@ Array [
> >
<svg <svg
className="" className=""
height="17" height="19"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19 19"
viewBox="0 0 17 17" width="19"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1885 974)" d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1885 -974)"
xlinkHref="#R"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1888 -971)"
xlinkHref="#S"
/>
</g>
</g>
</g>
<defs>
<path
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
id="R"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="S"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -2381,6 +2256,7 @@ exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
Array [ Array [
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;
@ -2489,51 +2365,21 @@ Array [
> >
<svg <svg
className="" className=""
height="17" height="19"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 19 19"
viewBox="0 0 17 17" width="19"
width="17"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(-1885 974)" d="M18.61,9.3,9.69.39A1.29,1.29,0,0,0,8.76,0H1.32A1.33,1.33,0,0,0,0,1.33V8.76a1.33,1.33,0,0,0,.39.94L9.3,18.61a1.33,1.33,0,0,0,.94.39,1.3,1.3,0,0,0,.93-.39l7.44-7.44A1.32,1.32,0,0,0,18.61,9.3Zm-1.68,1-6.65,6.65a.17.17,0,0,1-.12.05.14.14,0,0,1-.11-.05l-8-8a.18.18,0,0,1,0-.12V2.19A.17.17,0,0,1,2.18,2H8.84a.16.16,0,0,1,.11,0l8,8a.15.15,0,0,1,.05.11A.17.17,0,0,1,16.93,10.28ZM6.61,4.06A2.55,2.55,0,1,0,9.16,6.61,2.55,2.55,0,0,0,6.61,4.06Zm0,4.08A1.53,1.53,0,1,1,8.14,6.61,1.54,1.54,0,0,1,6.61,8.14Z"
> fill="rgba(73, 73, 73, 1)"
<g> />
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1885 -974)"
xlinkHref="#R"
/>
</g>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1888 -971)"
xlinkHref="#S"
/>
</g>
</g>
</g>
<defs>
<path
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
id="R"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="S"
/>
</defs>
</svg> </svg>
</div> </div>
</div> </div>
@ -2726,6 +2572,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2813,6 +2660,7 @@ Array [
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;

7827
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap Normal file
View File

File diff suppressed because it is too large Load Diff

92
packages/my-joy-beta/src/containers/create-instance/__tests__/user-script.spec.js Normal file
View File

@ -0,0 +1,92 @@
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import Theme from '@mocks/theme';
import { UserScript } from '../user-script';
it('renders <UserScript /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript proceeded /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript proceeded />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript expanded /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript expanded />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript expanded create /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript expanded create />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript expanded create formOpen /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript expanded create formOpen />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript expanded edit formOpen /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript expanded edit formOpen />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <UserScript expanded edit formOpen script /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<UserScript expanded edit formOpen script={{ value: 'hey' }}/>
</Theme>
)
.toJSON()
).toMatchSnapshot();
});

26
packages/my-joy-beta/src/containers/create-instance/index.js
View File

@ -20,6 +20,7 @@ import Image from '@containers/create-instance/image';
import Package from '@containers/create-instance/package'; import Package from '@containers/create-instance/package';
import Tags from '@containers/create-instance/tags'; import Tags from '@containers/create-instance/tags';
import Metadata from '@containers/create-instance/metadata'; import Metadata from '@containers/create-instance/metadata';
import UserScript from '@containers/create-instance/user-script';
import Networks from '@containers/create-instance/networks'; import Networks from '@containers/create-instance/networks';
import Firewall from '@containers/create-instance/firewall'; import Firewall from '@containers/create-instance/firewall';
import CNS from '@containers/create-instance/cns'; import CNS from '@containers/create-instance/cns';
@ -53,6 +54,13 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
expanded={step === 'metadata'} expanded={step === 'metadata'}
/> />
</Margin> </Margin>
<Margin bottom={4}>
<UserScript
history={history}
match={match}
expanded={step === 'user-script'}
/>
</Margin>
<Margin bottom={4}> <Margin bottom={4}>
<Networks <Networks
history={history} history={history}
@ -93,13 +101,15 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
export default compose( export default compose(
graphql(CreateInstanceMutation, { name: 'createInstance' }), graphql(CreateInstanceMutation, { name: 'createInstance' }),
connect(({ form, values }, { step }) => { connect(({ form, values }, { match }) => {
const step = get(match, 'params.step', 'name');
const disabled = ['name', 'image', 'package', 'networks'].some( const disabled = ['name', 'image', 'package', 'networks'].some(
step => !get(values, `create-instance-${step}-proceeded`, false) step => !get(values, `create-instance-${step}-proceeded`, false)
); );
if (disabled) { if (disabled) {
return { disabled }; return { disabled, step };
} }
const name = get( const name = get(
@ -133,6 +143,7 @@ export default compose(
const affinity = get(values, 'create-instance-affinity', []); const affinity = get(values, 'create-instance-affinity', []);
const cns = get(values, 'create-instance-cns-enabled', true); const cns = get(values, 'create-instance-cns-enabled', true);
const cnsServices = get(values, 'create-instance-cns-services', null); const cnsServices = get(values, 'create-instance-cns-services', null);
const userScript = get(values, 'create-instance-user-script', {});
const tags = receivedTags.map(a => omit(a, 'expanded')); const tags = receivedTags.map(a => omit(a, 'expanded'));
@ -149,10 +160,12 @@ export default compose(
image, image,
affinity, affinity,
metadata, metadata,
userScript,
tags, tags,
firewall_enabled, firewall_enabled,
networks, networks,
disabled disabled,
step
}; };
}), }),
connect(null, (dispatch, ownProps) => { connect(null, (dispatch, ownProps) => {
@ -162,6 +175,7 @@ export default compose(
image, image,
affinity, affinity,
metadata, metadata,
userScript,
tags, tags,
firewall_enabled, firewall_enabled,
networks, networks,
@ -207,12 +221,16 @@ export default compose(
}; };
}); });
const _name = name.toLowerCase();
const _metadata = metadata.map(a => omit(a, 'expanded')); const _metadata = metadata.map(a => omit(a, 'expanded'));
const _tags = uniqBy(tags, 'name'); const _tags = uniqBy(tags, 'name');
const _networks = Object.keys(networks).filter( const _networks = Object.keys(networks).filter(
network => networks[network] network => networks[network]
); );
const _name = name.toLowerCase();
if (userScript && userScript.value) {
_metadata.push({ name: 'user-script', value: userScript.value });
}
const [err, res] = await intercept( const [err, res] = await intercept(
createInstance({ createInstance({

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

@ -137,7 +137,7 @@ export default compose(
set({ name: 'create-instance-metadata-proceeded', value: true }) set({ name: 'create-instance-metadata-proceeded', value: true })
); );
return history.push(`/instances/~create/networks`); return history.push(`/instances/~create/user-scripts`);
}, },
handleEdit: () => { handleEdit: () => {
return history.push(`/instances/~create/metadata`); return history.push(`/instances/~create/metadata`);

6
packages/my-joy-beta/src/containers/create-instance/name.js
View File

@ -12,6 +12,7 @@ import punycode from 'punycode';
import { NameIcon, H3, Button } from 'joyent-ui-toolkit'; import { NameIcon, H3, Button } from 'joyent-ui-toolkit';
import Name from '@components/create-instance/name'; import Name from '@components/create-instance/name';
import Description from '@components/create-instance/description';
import Title from '@components/create-instance/title'; import Title from '@components/create-instance/title';
import GetInstance from '@graphql/get-instance-small.gql'; import GetInstance from '@graphql/get-instance-small.gql';
import GetRandomName from '@graphql/get-random-name.gql'; import GetRandomName from '@graphql/get-random-name.gql';
@ -35,6 +36,11 @@ const NameContainer = ({
<Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}> <Title onClick={!expanded && !name && handleEdit} icon={<NameIcon />}>
Instance name Instance name
</Title> </Title>
{expanded ? (
<Description>
Your instance name will be used to identify this specific instance.
</Description>
) : null}
<ReduxForm <ReduxForm
form={FORM_NAME} form={FORM_NAME}
destroyOnUnmount={false} destroyOnUnmount={false}

149
packages/my-joy-beta/src/containers/create-instance/user-script.js Normal file
View File

@ -0,0 +1,149 @@
import React, { Fragment } from 'react';
import { compose } from 'react-apollo';
import { set } from 'react-redux-values';
import ReduxForm from 'declarative-redux-form';
import { destroy } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import { connect } from 'react-redux';
import get from 'lodash.get';
import remcalc from 'remcalc';
import { ScriptIcon, Button, Divider } from 'joyent-ui-toolkit';
import KeyValue from '@components/instances/key-value';
import Description from '@components/create-instance/description';
import Title from '@components/create-instance/title';
const FORM_NAME = 'create-instance-user-script';
export const UserScript = ({
expanded,
proceeded,
create,
edit,
formOpen,
script = {},
handleChangeOpenForm,
handleSubmit,
handleRemove,
handleNext,
handleEdit
}) => (
<Fragment>
<Title onClick={!proceeded && handleEdit} icon={<ScriptIcon />}>
User Script
</Title>
{expanded ? (
<Description>
User script can be used to inject a custom boot script.
</Description>
) : null}
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
initialValues={script}
onSubmit={handleSubmit}
>
{props =>
!formOpen && create ? null : (
<KeyValue
{...props}
expanded={formOpen}
method={edit ? 'edit' : 'add'}
input="textarea"
type="user script"
onToggleExpanded={() => handleChangeOpenForm(!formOpen)}
onCancel={() => handleChangeOpenForm(false)}
onRemove={handleRemove}
onlyValue
/>
)
}
</ReduxForm>
<div>
{expanded ? (
<Margin top={formOpen || script.value ? 1 : 0} bottom={5}>
{script.value || formOpen ? null : (
<Button
type="button"
onClick={() => handleChangeOpenForm(true)}
secondary
>
Add User Script
</Button>
)}
{formOpen && create ? null : (
<Button type="submit" onClick={handleNext}>
Next
</Button>
)}
</Margin>
) : proceeded ? (
<Fragment>
<Button type="button" onClick={handleEdit} secondary>
Edit
</Button>
<Margin top={4}>
<Divider height={remcalc(1)} />
</Margin>
</Fragment>
) : null}
</div>
</Fragment>
);
export default compose(
connect(
({ values }, ownProps) => {
const script = get(values, 'create-instance-user-script', {
name: 'user-script'
});
const formOpen = get(values, 'create-instance-user-script-open', false);
const proceeded = get(
values,
'create-instance-user-script-proceeded',
false
);
return {
script,
proceeded,
create: !script.value,
edit: script.value,
formOpen
};
},
(dispatch, { history }) => ({
handleEdit: () => history.push(`/instances/~create/user-script`),
handleNext: () => {
dispatch(
set({ name: 'create-instance-user-script-proceeded', value: true })
);
return history.push(`/instances/~create/networks`);
},
handleChangeOpenForm: value => {
return dispatch([
set({ name: `create-instance-user-script-open`, value })
]);
},
handleSubmit: value => {
return dispatch([
set({ name: `create-instance-user-script`, value: { ...value } }),
set({ name: `create-instance-user-script-open`, value: false })
]);
},
handleRemove: () => {
return dispatch([
destroy(FORM_NAME),
set({
name: `create-instance-user-script`,
value: { name: 'user-script' }
}),
set({ name: `create-instance-user-script-open`, value: false })
]);
}
})
)
)(UserScript);

1172
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

179
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -59,6 +59,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -434,14 +435,14 @@ exports[`renders <Metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="Y" htmlFor="k"
> >
Filter metadata Filter metadata
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -457,7 +458,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="a" htmlFor="m"
> >
⁣ ⁣
</label> </label>
@ -586,6 +587,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -670,6 +672,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -758,6 +761,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -847,6 +851,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1682,14 +1687,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bh" htmlFor="t"
> >
Filter metadata Filter metadata
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -1705,7 +1710,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bj" htmlFor="v"
> >
⁣ ⁣
</label> </label>
@ -1790,7 +1795,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bk" htmlFor="w"
> >
Metadata Metadata
key key
@ -1798,7 +1803,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
<input <input
className="c25" className="c25"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1825,7 +1830,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bl" htmlFor="x"
> >
Metadata Metadata
value value
@ -1833,7 +1838,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
<textarea <textarea
className="c28 c29" className="c28 c29"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -1887,40 +1892,24 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -2026,6 +2015,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2453,14 +2443,14 @@ exports[`renders <Metadata error /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="be" htmlFor="q"
> >
Filter metadata Filter metadata
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -2476,7 +2466,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bg" htmlFor="s"
> >
⁣ ⁣
</label> </label>
@ -2532,7 +2522,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
</div> </div>
<svg <svg
className="c21 " className="c21 "
height="12" height="11.31"
innerRef={undefined} innerRef={undefined}
onClick={[Function]} onClick={[Function]}
style={ style={
@ -2540,14 +2530,13 @@ exports[`renders <Metadata error /> without throwing 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 12 12" viewBox="0 0 11.31 11.31"
width="12" width="11.31"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -2702,6 +2691,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3080,14 +3070,14 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bb" htmlFor="n"
> >
Filter metadata Filter metadata
</label> </label>
<input <input
className="c5" className="c5"
disabled={true} disabled={true}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -3103,7 +3093,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bd" htmlFor="p"
> >
⁣ ⁣
</label> </label>
@ -3300,6 +3290,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3384,6 +3375,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3472,6 +3464,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3561,6 +3554,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -3687,6 +3681,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4557,14 +4552,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bm" htmlFor="y"
> >
Filter metadata Filter metadata
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bm" id="y"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -4580,7 +4575,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bo" htmlFor="A"
> >
⁣ ⁣
</label> </label>
@ -4674,7 +4669,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bp" htmlFor="B"
> >
Metadata Metadata
key key
@ -4682,7 +4677,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<input <input
className="c27" className="c27"
disabled={false} disabled={false}
id="bp" id="B"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4709,7 +4704,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bq" htmlFor="C"
> >
Metadata Metadata
value value
@ -4717,7 +4712,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<textarea <textarea
className="c30 c31" className="c30 c31"
disabled={false} disabled={false}
id="bq" id="C"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -4771,40 +4766,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -4866,7 +4845,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="br" htmlFor="D"
> >
Metadata Metadata
key key
@ -4874,7 +4853,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<input <input
className="c27" className="c27"
disabled={false} disabled={false}
id="br" id="D"
onBlur={null} onBlur={null}
/> />
<label <label
@ -4901,7 +4880,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bs" htmlFor="E"
> >
Metadata Metadata
value value
@ -4909,7 +4888,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<textarea <textarea
className="c30 c31" className="c30 c31"
disabled={false} disabled={false}
id="bs" id="E"
onBlur={undefined} onBlur={undefined}
/> />
<label <label
@ -4963,40 +4942,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -5058,7 +5021,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bt" htmlFor="F"
> >
Metadata Metadata
key key
@ -5066,7 +5029,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<input <input
className="c27" className="c27"
disabled={false} disabled={false}
id="bt" id="F"
onBlur={null} onBlur={null}
/> />
<label <label
@ -5093,7 +5056,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bu" htmlFor="G"
> >
Metadata Metadata
value value
@ -5101,7 +5064,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
<textarea <textarea
className="c30 c31" className="c30 c31"
disabled={false} disabled={false}
id="bu" id="G"
onBlur={undefined} onBlur={undefined}
/> />
<label <label

1038
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

601
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -59,6 +59,7 @@ exports[`renders <Tags /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -447,14 +448,14 @@ exports[`renders <Tags /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="Y" htmlFor="k"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="Y" id="k"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -470,7 +471,7 @@ exports[`renders <Tags /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="a" htmlFor="m"
> >
⁣ ⁣
</label> </label>
@ -590,6 +591,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -674,6 +676,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -762,6 +765,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -851,6 +855,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -1693,14 +1698,14 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bh" htmlFor="t"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bh" id="t"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -1716,7 +1721,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bj" htmlFor="v"
> >
⁣ ⁣
</label> </label>
@ -1801,7 +1806,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bk" htmlFor="w"
> >
Tag Tag
key key
@ -1809,7 +1814,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="bk" id="w"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1831,7 +1836,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bl" htmlFor="x"
> >
Tag Tag
value value
@ -1839,7 +1844,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="bl" id="x"
onBlur={null} onBlur={null}
/> />
<label <label
@ -1889,40 +1894,24 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -2011,6 +2000,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2399,14 +2389,14 @@ exports[`renders <Tags editable /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="br" htmlFor="D"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="br" id="D"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -2422,7 +2412,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bt" htmlFor="F"
> >
⁣ ⁣
</label> </label>
@ -2523,112 +2513,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
display: inline-block; display: inline-block;
} }
.c8 {
box-sizing: border-box;
display: inline-block;
-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;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.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);
}
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8 svg + span {
margin-left: 0.75rem;
}
.c8 svg {
max-height: 1.125rem;
}
.c31 { .c31 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -2647,6 +2531,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2735,6 +2620,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2824,6 +2710,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -2932,6 +2819,113 @@ exports[`renders <Tags editing /> without throwing 1`] = `
max-height: 1.125rem; max-height: 1.125rem;
} }
.c8 {
box-sizing: border-box;
display: inline-block;
-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;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.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);
}
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8 svg + span {
margin-left: 0.75rem;
}
.c8 svg {
max-height: 1.125rem;
}
.c4 { .c4 {
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
@ -3660,14 +3654,14 @@ exports[`renders <Tags editing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bm" htmlFor="y"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bm" id="y"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -3683,7 +3677,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bo" htmlFor="A"
> >
⁣ ⁣
</label> </label>
@ -3773,7 +3767,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bp" htmlFor="B"
> >
Tag Tag
key key
@ -3781,7 +3775,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="bp" id="B"
onBlur={null} onBlur={null}
/> />
<label <label
@ -3803,7 +3797,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bq" htmlFor="C"
> >
Tag Tag
value value
@ -3811,7 +3805,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="bq" id="C"
onBlur={null} onBlur={null}
/> />
<label <label
@ -3861,40 +3855,24 @@ exports[`renders <Tags editing /> without throwing 1`] = `
> >
<svg <svg
className="" className=""
height="12" height="16"
innerRef={undefined} innerRef={undefined}
style={ style={
Object { Object {
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
version="1.1" viewBox="0 0 12 16"
viewBox="0 0 9 12" width="12"
width="9"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<g <path
transform="translate(17403 -18583)" d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
> fill="rgb(210, 67, 58)"
<g> />
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg> </svg>
<span> <span>
Delete Remove
</span> </span>
</button> </button>
</div> </div>
@ -4027,112 +4005,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
display: inline-block; display: inline-block;
} }
.c8 {
box-sizing: border-box;
display: inline-block;
-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;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.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);
}
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8 svg + span {
margin-left: 0.75rem;
}
.c8 svg {
max-height: 1.125rem;
}
.c31 { .c31 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -4151,6 +4023,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4239,6 +4112,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -4310,6 +4184,113 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
border-color: rgb(250,250,250); border-color: rgb(250,250,250);
} }
.c8 {
box-sizing: border-box;
display: inline-block;
-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;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.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);
}
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8 svg + span {
margin-left: 0.75rem;
}
.c8 svg {
max-height: 1.125rem;
}
.c34 { .c34 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -4328,6 +4309,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5186,14 +5168,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bu" htmlFor="G"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bu" id="G"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -5209,7 +5191,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bw" htmlFor="I"
> >
⁣ ⁣
</label> </label>
@ -5299,7 +5281,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bx" htmlFor="J"
> >
Tag Tag
key key
@ -5307,7 +5289,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="bx" id="J"
onBlur={null} onBlur={null}
/> />
<label <label
@ -5329,7 +5311,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="by" htmlFor="K"
> >
Tag Tag
value value
@ -5337,7 +5319,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
<input <input
className="c26" className="c26"
disabled={false} disabled={false}
id="by" id="K"
onBlur={null} onBlur={null}
/> />
<label <label
@ -5502,6 +5484,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -5890,14 +5873,14 @@ exports[`renders <Tags error /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="be" htmlFor="q"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="be" id="q"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -5913,7 +5896,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bg" htmlFor="s"
> >
⁣ ⁣
</label> </label>
@ -6101,6 +6084,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -6121,11 +6105,6 @@ exports[`renders <Tags loading /> without throwing 1`] = `
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-radius: 0.25rem; border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
@ -6164,23 +6143,6 @@ exports[`renders <Tags loading /> without throwing 1`] = `
pointer-events: none; pointer-events: none;
} }
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8 svg + span { .c8 svg + span {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -6479,14 +6441,14 @@ exports[`renders <Tags loading /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bb" htmlFor="n"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={true} disabled={true}
id="bb" id="n"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -6502,13 +6464,13 @@ exports[`renders <Tags loading /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bd" htmlFor="p"
> >
⁣ ⁣
</label> </label>
<button <button
className="c8 c9 c10" className="c8 c9 c10"
disabled={true} disabled={false}
href="" href=""
icon={true} icon={true}
onClick={[Function]} onClick={[Function]}
@ -6630,6 +6592,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -7054,14 +7017,14 @@ exports[`renders <Tags tags /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bz" htmlFor="L"
> >
Filter tags Filter tags
</label> </label>
<input <input
className="c5" className="c5"
disabled={false} disabled={false}
id="bz" id="L"
onBlur={undefined} onBlur={undefined}
placeholder="Search by name or value" placeholder="Search by name or value"
/> />
@ -7077,7 +7040,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
> >
<label <label
className="c4" className="c4"
htmlFor="bB" htmlFor="N"
> >
⁣ ⁣
</label> </label>

21
packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
View File

@ -153,14 +153,13 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -323,14 +322,13 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -352,14 +350,13 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>

57
packages/my-joy-beta/src/router.js
View File

@ -102,62 +102,7 @@ export default () => (
exact exact
component={() => <Redirect to="/instances/~create/name" />} component={() => <Redirect to="/instances/~create/name" />}
/> />
<Route <Route path="/instances/~create/:step" component={CreateInstance} />
path="/instances/~create/name"
exact
component={props => <CreateInstance {...props} step="name" />}
/>
<Route
path="/instances/~create/image"
exact
component={props => <CreateInstance {...props} step="image" />}
/>
<Route
path="/instances/~create/package"
exact
component={props => <CreateInstance {...props} step="package" />}
/>
<Route
path="/instances/~create/tags"
exact
component={props => <CreateInstance {...props} step="tags" />}
/>
<Route
path="/instances/~create/metadata"
exact
component={props => <CreateInstance {...props} step="metadata" />}
/>
<Route
path="/instances/~create/user-script"
exact
component={props => <CreateInstance {...props} step="user-script" />}
/>
<Route
path="/instances/~create/networks"
exact
component={props => <CreateInstance {...props} step="networks" />}
/>
<Route
path="/instances/~create/firewall"
exact
component={props => <CreateInstance {...props} step="firewall" />}
/>
<Route
path="/instances/~create/cns"
exact
component={props => <CreateInstance {...props} step="cns" />}
/>
<Route
path="/instances/~create/affinity"
exact
component={props => <CreateInstance {...props} step="affinity" />}
/>
<Route
path="/instances/~create/summary"
exact
component={props => <CreateInstance {...props} step="summary" />}
/>
<Route <Route
path="/instances/~resize/:instance" path="/instances/~resize/:instance"
exact exact

6
packages/navigation/package.json
View File

@ -4,7 +4,7 @@
"license": "MPL-2.0", "license": "MPL-2.0",
"main": "lib", "main": "lib",
"scripts": { "scripts": {
"dev": "PREACT=1 REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start", "dev": "PREACT=1 REACT_APP_GQL_PORT=4000 PORT=3000 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"build": "PREACT=1 NODE_ENV=production joyent-react-scripts build", "build": "PREACT=1 NODE_ENV=production joyent-react-scripts build",
"test": "NODE_ENV=test joyent-react-scripts test", "test": "NODE_ENV=test joyent-react-scripts test",
"test-ci": "npm run test", "test-ci": "npm run test",
@ -22,8 +22,8 @@
"emotion": "^8.0.12", "emotion": "^8.0.12",
"emotion-theming": "^8.0.12", "emotion-theming": "^8.0.12",
"graphql-tag": "^2.6.1", "graphql-tag": "^2.6.1",
"joyent-icons": "^3.0.0", "joyent-icons": "^4.0.0",
"joyent-ui-toolkit": "^4.4.2", "joyent-ui-toolkit": "^4.5.0",
"lodash.chunk": "^4.2.0", "lodash.chunk": "^4.2.0",
"outy": "^0.1.2", "outy": "^0.1.2",
"param-case": "^2.1.1", "param-case": "^2.1.1",

4
packages/ui-toolkit/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "joyent-ui-toolkit", "name": "joyent-ui-toolkit",
"version": "4.4.2", "version": "4.5.0",
"license": "MPL-2.0", "license": "MPL-2.0",
"repository": "github:yldio/joyent-portal", "repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js", "main": "dist/umd/index.js",
@ -22,7 +22,7 @@
"dependencies": { "dependencies": {
"camel-case": "^3.0.0", "camel-case": "^3.0.0",
"joy-react-broadcast": "^0.6.9", "joy-react-broadcast": "^0.6.9",
"joyent-icons": "^3.0.0", "joyent-icons": "^4.0.0",
"lodash.isboolean": "^3.0.3", "lodash.isboolean": "^3.0.3",
"lodash.isundefined": "^3.0.1", "lodash.isundefined": "^3.0.1",
"normalized-styled-components": "^1.0.17", "normalized-styled-components": "^1.0.17",

3
packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`Anchor Default Anchor 1`] = `
.c1 { .c1 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c0 { .c0 {
@ -27,6 +28,7 @@ exports[`Anchor Disabled Anchor 1`] = `
.c1 { .c1 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c0 { .c0 {
@ -58,6 +60,7 @@ exports[`Anchor Reversed Anchor 1`] = `
.c1 { .c1 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c0 { .c0 {

6
packages/ui-toolkit/src/anchor/index.js
View File

@ -1,10 +1,14 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { A } from 'normalized-styled-components'; import { A as BaseA } from 'normalized-styled-components';
import is, { isOr } from 'styled-is'; import is, { isOr } from 'styled-is';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Baseline from '../baseline/index.js'; import Baseline from '../baseline/index.js';
const A = BaseA.extend`
font-family: ${props => props.theme.font.families};
`;
const BaseLink = styled(({ component, children, ...rest }) => const BaseLink = styled(({ component, children, ...rest }) =>
React.createElement(component, rest, children) React.createElement(component, rest, children)
)` )`

5
packages/ui-toolkit/src/base/global.js
View File

@ -11,9 +11,7 @@ export default ({ theme }) => css`
html, body { html, body {
font-display: optional; font-display: optional;
font-family: ${ font-family: ${theme.font.families};
theme.font.family
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-weight: ${theme.font.weight.normal}; font-weight: ${theme.font.weight.normal};
} }
@ -49,5 +47,6 @@ export default ({ theme }) => css`
.CodeMirror { .CodeMirror {
border: solid 1px ${theme.grey}; border: solid 1px ${theme.grey};
margin: ${remcalc(8)} 0 ${remcalc(8)} 0; margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
font-family: "Roboto Mono", monospace !important;
} }
`; `;

35
packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
View File

@ -153,14 +153,13 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -182,14 +181,13 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -211,14 +209,13 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -240,14 +237,13 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -314,14 +310,13 @@ exports[`Breadcrumb Default Item 1`] = `
"transform": "rotate(-90deg)", "transform": "rotate(-90deg)",
} }
} }
viewBox="0 0 9 6" viewBox="0 0 9.6 6"
width="9" width="9.6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
fill="rgb(151, 151, 151)" fill="rgb(151, 151, 151)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>

10
packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`Button Default Button 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -37,6 +38,7 @@ exports[`Button Default Button 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -97,6 +99,7 @@ exports[`Button Disabled Button 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -137,6 +140,7 @@ exports[`Button Disabled Button 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -220,6 +224,7 @@ exports[`Button Error Button 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -253,6 +258,7 @@ exports[`Button Error Button 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -334,6 +340,7 @@ exports[`Button Loading Button 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -374,6 +381,7 @@ exports[`Button Loading Button 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -457,6 +465,7 @@ exports[`Button Secondary Button 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -492,6 +501,7 @@ exports[`Button Secondary Button 1`] = `
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.9375rem 1.125rem; padding: 0.9375rem 1.125rem;
position: relative; position: relative;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-size: 0.9375rem; font-size: 0.9375rem;
text-align: center; text-align: center;
font-style: normal; font-style: normal;

1
packages/ui-toolkit/src/button/index.js
View File

@ -89,6 +89,7 @@ const Button = styled(BaseButton)`
padding: ${remcalc(15)} ${remcalc(18)}; padding: ${remcalc(15)} ${remcalc(18)};
position: relative; position: relative;
font-family: ${props => props.theme.font.families};
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
text-align: center; text-align: center;
font-style: normal; font-style: normal;

3
packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`Form Checkbox 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }
@ -375,6 +376,7 @@ exports[`Form Legend 1`] = `
max-width: 100%; max-width: 100%;
padding: 0; padding: 0;
white-space: normal; white-space: normal;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 600; font-weight: 600;
} }
@ -392,6 +394,7 @@ exports[`Form Radio 1`] = `
line-height: 1.15; line-height: 1.15;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
display: none; display: none;
} }

2
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -10,6 +10,8 @@ import isUndefined from 'lodash.isundefined';
import BaseInput from './input'; import BaseInput from './input';
const StyledInput = Input.extend` const StyledInput = Input.extend`
font-family: ${props => props.theme.font.families};
display: none; display: none;
&:checked + label::after { &:checked + label::after {

1
packages/ui-toolkit/src/form/legend.js
View File

@ -4,6 +4,7 @@ import Baseline from '../baseline';
const StyledLegend = Legend.extend` const StyledLegend = Legend.extend`
/* trick prettier */ /* trick prettier */
font-family: ${props => props.theme.font.families};
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`; `;

2
packages/ui-toolkit/src/icons/index.js
View File

@ -42,6 +42,7 @@ import {
Randomize as BaseRandomize, Randomize as BaseRandomize,
Reset as BaseReset, Reset as BaseReset,
Restart as BaseRestart, Restart as BaseRestart,
Script as BaseScript,
Services as BaseServices, Services as BaseServices,
Start as BaseStart, Start as BaseStart,
Stop as BaseStop, Stop as BaseStop,
@ -94,6 +95,7 @@ export const Public = Baseline(Colors(BasePublic));
export const Randomize = Baseline(Colors(BaseRandomize)); export const Randomize = Baseline(Colors(BaseRandomize));
export const Reset = Baseline(Colors(BaseReset)); export const Reset = Baseline(Colors(BaseReset));
export const Restart = Baseline(Colors(BaseRestart)); export const Restart = Baseline(Colors(BaseRestart));
export const Script = Baseline(Colors(BaseScript));
export const Services = Baseline(Colors(BaseServices)); export const Services = Baseline(Colors(BaseServices));
export const Start = Baseline(Colors(BaseStart)); export const Start = Baseline(Colors(BaseStart));
export const Stop = Baseline(Colors(BaseStop)); export const Stop = Baseline(Colors(BaseStop));

1
packages/ui-toolkit/src/index.js
View File

@ -98,6 +98,7 @@ export {
Randomize as RandomizeIcon, Randomize as RandomizeIcon,
Reset as ResetIcon, Reset as ResetIcon,
Restart as RestartIcon, Restart as RestartIcon,
Script as ScriptIcon,
Services as ServicesIcon, Services as ServicesIcon,
Start as StartIcon, Start as StartIcon,
Stop as StopIcon, Stop as StopIcon,

27
packages/ui-toolkit/src/message/__tests__/__snapshots__/message.spec.js.snap
View File

@ -122,7 +122,7 @@ exports[`Message Message 1`] = `
</div> </div>
<svg <svg
className="c5 " className="c5 "
height="12" height="11.31"
innerRef={undefined} innerRef={undefined}
onClick={[Function]} onClick={[Function]}
style={ style={
@ -130,14 +130,13 @@ exports[`Message Message 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 12 12" viewBox="0 0 11.31 11.31"
width="12" width="11.31"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -238,7 +237,7 @@ exports[`Message Message Error 1`] = `
</div> </div>
<svg <svg
className="c5 " className="c5 "
height="12" height="11.31"
innerRef={undefined} innerRef={undefined}
onClick={[Function]} onClick={[Function]}
style={ style={
@ -246,14 +245,13 @@ exports[`Message Message Error 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 12 12" viewBox="0 0 11.31 11.31"
width="12" width="11.31"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>
@ -354,7 +352,7 @@ exports[`Message Message Warning 1`] = `
</div> </div>
<svg <svg
className="c5 " className="c5 "
height="12" height="11.31"
innerRef={undefined} innerRef={undefined}
onClick={[Function]} onClick={[Function]}
style={ style={
@ -362,14 +360,13 @@ exports[`Message Message Warning 1`] = `
"transform": "rotate(0deg)", "transform": "rotate(0deg)",
} }
} }
viewBox="0 0 12 12" viewBox="0 0 11.31 11.31"
width="12" width="11.31"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" d="M11.31,1.41,9.9,0,5.66,4.24,1.41,0,0,1.41,4.24,5.66,0,9.9l1.41,1.41L5.66,7.07,9.9,11.31,11.31,9.9,7.07,5.66Z"
fill="rgba(73, 73, 73, 1)" fill="rgba(73, 73, 73, 1)"
fillRule="evenodd"
/> />
</svg> </svg>
</div> </div>

4
packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`SectionList Anchor 1`] = `
.c2 { .c2 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c1 { .c1 {
@ -37,6 +38,7 @@ exports[`SectionList Anchor 2`] = `
.c2 { .c2 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c1 { .c1 {
@ -72,6 +74,7 @@ exports[`SectionList Item 1`] = `
.c3 { .c3 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c2 { .c2 {
@ -116,6 +119,7 @@ exports[`SectionList SectionList 1`] = `
.c4 { .c4 {
background-color: transparent; background-color: transparent;
text-decoration-skip: objects; text-decoration-skip: objects;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
} }
.c3 { .c3 {

2
packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`Button H1 1`] = `
.c0 { .c0 {
font-size: 2rem; font-size: 2rem;
margin: 0.625rem 0; margin: 0.625rem 0;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.8125rem; line-height: 2.8125rem;
@ -209,6 +210,7 @@ exports[`Button Paragraph 1`] = `
exports[`Button Small 1`] = ` exports[`Button Small 1`] = `
.c0 { .c0 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
line-height: 1.125rem; line-height: 1.125rem;
font-size: 0.8125rem; font-size: 0.8125rem;

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

@ -4,6 +4,7 @@ import remcalc from 'remcalc';
import is, { isNot } from 'styled-is'; import is, { isNot } from 'styled-is';
export const H1 = NH1.extend` export const H1 = NH1.extend`
font-family: ${props => props.theme.font.families};
color: ${props => props.theme.text}; color: ${props => props.theme.text};
font-size: ${remcalc(36)}; font-size: ${remcalc(36)};

1
packages/ui-toolkit/src/text/small.js
View File

@ -3,6 +3,7 @@ import remcalc from 'remcalc';
import is, { isNot } from 'styled-is'; import is, { isNot } from 'styled-is';
export default Small.extend` export default Small.extend`
font-family: ${props => props.theme.font.families};
color: ${props => props.theme.text}; color: ${props => props.theme.text};
line-height: ${remcalc(18)}; line-height: ${remcalc(18)};

2
packages/ui-toolkit/src/theme/index.js
View File

@ -86,6 +86,8 @@ export const font = {
abbrBorderColor: base.secondary, abbrBorderColor: base.secondary,
textMuted: base.secondary, textMuted: base.secondary,
family: '"Libre Franklin"', family: '"Libre Franklin"',
families:
'"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif',
href: () => href: () =>
`${document.location.protocol}//${ `${document.location.protocol}//${
document.location.host document.location.host

49
yarn.lock
View File

@ -2403,7 +2403,7 @@ code-point-at@^1.0.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codemirror@^5.32.0: codemirror@^5.18.2, codemirror@^5.32.0:
version "5.33.0" version "5.33.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a"
@ -2872,6 +2872,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1" safe-buffer "^5.0.1"
sha.js "^2.4.8" sha.js "^2.4.8"
create-react-class@^15.5.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-env@^5.1.0: cross-env@^5.1.0:
version "5.1.3" version "5.1.3"
resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.3.tgz#f8ae18faac87692b0a8b4d2f7000d4ec3a85dfd7" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.3.tgz#f8ae18faac87692b0a8b4d2f7000d4ec3a85dfd7"
@ -6101,8 +6109,8 @@ jest@20.0.4:
jest-cli "^20.0.4" jest-cli "^20.0.4"
joi@13.x.x: joi@13.x.x:
version "13.1.0" version "13.1.1"
resolved "https://registry.yarnpkg.com/joi/-/joi-13.1.0.tgz#59e7b8714b932a1e342c3583d5841d7169ff1822" resolved "https://registry.yarnpkg.com/joi/-/joi-13.1.1.tgz#1f306a5c3ded496da46629915d09e1ae3825185c"
dependencies: dependencies:
hoek "5.x.x" hoek "5.x.x"
isemail "3.x.x" isemail "3.x.x"
@ -6115,6 +6123,14 @@ joy-react-broadcast@^0.6.9:
prop-types "^15.5.6" prop-types "^15.5.6"
warning "^3.0.0" warning "^3.0.0"
joyent-manifest-editor@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/joyent-manifest-editor/-/joyent-manifest-editor-1.4.0.tgz#0c02efe6c02b0386a5b209ae4ddcc3492b9c22ac"
dependencies:
prettier "^1.7.4"
prop-types "^15.6.0"
react-codemirror "^1.0.0"
joyent-react-scripts@^7.2.0: joyent-react-scripts@^7.2.0:
version "7.2.0" version "7.2.0"
resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-7.2.0.tgz#e71e500f13b8405ba5f0160c5ad89455d6647312" resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-7.2.0.tgz#e71e500f13b8405ba5f0160c5ad89455d6647312"
@ -6537,6 +6553,10 @@ lodash.cond@^4.3.0:
version "4.5.2" version "4.5.2"
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5" resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
lodash.defaults@^4.2.0: lodash.defaults@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@ -8136,6 +8156,10 @@ prettier@1.7.4:
version "1.7.4" version "1.7.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
prettier@^1.7.4:
version "1.10.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"
pretty-bytes@^4.0.2: pretty-bytes@^4.0.2:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
@ -8423,6 +8447,17 @@ react-codemirror2@^3.0.7:
version "3.0.7" version "3.0.7"
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-3.0.7.tgz#d5d9888158263ae56da766539d7803486566ab9f" resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-3.0.7.tgz#d5d9888158263ae56da766539d7803486566ab9f"
react-codemirror@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
dependencies:
classnames "^2.2.5"
codemirror "^5.18.2"
create-react-class "^15.5.1"
lodash.debounce "^4.0.8"
lodash.isequal "^4.5.0"
prop-types "^15.5.4"
react-create-component-from-tag-prop@^1.2.1: react-create-component-from-tag-prop@^1.2.1:
version "1.3.1" version "1.3.1"
resolved "https://registry.yarnpkg.com/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.3.1.tgz#5389407d99f88ba2b36351780a6094470b44a7c7" resolved "https://registry.yarnpkg.com/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.3.1.tgz#5389407d99f88ba2b36351780a6094470b44a7c7"
@ -9928,8 +9963,8 @@ sshpk@^1.7.0:
tweetnacl "~0.14.0" tweetnacl "~0.14.0"
ssri@^5.0.0: ssri@^5.0.0:
version "5.0.0" version "5.1.0"
resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.0.0.tgz#13c19390b606c821f2a10d02b351c1729b94d8cf" resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.1.0.tgz#2cbf1df36b74d0fc91fcf89640a4b3e1d10b1899"
dependencies: dependencies:
safe-buffer "^5.1.0" safe-buffer "^5.1.0"
@ -10580,8 +10615,8 @@ type-component@0.0.1:
resolved "https://registry.yarnpkg.com/type-component/-/type-component-0.0.1.tgz#952a6c81c21efd24d13d811d0c8498cb860e1956" resolved "https://registry.yarnpkg.com/type-component/-/type-component-0.0.1.tgz#952a6c81c21efd24d13d811d0c8498cb860e1956"
type-detect@^4.0.5: type-detect@^4.0.5:
version "4.0.6" version "4.0.7"
resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.6.tgz#88cbce3d13bc675a63f840b3225c180f870786d7" resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.7.tgz#862bd2cf6058ad92799ff5a5b8cf7b6cec726198"
type-is@~1.6.15: type-is@~1.6.15:
version "1.6.15" version "1.6.15"