Sara Vieira
Sérgio Ramos
parent
f489e34402
commit
ffb3215611
@ -0,0 +1,904 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <AddServiceForm /> without throwing 1`] = `
|
||||
.c4 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: flex-end;
|
||||
-webkit-box-align: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c7::-moz-focus-inner,
|
||||
.c7[type='button']::-moz-focus-inner,
|
||||
.c7[type='reset']::-moz-focus-inner,
|
||||
.c7[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c7:-moz-focusring,
|
||||
.c7[type='button']:-moz-focusring,
|
||||
.c7[type='reset']:-moz-focusring,
|
||||
.c7[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c7 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
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);
|
||||
}
|
||||
|
||||
.c5:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5:active,
|
||||
.c5:active:hover,
|
||||
.c5:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
-webkit-padding-before: 0;
|
||||
-webkit-padding-start: 0;
|
||||
-webkit-padding-end: 0;
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 18.75rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c3::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c3:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<label
|
||||
className="c2"
|
||||
htmlFor="Y"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<input
|
||||
className="c3"
|
||||
disabled={false}
|
||||
id="Y"
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<button
|
||||
className="c5 c6 c7"
|
||||
disabled={undefined}
|
||||
href=""
|
||||
type="submit"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
||||
.c4 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: flex-end;
|
||||
-webkit-box-align: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c7::-moz-focus-inner,
|
||||
.c7[type='button']::-moz-focus-inner,
|
||||
.c7[type='reset']::-moz-focus-inner,
|
||||
.c7[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c7:-moz-focusring,
|
||||
.c7[type='button']:-moz-focusring,
|
||||
.c7[type='reset']:-moz-focusring,
|
||||
.c7[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c7 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
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);
|
||||
}
|
||||
|
||||
.c5:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5:active,
|
||||
.c5:active:hover,
|
||||
.c5:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c5[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c5:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c5:hover {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c5:active,
|
||||
.c5:active:hover,
|
||||
.c5:active:focus {
|
||||
background-color: rgb(250,250,250);
|
||||
border-color: rgb(250,250,250);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
-webkit-padding-before: 0;
|
||||
-webkit-padding-start: 0;
|
||||
-webkit-padding-end: 0;
|
||||
-webkit-padding-after: 0;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 18.75rem;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c3::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c3:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c3:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c3:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-size: 0.9375rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
name="name"
|
||||
role="group"
|
||||
style={undefined}
|
||||
>
|
||||
<label
|
||||
className="c2"
|
||||
htmlFor="Z"
|
||||
>
|
||||
Attach to new CNS service name
|
||||
</label>
|
||||
<input
|
||||
className="c3"
|
||||
disabled={false}
|
||||
id="Z"
|
||||
placeholder="Example: mySQLdb"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<button
|
||||
className="c5 c6 c7"
|
||||
disabled={true}
|
||||
href=""
|
||||
type="submit"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders <Header/> without throwing 1`] = `
|
||||
Array [
|
||||
.c0 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 + p,
|
||||
.c0 + small,
|
||||
.c0 + h1,
|
||||
.c0 + h2,
|
||||
.c0 + label,
|
||||
.c0 + h3,
|
||||
.c0 + h4,
|
||||
.c0 + h5,
|
||||
.c0 + div,
|
||||
.c0 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<h3
|
||||
className="c0"
|
||||
>
|
||||
Hostnames
|
||||
</h3>,
|
||||
.c0 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<p
|
||||
className="c1"
|
||||
>
|
||||
Default hostnames are automatically generated from both the instance name and any attached networks.
|
||||
</p>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders <Hostname /> without throwing 1`] = `null`;
|
||||
|
||||
exports[`renders <Hostname values /> without throwing 1`] = `
|
||||
.c0 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
-webkit-flex-basis: auto;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex-grow: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
-webkit-flex-shrink: 1;
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-size: 80%;
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.125rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
font-size: 80%;
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.125rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
box-sizing: border-box;
|
||||
width: 18.75rem;
|
||||
height: 3rem;
|
||||
min-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.8125rem 1.125rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgb(250,250,250);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
font-family: "Roboto Mono";
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c7::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c7::-webkit-input-placeholder {
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c7::-moz-placeholder {
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c7:-ms-input-placeholder {
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c7:disabled {
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c7:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,0.5);
|
||||
}
|
||||
|
||||
.c7:disabled {
|
||||
color: rgba(73,73,73,1);
|
||||
}
|
||||
|
||||
.c7:disabled::-webkit-input-placeholder {
|
||||
color: rgba(73,73,73,1);
|
||||
}
|
||||
|
||||
.c7:disabled::-moz-placeholder {
|
||||
color: rgba(73,73,73,1);
|
||||
}
|
||||
|
||||
.c7:disabled:-ms-input-placeholder {
|
||||
color: rgba(73,73,73,1);
|
||||
}
|
||||
|
||||
.c7:focus {
|
||||
border-color: rgb(59,70,204);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
padding-right: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
border-right: 0.0625rem solid rgb(216,216,216);
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<small
|
||||
className="c2 c3"
|
||||
>
|
||||
Instance name
|
||||
|
||||
hostname
|
||||
</small>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
height="16"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 12 16"
|
||||
width="12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
|
||||
fill="rgba(73, 73, 73, 1)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<small
|
||||
className="c6"
|
||||
>
|
||||
Private
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
className="c7"
|
||||
disabled={true}
|
||||
id=""
|
||||
value="111"
|
||||
/>
|
||||
<input
|
||||
className="c7"
|
||||
disabled={true}
|
||||
id=""
|
||||
value="111"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders <HostnamesHeader /> without throwing 1`] = `
|
||||
.c0 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
>
|
||||
CNS service hostnames
|
||||
</h3>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<p
|
||||
className="c3"
|
||||
>
|
||||
CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,174 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Name /> without throwing 1`] = `
|
||||
.c0 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c4::-moz-focus-inner,
|
||||
.c4[type='button']::-moz-focus-inner,
|
||||
.c4[type='reset']::-moz-focus-inner,
|
||||
.c4[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c4:-moz-focusring,
|
||||
.c4[type='button']:-moz-focusring,
|
||||
.c4[type='reset']:-moz-focusring,
|
||||
.c4[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c4 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
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);
|
||||
color: rgb(70,70,70);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2:active,
|
||||
.c2:active:hover,
|
||||
.c2:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:focus {
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
background-color: rgb(247,247,247);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:active,
|
||||
.c2:active:hover,
|
||||
.c2:active:focus {
|
||||
background-color: rgb(230,230,230);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="c2 c3 c4"
|
||||
href=""
|
||||
onClick={undefined}
|
||||
type="button"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</form>
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders <Name expanded /> without throwing 1`] = `
|
||||
@ -620,172 +455,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders <Name pristine={false} /> without throwing 1`] = `
|
||||
.c0 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
-moz-appearance: button;
|
||||
appearance: button;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.c4::-moz-focus-inner,
|
||||
.c4[type='button']::-moz-focus-inner,
|
||||
.c4[type='reset']::-moz-focus-inner,
|
||||
.c4[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c4:-moz-focusring,
|
||||
.c4[type='button']:-moz-focusring,
|
||||
.c4[type='reset']:-moz-focusring,
|
||||
.c4[type='submit']:-moz-focusring {
|
||||
outline: 0.0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
.c4 + button {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
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);
|
||||
color: rgb(70,70,70);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
background-color: rgb(59,70,204);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
background-color: rgb(72,83,217);
|
||||
border: solid 0.0625rem rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2:active,
|
||||
.c2:active:hover,
|
||||
.c2:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
background-color: rgb(45,56,132);
|
||||
border-color: rgb(45,56,132);
|
||||
}
|
||||
|
||||
.c2[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c2:focus {
|
||||
background-color: rgb(255,255,255);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:hover {
|
||||
background-color: rgb(247,247,247);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c2:active,
|
||||
.c2:active:hover,
|
||||
.c2:active:focus {
|
||||
background-color: rgb(230,230,230);
|
||||
border-color: rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
<form
|
||||
onSubmit={undefined}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="c2 c3 c4"
|
||||
href=""
|
||||
onClick={undefined}
|
||||
type="button"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</form>
|
||||
/>
|
||||
`;
|
||||
|
||||
@ -2,23 +2,23 @@
|
||||
|
||||
exports[`renders <Title /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -42,6 +42,35 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -51,10 +80,14 @@ Array [
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<p
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="c3"
|
||||
/>
|
||||
</div>,
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
@ -99,23 +132,23 @@ Array [
|
||||
|
||||
exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -139,6 +172,35 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -148,6 +210,9 @@ Array [
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -169,8 +234,9 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
/>
|
||||
</div>,
|
||||
.c2 {
|
||||
@ -216,23 +282,23 @@ Array [
|
||||
|
||||
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -256,6 +322,35 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -265,6 +360,9 @@ Array [
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -286,8 +384,9 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
/>
|
||||
</div>,
|
||||
.c2 {
|
||||
@ -333,23 +432,23 @@ Array [
|
||||
|
||||
exports[`renders <Title label="Test"/> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -373,6 +472,35 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -382,10 +510,14 @@ Array [
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<p
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="c3"
|
||||
/>
|
||||
</div>,
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Header, HostnamesHeader, AddServiceForm, Hostname } from '../cns';
|
||||
import Theme from '@mocks/theme';
|
||||
|
||||
it('renders <Header/> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Header />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <HostnamesHeader /> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<HostnamesHeader />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <AddServiceForm /> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<AddServiceForm />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <AddServiceForm pristine /> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<AddServiceForm pristine />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <Hostname /> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Hostname values={[]} />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <Hostname values /> without throwing', () => {
|
||||
expect(
|
||||
renderer
|
||||
.create(
|
||||
<Theme>
|
||||
<Hostname values={['111', '111']} />
|
||||
</Theme>
|
||||
)
|
||||
.toJSON()
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
93
packages/my-joy-beta/src/components/create-instance/cns.js
Normal file
93
packages/my-joy-beta/src/components/create-instance/cns.js
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import { Field } from 'redux-form';
|
||||
|
||||
import {
|
||||
P,
|
||||
H3,
|
||||
Input,
|
||||
Small,
|
||||
Button,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
PublicIcon,
|
||||
PrivateIcon
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const SmallBordered = styled(Small)`
|
||||
padding-right: ${remcalc(12)};
|
||||
margin-right: ${remcalc(12)};
|
||||
border-right: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
`;
|
||||
|
||||
export const Header = () => (
|
||||
<Fragment>
|
||||
<H3>Hostnames</H3>
|
||||
<Padding bottom={2}>
|
||||
<P>
|
||||
Default hostnames are automatically generated from both the instance
|
||||
name and any attached networks.
|
||||
</P>
|
||||
</Padding>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export const HostnamesHeader = () => (
|
||||
<Margin top={4}>
|
||||
<H3>CNS service hostnames</H3>
|
||||
<Padding bottom={3}>
|
||||
<P>
|
||||
CNS service hostnames are created by attaching a CNS service name to one
|
||||
or more instances. You can serve multiple instances under the same
|
||||
hostname by assigning them to a matching CNS service name.
|
||||
</P>
|
||||
</Padding>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
export const AddServiceForm = ({ handleSubmit, pristine }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Flex alignEnd>
|
||||
<FormGroup name="name" field={Field}>
|
||||
<FormLabel>Attach to new CNS service name</FormLabel>
|
||||
<Input type="text" placeholder="Example: mySQLdb" />
|
||||
</FormGroup>
|
||||
<Margin left={2}>
|
||||
<Button type="submit" disabled={pristine}>
|
||||
Add
|
||||
</Button>
|
||||
</Margin>
|
||||
</Flex>
|
||||
</form>
|
||||
);
|
||||
|
||||
export const Hostname = ({ values, network, service, ...hostname }) => (
|
||||
<Fragment>
|
||||
{values.length ? (
|
||||
<Margin bottom={4}>
|
||||
<Flex>
|
||||
<SmallBordered bold noMargin>
|
||||
{network && service
|
||||
? 'Network CNS service'
|
||||
: network
|
||||
? 'Network'
|
||||
: service ? 'CNS service' : 'Instance name'}{' '}
|
||||
hostname
|
||||
</SmallBordered>
|
||||
<FlexItem>
|
||||
<Margin right={1}>
|
||||
{hostname.public ? <PublicIcon /> : <PrivateIcon />}
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
{values.map(value => <Input disabled monospace fluid value={value} />)}
|
||||
</Margin>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
@ -31,6 +31,8 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
|
||||
</Button>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
{name ? (
|
||||
<Fragment>
|
||||
<Margin bottom={2} top={3}>
|
||||
<H3>{name}</H3>
|
||||
@ -39,6 +41,8 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
|
||||
Edit
|
||||
</Button>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
|
||||
@ -8,7 +8,11 @@ import { Divider, P } from 'joyent-ui-toolkit';
|
||||
export default ({ icon, children }) => (
|
||||
<Fragment>
|
||||
<Flex>
|
||||
<Margin right={1}>{icon}</Margin>
|
||||
<Margin right={1}>
|
||||
<Flex alignCenter full>
|
||||
{icon}
|
||||
</Flex>
|
||||
</Margin>
|
||||
<P>{children}</P>
|
||||
</Flex>
|
||||
<Margin top={1} bottom={3}>
|
||||
|
||||
@ -2768,7 +2768,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
|
||||
@ -693,7 +693,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -1692,7 +1692,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
|
||||
@ -835,7 +835,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -897,7 +897,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -3000,7 +3000,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -5334,7 +5334,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -7554,7 +7554,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -7616,7 +7616,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -9611,7 +9611,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -9673,7 +9673,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -11776,7 +11776,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -11838,7 +11838,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -13775,7 +13775,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -13837,7 +13837,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
|
||||
@ -2014,9 +2014,7 @@ exports[`renders <Tag /> without throwing 1`] = `
|
||||
<li
|
||||
className="c2"
|
||||
onClick={undefined}
|
||||
>
|
||||
:
|
||||
</li>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -2073,9 +2071,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
|
||||
className="c2"
|
||||
onClick={undefined}
|
||||
>
|
||||
name
|
||||
:
|
||||
value
|
||||
name: value
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -205,7 +205,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -568,7 +568,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -953,7 +953,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1316,7 +1316,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1679,7 +1679,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -2042,7 +2042,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -2429,7 +2429,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
|
||||
color: rgb(250,250,250);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
|
||||
@ -12,10 +12,10 @@ export const EditForm = props => (
|
||||
<KeyValue {...props} method="edit" input="input" type="tag" expanded />
|
||||
);
|
||||
|
||||
export default ({ name, value, onClick, onRemoveClick }) => (
|
||||
export default ({ name, value, onClick, onRemoveClick, active }) => (
|
||||
<Margin right={1} bottom={1} key={`${name}-${value}`}>
|
||||
<TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
|
||||
{name}: {value}
|
||||
<TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
|
||||
{name ? `${name}: ${value}` : value}
|
||||
</TagItem>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
@ -2,23 +2,23 @@
|
||||
|
||||
exports[`renders <Metadata /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -46,11 +46,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -113,8 +145,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Metadata
|
||||
</p>
|
||||
@ -163,23 +196,23 @@ Array [
|
||||
|
||||
exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -207,11 +240,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -274,8 +339,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Metadata
|
||||
</p>
|
||||
@ -1041,7 +1107,7 @@ Array [
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -1576,23 +1642,23 @@ Array [
|
||||
|
||||
exports[`renders <Metadata expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -1620,11 +1686,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -1687,8 +1785,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Metadata
|
||||
</p>
|
||||
@ -1983,23 +2082,23 @@ Array [
|
||||
|
||||
exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -2027,11 +2126,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -2094,8 +2225,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Metadata
|
||||
</p>
|
||||
@ -2811,7 +2943,7 @@ Array [
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -3835,7 +3967,7 @@ Array [
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -4192,23 +4324,23 @@ Array [
|
||||
|
||||
exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -4236,11 +4368,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -4303,8 +4467,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Metadata
|
||||
</p>
|
||||
@ -5060,7 +5225,7 @@ Array [
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -6084,7 +6249,7 @@ Array [
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
|
||||
@ -2,23 +2,23 @@
|
||||
|
||||
exports[`renders <Networks /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -46,11 +46,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -85,8 +117,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
@ -136,23 +169,23 @@ Array [
|
||||
|
||||
exports[`renders <Networks loading /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -180,11 +213,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -219,8 +284,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
@ -269,23 +335,23 @@ Array [
|
||||
|
||||
exports[`renders <Networks loading expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -313,11 +379,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -352,8 +450,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
@ -670,23 +769,23 @@ Array [
|
||||
|
||||
exports[`renders <Networks networks=[] /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -714,11 +813,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -753,8 +884,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
@ -1100,23 +1232,23 @@ Array [
|
||||
|
||||
exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -1144,11 +1276,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -1183,8 +1347,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
@ -2588,23 +2753,23 @@ Array [
|
||||
|
||||
exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -2632,11 +2797,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -2671,8 +2868,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Networks
|
||||
</p>
|
||||
|
||||
@ -2,23 +2,23 @@
|
||||
|
||||
exports[`renders <Tags /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -46,11 +46,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -100,8 +132,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Tags
|
||||
</p>
|
||||
@ -150,23 +183,23 @@ Array [
|
||||
|
||||
exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -194,11 +227,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -248,8 +313,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Tags
|
||||
</p>
|
||||
@ -1540,23 +1606,23 @@ Array [
|
||||
|
||||
exports[`renders <Tags expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -1584,11 +1650,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -1638,8 +1736,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Tags
|
||||
</p>
|
||||
@ -1950,23 +2049,23 @@ Array [
|
||||
|
||||
exports[`renders <Tags metadata=[] /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -1994,11 +2093,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -2048,8 +2179,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Tags
|
||||
</p>
|
||||
@ -2098,23 +2230,23 @@ Array [
|
||||
|
||||
exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
|
||||
Array [
|
||||
.c2 {
|
||||
.c3 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
@ -2142,11 +2274,43 @@ Array [
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<svg
|
||||
className=""
|
||||
@ -2196,8 +2360,9 @@ Array [
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="c2"
|
||||
className="c3"
|
||||
>
|
||||
Tags
|
||||
</p>
|
||||
|
||||
241
packages/my-joy-beta/src/containers/create-instance/cns.js
Normal file
241
packages/my-joy-beta/src/containers/create-instance/cns.js
Normal file
@ -0,0 +1,241 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { compose } from 'react-apollo';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { destroy } from 'redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import get from 'lodash.get';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import Flex from 'styled-flex-component';
|
||||
import { set } from 'react-redux-values';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import {
|
||||
CnsIcon,
|
||||
P,
|
||||
Card,
|
||||
H3,
|
||||
Button,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Toggle,
|
||||
Divider,
|
||||
TagList
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import {
|
||||
Hostname,
|
||||
Header,
|
||||
AddServiceForm,
|
||||
HostnamesHeader
|
||||
} from '@components/create-instance/cns';
|
||||
import Title from '@components/create-instance/title';
|
||||
import Tag from '@components/instances/tags';
|
||||
|
||||
const CNS_FORM = 'create-instance-cns';
|
||||
|
||||
const CNSContainer = ({
|
||||
submitted,
|
||||
expanded,
|
||||
proceeded,
|
||||
serviceNames,
|
||||
instanceName,
|
||||
cnsEnabled = true,
|
||||
hostnames = [],
|
||||
handleNext,
|
||||
handleEdit,
|
||||
handleToggleCnsEnabled,
|
||||
handleAddService,
|
||||
handleRemoveService
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title icon={<CnsIcon />}>Container Name Service</Title>
|
||||
{expanded ? (
|
||||
<Margin bottom={3}>
|
||||
<P>
|
||||
Triton CNS is used to automatically update hostnames for your
|
||||
instances*. You can serve multiple instances (with multiple IP
|
||||
addresses) under the same hostname by matching the CNS service names.{' '}
|
||||
<a
|
||||
href="https://docs.joyent.com/private-cloud/install/cns"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Margin>
|
||||
) : null}
|
||||
{expanded && cnsEnabled ? (
|
||||
<Card>
|
||||
<Padding all={4} bottom={0}>
|
||||
<Header />
|
||||
<Flex column>
|
||||
{hostnames
|
||||
.filter(({ service }) => !service)
|
||||
.map(({ value, ...hostname }) => (
|
||||
<Hostname key={value} value={value} {...hostname} />
|
||||
))}
|
||||
</Flex>
|
||||
<Divider height={remcalc(1)} />
|
||||
<Margin top={4}>
|
||||
{serviceNames.length ? (
|
||||
<Margin>
|
||||
<FormLabel>Existing CNS service name(s)</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<TagList>
|
||||
{serviceNames.map((value, index) => (
|
||||
<Tag
|
||||
active
|
||||
key={index}
|
||||
value={value}
|
||||
onRemoveClick={() => handleRemoveService(index)}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
</Margin>
|
||||
) : null}
|
||||
<HostnamesHeader />
|
||||
<ReduxForm
|
||||
form={`${CNS_FORM}-new-service`}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
onSubmit={handleAddService}
|
||||
>
|
||||
{props => <AddServiceForm {...props} />}
|
||||
</ReduxForm>
|
||||
<Margin top={4}>
|
||||
<Flex column>
|
||||
{hostnames
|
||||
.filter(({ service }) => service)
|
||||
.map(({ value, ...hostname }) => (
|
||||
<Hostname key={value} value={value} {...hostname} />
|
||||
))}
|
||||
</Flex>
|
||||
</Margin>
|
||||
</Margin>
|
||||
</Padding>
|
||||
</Card>
|
||||
) : null}
|
||||
{expanded ? (
|
||||
<Fragment>
|
||||
<Margin bottom={4} top={4}>
|
||||
<FormGroup name="cns-enabled">
|
||||
<Flex alignCenter>
|
||||
<FormLabel>Disabled CNS</FormLabel>
|
||||
<Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
|
||||
Enabled CNS
|
||||
</Toggle>
|
||||
</Flex>
|
||||
</FormGroup>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<P>
|
||||
*All hostnames are indicative and will be confirmed after
|
||||
deployment.
|
||||
</P>
|
||||
</Margin>
|
||||
<Button type="button" onClick={handleNext}>
|
||||
Next
|
||||
</Button>
|
||||
</Fragment>
|
||||
) : null}
|
||||
{proceeded && !expanded ? (
|
||||
<Fragment>
|
||||
<Margin bottom={4}>
|
||||
<H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
|
||||
</Margin>
|
||||
<FormLabel>Existing CNS service name(s)</FormLabel>
|
||||
<Margin top={0.5}>
|
||||
<TagList>
|
||||
{serviceNames.map((value, index) => (
|
||||
<Tag key={index} value={value} />
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
<Button type="button" onClick={handleEdit} secondary>
|
||||
Edit
|
||||
</Button>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default compose(
|
||||
connect(({ form, values }, ownProps) => {
|
||||
const instanceName = get(
|
||||
form,
|
||||
'create-instance-name.values.name',
|
||||
'<instance-name>'
|
||||
);
|
||||
const serviceNames = get(values, `${CNS_FORM}-services`, []);
|
||||
|
||||
// REPLACE WITH USER ID AND DATA CENTER
|
||||
const userID = '10703e3c-ada6-478d-c757-e5bcad0ea74c';
|
||||
const dataCenter = 'us-east-1';
|
||||
|
||||
const hostnames = [
|
||||
{
|
||||
values: [`${instanceName}.inst.${userID}.${dataCenter}.triton.zone`],
|
||||
public: true
|
||||
},
|
||||
{
|
||||
values: [`${instanceName}.inst.${userID}.${dataCenter}.cns.joyent.com`]
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
public: true,
|
||||
service: true
|
||||
},
|
||||
{
|
||||
values: [],
|
||||
service: true
|
||||
}
|
||||
];
|
||||
|
||||
hostnames.map(hostname => {
|
||||
if (!hostname.service) {
|
||||
return hostname;
|
||||
}
|
||||
|
||||
return serviceNames.map(name => {
|
||||
const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
|
||||
const value = `${name}.svc.${userID}.${dataCenter}${postfix}`;
|
||||
hostname.values.push(value);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
cnsEnabled: get(values, `${CNS_FORM}-enabled`, true),
|
||||
instanceName,
|
||||
proceeded: get(values, `${CNS_FORM}-proceeded`, false),
|
||||
hostnames,
|
||||
serviceNames
|
||||
};
|
||||
}),
|
||||
connect(null, (dispatch, { history, cnsEnabled, serviceNames = [] }) => ({
|
||||
handleNext: () => {
|
||||
dispatch(set({ name: `${CNS_FORM}-proceeded`, value: true }));
|
||||
return history.push(`/instances/~create/affinity`);
|
||||
},
|
||||
handleEdit: () => history.push(`/instances/~create/cns`),
|
||||
handleToggleCnsEnabled: ({ target }) =>
|
||||
dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),
|
||||
handleAddService: ({ name }) => {
|
||||
dispatch([
|
||||
destroy(`${CNS_FORM}-new-service`),
|
||||
set({
|
||||
name: `${CNS_FORM}-services`,
|
||||
value: serviceNames.concat(name.toLowerCase())
|
||||
})
|
||||
]);
|
||||
},
|
||||
handleRemoveService: index => {
|
||||
serviceNames.splice(index, 1);
|
||||
|
||||
return dispatch(
|
||||
set({ name: `${CNS_FORM}-services`, value: serviceNames.slice() })
|
||||
);
|
||||
}
|
||||
}))
|
||||
)(CNSContainer);
|
||||
@ -9,6 +9,7 @@ import Metadata from '@containers/create-instance/metadata';
|
||||
import Tags from '@containers/create-instance/tags';
|
||||
import Package from '@containers/create-instance/package';
|
||||
import Networks from '@containers/create-instance/networks';
|
||||
import CNS from '@containers/create-instance/cns';
|
||||
|
||||
export default ({ step, ...props }) => (
|
||||
<ViewContainer>
|
||||
@ -33,5 +34,8 @@ export default ({ step, ...props }) => (
|
||||
<Margin bottom={4}>
|
||||
<Networks {...props} expanded={step === 'networks'} />
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<CNS {...props} expanded={step === 'cns'} />
|
||||
</Margin>
|
||||
</ViewContainer>
|
||||
);
|
||||
|
||||
@ -389,7 +389,7 @@ exports[`renders <List /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1395,7 +1395,7 @@ exports[`renders <List error /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -2456,7 +2456,7 @@ exports[`renders <List instances /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -4534,7 +4534,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -7155,7 +7155,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -9985,7 +9985,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -11891,7 +11891,7 @@ exports[`renders <List loading /> without throwing 1`] = `
|
||||
color: rgb(250,250,250);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
|
||||
@ -278,7 +278,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1318,7 +1318,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1442,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
@ -2226,7 +2226,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -2857,7 +2857,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
|
||||
color: rgb(250,250,250);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -4115,7 +4115,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -4239,7 +4239,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
resize: vertical;
|
||||
font-size: 0.9375rem;
|
||||
|
||||
@ -1558,7 +1558,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
@ -3930,7 +3930,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
font-style: normal;
|
||||
|
||||
@ -278,7 +278,7 @@ exports[`renders <Tags /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -1327,7 +1327,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -2191,7 +2191,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -3242,7 +3242,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -4742,7 +4742,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -5618,7 +5618,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -6194,7 +6194,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
|
||||
color: rgb(250,250,250);
|
||||
background-color: rgb(250,250,250);
|
||||
color: rgb(216,216,216);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -6719,7 +6719,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
||||
background-color: rgb(255,255,255);
|
||||
border: 0.0625rem solid rgb(216,216,216);
|
||||
color: rgba(73,73,73,1);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9375rem;
|
||||
line-height: normal !important;
|
||||
@ -6992,9 +6992,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
||||
className="c20"
|
||||
onClick={undefined}
|
||||
>
|
||||
name1
|
||||
:
|
||||
value1
|
||||
name1: value1
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
@ -7008,9 +7006,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
||||
className="c20"
|
||||
onClick={undefined}
|
||||
>
|
||||
name2
|
||||
:
|
||||
value2
|
||||
name2: value2
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
@ -7024,9 +7020,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
||||
className="c20"
|
||||
onClick={undefined}
|
||||
>
|
||||
name3
|
||||
:
|
||||
value3
|
||||
name3: value3
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,7 @@ import remcalc from 'remcalc';
|
||||
|
||||
export default ({ theme }) => css`
|
||||
@import url('${theme.font.href()}');
|
||||
@import url('${theme.monoSpaceFont.href()}');
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
@ -10,9 +11,8 @@ export default ({ theme }) => css`
|
||||
|
||||
html, body {
|
||||
font-display: optional;
|
||||
font-family: ${
|
||||
theme.font.family
|
||||
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
||||
font-family: ${theme.font
|
||||
.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
||||
font-weight: ${theme.font.weight.normal};
|
||||
}
|
||||
|
||||
|
||||
@ -92,8 +92,28 @@ const style = css`
|
||||
width: ${remcalc(120)}
|
||||
`};
|
||||
|
||||
${is('monospace')`
|
||||
font-family: ${props => props.theme.monoSpaceFont.family};
|
||||
|
||||
&:disabled {
|
||||
color: ${props => props.theme.text};
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: ${props => props.theme.text};
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: ${props => props.theme.text};
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: ${props => props.theme.text};
|
||||
}
|
||||
}
|
||||
`};
|
||||
|
||||
${is('fluid')`
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
`};
|
||||
|
||||
${is('xSmall')`
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
@ -30,16 +30,29 @@ const Tag = styled.li`
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
${is('active')`
|
||||
border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
|
||||
background: rgba(59, 70, 204, .1)
|
||||
`};
|
||||
|
||||
${is('onClick')`
|
||||
cursor: pointer;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default ({ children, onRemoveClick, ...rest }) => (
|
||||
export default withTheme(
|
||||
({ theme, children, active, onRemoveClick, ...rest }) => (
|
||||
<Container>
|
||||
<Tag {...rest}>
|
||||
<Tag active={active} {...rest}>
|
||||
{children}
|
||||
{onRemoveClick ? <CloseIcon disabled onClick={onRemoveClick} /> : null}
|
||||
{onRemoveClick ? (
|
||||
<CloseIcon
|
||||
fill={active ? theme.primaryActive : theme.text}
|
||||
disabled
|
||||
onClick={onRemoveClick}
|
||||
/>
|
||||
) : null}
|
||||
</Tag>
|
||||
</Container>
|
||||
)
|
||||
);
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
import { Small } from 'normalized-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is, { isNot } from 'styled-is';
|
||||
|
||||
export default Small.extend`
|
||||
color: ${props => props.theme.text};
|
||||
|
||||
line-height: ${remcalc(18)};
|
||||
font-size: ${remcalc(13)};
|
||||
|
||||
${isNot('noMargin')`
|
||||
padding-bottom: ${remcalc(12)};
|
||||
`};
|
||||
|
||||
${is('bold')`
|
||||
font-weight: ${props => props.theme.font.weight.semibold};
|
||||
`};
|
||||
`;
|
||||
|
||||
@ -87,9 +87,8 @@ export const font = {
|
||||
textMuted: base.secondary,
|
||||
family: '"Libre Franklin"',
|
||||
href: () =>
|
||||
`${document.location.protocol}//${
|
||||
document.location.host
|
||||
}/fonts/css?family=Libre+Franklin:400,500,600`,
|
||||
`${document.location.protocol}//${document.location
|
||||
.host}/fonts/css?family=Libre+Franklin:400,500,600`,
|
||||
weight: {
|
||||
semibold: 600,
|
||||
medium: 500,
|
||||
@ -97,6 +96,19 @@ export const font = {
|
||||
}
|
||||
};
|
||||
|
||||
export const monoSpaceFont = {
|
||||
semibold: base.secondary,
|
||||
regular: base.text,
|
||||
abbrBorderColor: base.secondary,
|
||||
textMuted: base.secondary,
|
||||
family: '"Roboto Mono"',
|
||||
href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700',
|
||||
weight: {
|
||||
bold: 700,
|
||||
normal: 400
|
||||
}
|
||||
};
|
||||
|
||||
/** ******************************** INACTIVE ********************************* */
|
||||
|
||||
export const inactive = {
|
||||
@ -139,6 +151,7 @@ export const shadows = {
|
||||
export default {
|
||||
...base,
|
||||
font,
|
||||
monoSpaceFont,
|
||||
inactive,
|
||||
notifications,
|
||||
inputError,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user