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
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`renders <Name /> without throwing 1`] = `
|
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
|
<form
|
||||||
onSubmit={undefined}
|
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`] = `
|
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`] = `
|
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
|
<form
|
||||||
onSubmit={undefined}
|
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`] = `
|
exports[`renders <Title /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,6 +42,35 @@ Array [
|
|||||||
align-content: stretch;
|
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 {
|
.c1 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -51,9 +80,13 @@ Array [
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
/>
|
>
|
||||||
|
<div
|
||||||
|
className="c2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
.c2 {
|
.c2 {
|
||||||
@ -99,23 +132,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
|
exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,6 +172,35 @@ Array [
|
|||||||
align-content: stretch;
|
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 {
|
.c1 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -149,28 +211,32 @@ Array [
|
|||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 16.24 13.55"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
|
className=""
|
||||||
fill="rgba(73, 73, 73, 1)"
|
height="17"
|
||||||
/>
|
style={
|
||||||
</svg>
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 16.24 13.55"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
.c2 {
|
.c2 {
|
||||||
@ -216,23 +282,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
|
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -256,6 +322,35 @@ Array [
|
|||||||
align-content: stretch;
|
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 {
|
.c1 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -266,28 +361,32 @@ Array [
|
|||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 16.24 13.55"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
|
className=""
|
||||||
fill="rgba(73, 73, 73, 1)"
|
height="17"
|
||||||
/>
|
style={
|
||||||
</svg>
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 16.24 13.55"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
.c2 {
|
.c2 {
|
||||||
@ -333,23 +432,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Title label="Test"/> without throwing 1`] = `
|
exports[`renders <Title label="Test"/> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -373,6 +472,35 @@ Array [
|
|||||||
align-content: stretch;
|
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 {
|
.c1 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -382,9 +510,13 @@ Array [
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
/>
|
>
|
||||||
|
<div
|
||||||
|
className="c2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
.c2 {
|
.c2 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
);
|
||||||
@ -32,12 +32,16 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
|
|||||||
</Fragment>
|
</Fragment>
|
||||||
) : (
|
) : (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Margin bottom={2} top={3}>
|
{name ? (
|
||||||
<H3>{name}</H3>
|
<Fragment>
|
||||||
</Margin>
|
<Margin bottom={2} top={3}>
|
||||||
<Button type="button" secondary onClick={onCancel}>
|
<H3>{name}</H3>
|
||||||
Edit
|
</Margin>
|
||||||
</Button>
|
<Button type="button" secondary onClick={onCancel}>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
</Fragment>
|
||||||
|
) : null}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -8,7 +8,11 @@ import { Divider, P } from 'joyent-ui-toolkit';
|
|||||||
export default ({ icon, children }) => (
|
export default ({ icon, children }) => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Flex>
|
<Flex>
|
||||||
<Margin right={1}>{icon}</Margin>
|
<Margin right={1}>
|
||||||
|
<Flex alignCenter full>
|
||||||
|
{icon}
|
||||||
|
</Flex>
|
||||||
|
</Margin>
|
||||||
<P>{children}</P>
|
<P>{children}</P>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Margin top={1} bottom={3}>
|
<Margin top={1} bottom={3}>
|
||||||
|
|||||||
@ -2768,7 +2768,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
|
|||||||
@ -693,7 +693,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
@ -1692,7 +1692,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
|
|||||||
@ -835,7 +835,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -897,7 +897,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -3000,7 +3000,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -5334,7 +5334,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -7554,7 +7554,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -7616,7 +7616,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -9611,7 +9611,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -9673,7 +9673,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -11776,7 +11776,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -11838,7 +11838,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -13775,7 +13775,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -13837,7 +13837,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|||||||
@ -2014,9 +2014,7 @@ exports[`renders <Tag /> without throwing 1`] = `
|
|||||||
<li
|
<li
|
||||||
className="c2"
|
className="c2"
|
||||||
onClick={undefined}
|
onClick={undefined}
|
||||||
>
|
/>
|
||||||
:
|
|
||||||
</li>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -2073,9 +2071,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
|
|||||||
className="c2"
|
className="c2"
|
||||||
onClick={undefined}
|
onClick={undefined}
|
||||||
>
|
>
|
||||||
name
|
name: value
|
||||||
:
|
|
||||||
value
|
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -205,7 +205,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -568,7 +568,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -953,7 +953,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1316,7 +1316,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1679,7 +1679,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -2042,7 +2042,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -2429,7 +2429,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
|
|||||||
color: rgb(250,250,250);
|
color: rgb(250,250,250);
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
|
|||||||
@ -12,10 +12,10 @@ export const EditForm = props => (
|
|||||||
<KeyValue {...props} method="edit" input="input" type="tag" expanded />
|
<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}`}>
|
<Margin right={1} bottom={1} key={`${name}-${value}`}>
|
||||||
<TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
|
<TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
|
||||||
{name}: {value}
|
{name ? `${name}: ${value}` : value}
|
||||||
</TagItem>
|
</TagItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -2,23 +2,23 @@
|
|||||||
|
|
||||||
exports[`renders <Networks /> without throwing 1`] = `
|
exports[`renders <Networks /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -46,47 +46,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
@ -136,23 +169,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Networks loading /> without throwing 1`] = `
|
exports[`renders <Networks loading /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -180,47 +213,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
@ -269,23 +335,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Networks loading expanded /> without throwing 1`] = `
|
exports[`renders <Networks loading expanded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -313,47 +379,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
@ -670,23 +769,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Networks networks=[] /> without throwing 1`] = `
|
exports[`renders <Networks networks=[] /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -714,47 +813,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
@ -1100,23 +1232,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
|
exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1144,47 +1276,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
@ -2588,23 +2753,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
|
exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2632,47 +2797,80 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="18"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 18 18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 710)"
|
className=""
|
||||||
|
height="18"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
width="18"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<use
|
transform="translate(-1105 710)"
|
||||||
fill="rgba(73, 73, 73, 1)"
|
>
|
||||||
transform="translate(1105 -710)"
|
<g>
|
||||||
xlinkHref="#I"
|
<use
|
||||||
/>
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1105 -710)"
|
||||||
|
xlinkHref="#I"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
id="I"
|
||||||
id="I"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Networks
|
Networks
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -2,23 +2,23 @@
|
|||||||
|
|
||||||
exports[`renders <Tags /> without throwing 1`] = `
|
exports[`renders <Tags /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -46,62 +46,95 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1885 974)"
|
className=""
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
|
transform="translate(-1885 974)"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1885 -974)"
|
||||||
|
xlinkHref="#R"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgba(73, 73, 73, 1)"
|
fill="rgba(73, 73, 73, 1)"
|
||||||
transform="translate(1885 -974)"
|
transform="translate(1888 -971)"
|
||||||
xlinkHref="#R"
|
xlinkHref="#S"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgba(73, 73, 73, 1)"
|
|
||||||
transform="translate(1888 -971)"
|
|
||||||
xlinkHref="#S"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
id="R"
|
||||||
id="R"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="S"
|
||||||
id="S"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</p>
|
</p>
|
||||||
@ -150,23 +183,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
|
exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -194,62 +227,95 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1885 974)"
|
className=""
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
|
transform="translate(-1885 974)"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1885 -974)"
|
||||||
|
xlinkHref="#R"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgba(73, 73, 73, 1)"
|
fill="rgba(73, 73, 73, 1)"
|
||||||
transform="translate(1885 -974)"
|
transform="translate(1888 -971)"
|
||||||
xlinkHref="#R"
|
xlinkHref="#S"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgba(73, 73, 73, 1)"
|
|
||||||
transform="translate(1888 -971)"
|
|
||||||
xlinkHref="#S"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
id="R"
|
||||||
id="R"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="S"
|
||||||
id="S"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</p>
|
</p>
|
||||||
@ -1540,23 +1606,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Tags expanded /> without throwing 1`] = `
|
exports[`renders <Tags expanded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1584,62 +1650,95 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1885 974)"
|
className=""
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
|
transform="translate(-1885 974)"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1885 -974)"
|
||||||
|
xlinkHref="#R"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgba(73, 73, 73, 1)"
|
fill="rgba(73, 73, 73, 1)"
|
||||||
transform="translate(1885 -974)"
|
transform="translate(1888 -971)"
|
||||||
xlinkHref="#R"
|
xlinkHref="#S"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgba(73, 73, 73, 1)"
|
|
||||||
transform="translate(1888 -971)"
|
|
||||||
xlinkHref="#S"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
id="R"
|
||||||
id="R"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="S"
|
||||||
id="S"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</p>
|
</p>
|
||||||
@ -1950,23 +2049,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Tags metadata=[] /> without throwing 1`] = `
|
exports[`renders <Tags metadata=[] /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1994,62 +2093,95 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1885 974)"
|
className=""
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
|
transform="translate(-1885 974)"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1885 -974)"
|
||||||
|
xlinkHref="#R"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgba(73, 73, 73, 1)"
|
fill="rgba(73, 73, 73, 1)"
|
||||||
transform="translate(1885 -974)"
|
transform="translate(1888 -971)"
|
||||||
xlinkHref="#R"
|
xlinkHref="#S"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgba(73, 73, 73, 1)"
|
|
||||||
transform="translate(1888 -971)"
|
|
||||||
xlinkHref="#S"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
id="R"
|
||||||
id="R"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="S"
|
||||||
id="S"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</p>
|
</p>
|
||||||
@ -2098,23 +2230,23 @@ Array [
|
|||||||
|
|
||||||
exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
|
exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
|
||||||
Array [
|
Array [
|
||||||
.c2 {
|
.c3 {
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 + p,
|
.c3 + p,
|
||||||
.c2 + small,
|
.c3 + small,
|
||||||
.c2 + h1,
|
.c3 + h1,
|
||||||
.c2 + h2,
|
.c3 + h2,
|
||||||
.c2 + label,
|
.c3 + label,
|
||||||
.c2 + h3,
|
.c3 + h3,
|
||||||
.c2 + h4,
|
.c3 + h4,
|
||||||
.c2 + h5,
|
.c3 + h5,
|
||||||
.c2 + div,
|
.c3 + div,
|
||||||
.c2 + span {
|
.c3 + span {
|
||||||
padding-bottom: 2.25rem;
|
padding-bottom: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2142,62 +2274,95 @@ Array [
|
|||||||
align-content: stretch;
|
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
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c1"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
className=""
|
className="c2"
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1885 974)"
|
className=""
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
|
transform="translate(-1885 974)"
|
||||||
|
>
|
||||||
<g>
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgba(73, 73, 73, 1)"
|
||||||
|
transform="translate(1885 -974)"
|
||||||
|
xlinkHref="#R"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgba(73, 73, 73, 1)"
|
fill="rgba(73, 73, 73, 1)"
|
||||||
transform="translate(1885 -974)"
|
transform="translate(1888 -971)"
|
||||||
xlinkHref="#R"
|
xlinkHref="#S"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgba(73, 73, 73, 1)"
|
|
||||||
transform="translate(1888 -971)"
|
|
||||||
xlinkHref="#S"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
id="R"
|
||||||
id="R"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="S"
|
||||||
id="S"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="c2"
|
className="c3"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</p>
|
</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 Tags from '@containers/create-instance/tags';
|
||||||
import Package from '@containers/create-instance/package';
|
import Package from '@containers/create-instance/package';
|
||||||
import Networks from '@containers/create-instance/networks';
|
import Networks from '@containers/create-instance/networks';
|
||||||
|
import CNS from '@containers/create-instance/cns';
|
||||||
|
|
||||||
export default ({ step, ...props }) => (
|
export default ({ step, ...props }) => (
|
||||||
<ViewContainer>
|
<ViewContainer>
|
||||||
@ -33,5 +34,8 @@ export default ({ step, ...props }) => (
|
|||||||
<Margin bottom={4}>
|
<Margin bottom={4}>
|
||||||
<Networks {...props} expanded={step === 'networks'} />
|
<Networks {...props} expanded={step === 'networks'} />
|
||||||
</Margin>
|
</Margin>
|
||||||
|
<Margin bottom={4}>
|
||||||
|
<CNS {...props} expanded={step === 'cns'} />
|
||||||
|
</Margin>
|
||||||
</ViewContainer>
|
</ViewContainer>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -389,7 +389,7 @@ exports[`renders <List /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1395,7 +1395,7 @@ exports[`renders <List error /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -2456,7 +2456,7 @@ exports[`renders <List instances /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -4534,7 +4534,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -7155,7 +7155,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -9985,7 +9985,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -11891,7 +11891,7 @@ exports[`renders <List loading /> without throwing 1`] = `
|
|||||||
color: rgb(250,250,250);
|
color: rgb(250,250,250);
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
|
|||||||
@ -278,7 +278,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1318,7 +1318,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1442,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
@ -2226,7 +2226,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -2857,7 +2857,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
|
|||||||
color: rgb(250,250,250);
|
color: rgb(250,250,250);
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -4115,7 +4115,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -4239,7 +4239,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
|
|||||||
@ -1558,7 +1558,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -3930,7 +3930,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|||||||
@ -278,7 +278,7 @@ exports[`renders <Tags /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -1327,7 +1327,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -2191,7 +2191,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -3242,7 +3242,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -4742,7 +4742,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -5618,7 +5618,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -6194,7 +6194,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
|
|||||||
color: rgb(250,250,250);
|
color: rgb(250,250,250);
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -6719,7 +6719,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
|||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
border: 0.0625rem solid rgb(216,216,216);
|
border: 0.0625rem solid rgb(216,216,216);
|
||||||
color: rgba(73,73,73,1);
|
color: rgba(73,73,73,1);
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
@ -6992,9 +6992,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
|||||||
className="c20"
|
className="c20"
|
||||||
onClick={undefined}
|
onClick={undefined}
|
||||||
>
|
>
|
||||||
name1
|
name1: value1
|
||||||
:
|
|
||||||
value1
|
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -7008,9 +7006,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
|||||||
className="c20"
|
className="c20"
|
||||||
onClick={undefined}
|
onClick={undefined}
|
||||||
>
|
>
|
||||||
name2
|
name2: value2
|
||||||
:
|
|
||||||
value2
|
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -7024,9 +7020,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
|||||||
className="c20"
|
className="c20"
|
||||||
onClick={undefined}
|
onClick={undefined}
|
||||||
>
|
>
|
||||||
name3
|
name3: value3
|
||||||
:
|
|
||||||
value3
|
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import remcalc from 'remcalc';
|
|||||||
|
|
||||||
export default ({ theme }) => css`
|
export default ({ theme }) => css`
|
||||||
@import url('${theme.font.href()}');
|
@import url('${theme.font.href()}');
|
||||||
|
@import url('${theme.monoSpaceFont.href()}');
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
@ -10,9 +11,8 @@ export default ({ theme }) => css`
|
|||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
font-display: optional;
|
font-display: optional;
|
||||||
font-family: ${
|
font-family: ${theme.font
|
||||||
theme.font.family
|
.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
||||||
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
|
||||||
font-weight: ${theme.font.weight.normal};
|
font-weight: ${theme.font.weight.normal};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -92,8 +92,28 @@ const style = css`
|
|||||||
width: ${remcalc(120)}
|
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')`
|
${is('fluid')`
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('xSmall')`
|
${is('xSmall')`
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import is from 'styled-is';
|
import is from 'styled-is';
|
||||||
|
|
||||||
@ -30,16 +30,29 @@ const Tag = styled.li`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
|
${is('active')`
|
||||||
|
border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
|
||||||
|
background: rgba(59, 70, 204, .1)
|
||||||
|
`};
|
||||||
|
|
||||||
${is('onClick')`
|
${is('onClick')`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default ({ children, onRemoveClick, ...rest }) => (
|
export default withTheme(
|
||||||
<Container>
|
({ theme, children, active, onRemoveClick, ...rest }) => (
|
||||||
<Tag {...rest}>
|
<Container>
|
||||||
{children}
|
<Tag active={active} {...rest}>
|
||||||
{onRemoveClick ? <CloseIcon disabled onClick={onRemoveClick} /> : null}
|
{children}
|
||||||
</Tag>
|
{onRemoveClick ? (
|
||||||
</Container>
|
<CloseIcon
|
||||||
|
fill={active ? theme.primaryActive : theme.text}
|
||||||
|
disabled
|
||||||
|
onClick={onRemoveClick}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Tag>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,10 +1,18 @@
|
|||||||
import { Small } from 'normalized-styled-components';
|
import { Small } from 'normalized-styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
import is, { isNot } from 'styled-is';
|
||||||
|
|
||||||
export default Small.extend`
|
export default Small.extend`
|
||||||
color: ${props => props.theme.text};
|
color: ${props => props.theme.text};
|
||||||
|
|
||||||
line-height: ${remcalc(18)};
|
line-height: ${remcalc(18)};
|
||||||
font-size: ${remcalc(13)};
|
font-size: ${remcalc(13)};
|
||||||
padding-bottom: ${remcalc(12)};
|
|
||||||
|
${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,
|
textMuted: base.secondary,
|
||||||
family: '"Libre Franklin"',
|
family: '"Libre Franklin"',
|
||||||
href: () =>
|
href: () =>
|
||||||
`${document.location.protocol}//${
|
`${document.location.protocol}//${document.location
|
||||||
document.location.host
|
.host}/fonts/css?family=Libre+Franklin:400,500,600`,
|
||||||
}/fonts/css?family=Libre+Franklin:400,500,600`,
|
|
||||||
weight: {
|
weight: {
|
||||||
semibold: 600,
|
semibold: 600,
|
||||||
medium: 500,
|
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 ********************************* */
|
/** ******************************** INACTIVE ********************************* */
|
||||||
|
|
||||||
export const inactive = {
|
export const inactive = {
|
||||||
@ -139,6 +151,7 @@ export const shadows = {
|
|||||||
export default {
|
export default {
|
||||||
...base,
|
...base,
|
||||||
font,
|
font,
|
||||||
|
monoSpaceFont,
|
||||||
inactive,
|
inactive,
|
||||||
notifications,
|
notifications,
|
||||||
inputError,
|
inputError,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user