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

chore(ui-toolkit): add tertiary button

Browse Source
This commit is contained in:
Sara Vieira 2017-09-08 13:01:37 +01:00 committed by Sérgio Ramos
parent 6aa2725cc8
commit d0e4bcd27e
19 changed files with 235 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -158,6 +158,7 @@ _todo
packages/*/dist
packages/*/buid
packages/ui-toolkit/styleguide/
packages/ui-toolkit/.snapguidist/
packages/*/package-lock.json
_env

12
packages/cp-frontend/test/unit/components/instances/__snapshots__/list-item.js.snap
View File

@ -7,7 +7,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -157,7 +156,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -247,7 +245,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -362,7 +359,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -574,7 +570,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -635,7 +630,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -686,7 +680,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -778,7 +771,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -804,7 +796,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -908,7 +899,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -961,7 +951,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -1007,7 +996,6 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}

2
packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
View File

@ -1534,7 +1534,7 @@ exports[`renders <TestEnvironmentForm /> without throwing 1`] = `
<input
className="c0 c1"
id="bFTzdX"
id="iZvNA"
placeholder="Filename including extension…"
type="text"
value={undefined}

2
packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap
View File

@ -643,7 +643,7 @@ exports[`renders <Files /> without throwing 1`] = `
<input
className="c0 c1"
id="ceBOoS"
id="paxzb"
placeholder="Filename including extension…"
type="text"
value={undefined}

300
packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap
View File

@ -254,17 +254,6 @@ exports[`renders <Name /> without throwing 1`] = `
padding-left: 0.5rem;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c5 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -317,13 +306,24 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -409,17 +409,6 @@ exports[`renders <Name /> without throwing 1`] = `
padding-left: 0.5rem;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c5 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -472,13 +461,24 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -525,17 +525,6 @@ exports[`renders <Name /> without throwing 1`] = `
padding-left: 0.5rem;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c4 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -588,13 +577,24 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -632,17 +632,6 @@ exports[`renders <Name /> without throwing 1`] = `
<div
className="c0"
>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c3 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -695,13 +684,24 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -710,17 +710,6 @@ exports[`renders <Name /> without throwing 1`] = `
className="c0"
style={undefined}
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -756,29 +745,29 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
<div>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
}
<div>
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -787,13 +776,24 @@ exports[`renders <Name /> without throwing 1`] = `
font-size: 0.875rem;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -808,13 +808,15 @@ exports[`renders <Name /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
<label
className="c0"
htmlFor="GWMJb"
>
Name the new deployment group
</label>
@ -861,7 +863,7 @@ exports[`renders <Name /> without throwing 1`] = `
<input
className="c0"
id="YBcpH"
id="GWMJb"
name="name"
onBlur={[Function]}
onChange={[Function]}
@ -1620,17 +1622,6 @@ exports[`renders <Name /> without throwing 2`] = `
padding-left: 0.5rem;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c5 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -1683,13 +1674,24 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -1775,17 +1777,6 @@ exports[`renders <Name /> without throwing 2`] = `
padding-left: 0.5rem;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c5 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -1838,13 +1829,24 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -1891,17 +1893,6 @@ exports[`renders <Name /> without throwing 2`] = `
padding-left: 0.5rem;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c4 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -1954,13 +1945,24 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.c3 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -1998,17 +2000,6 @@ exports[`renders <Name /> without throwing 2`] = `
<div
className="c0"
>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c3 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -2061,13 +2052,24 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -2076,17 +2078,6 @@ exports[`renders <Name /> without throwing 2`] = `
className="c0"
style={undefined}
>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -2122,29 +2113,29 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
<div>
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
}
<div>
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@ -2153,13 +2144,24 @@ exports[`renders <Name /> without throwing 2`] = `
font-size: 0.875rem;
}
.c1 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
.c0 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
}
@ -2174,13 +2176,15 @@ exports[`renders <Name /> without throwing 2`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
margin-right: 0.75rem;
font-weight: bold;
}
<label
className="c0"
htmlFor="cCrMLd"
>
Name the new deployment group
</label>
@ -2227,7 +2231,7 @@ exports[`renders <Name /> without throwing 2`] = `
<input
className="c0"
id="BIrjh"
id="cCrMLd"
name="name"
onBlur={[Function]}
onChange={[Function]}

2
packages/cp-frontend/test/unit/components/messaging/__snapshots__/error.js.snap
View File

@ -47,7 +47,7 @@ exports[`renders <Error /> without throwing 1`] = `
<div
className="c0"
type="ERROR"
type="MESSAGE"
/>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;

2
packages/cp-frontend/test/unit/components/messaging/__snapshots__/warning.js.snap
View File

@ -47,7 +47,7 @@ exports[`renders <Warning /> without throwing 1`] = `
<div
className="c0"
type="WARNING"
type="MESSAGE"
/>
.c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;

6
packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap
View File

@ -421,7 +421,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -654,7 +653,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -835,7 +833,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -885,7 +882,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -1098,7 +1094,7 @@ exports[`renders <Scale /> without throwing 1`] = `
<input
className="c0 c1"
id="bSMDdQ"
id="BhIyi"
name="replicas"
onBlur={[Function]}
onChange={[Function]}

6
packages/cp-frontend/test/unit/components/services/__snapshots__/list-item.js.snap
View File

@ -374,7 +374,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -781,7 +780,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1044,7 +1042,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1106,7 +1103,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1158,7 +1154,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1241,7 +1236,6 @@ exports[`renders <ServiceListItem /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;

8
packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap
View File

@ -559,7 +559,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -1153,7 +1152,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -1757,7 +1755,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -1990,7 +1987,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -2171,7 +2167,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -2221,7 +2216,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
float: right;
@ -2434,7 +2428,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
<input
className="c0 c1"
id="YOGS"
id="bkfjdT"
name="replicas"
onBlur={[Function]}
onChange={[Function]}

8
packages/cp-frontend/test/unit/containers/services/__snapshots__/list.js.snap
View File

@ -374,7 +374,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -914,7 +913,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1423,7 +1421,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -1830,7 +1827,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -2093,7 +2089,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -2155,7 +2150,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -2207,7 +2201,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;
@ -2290,7 +2283,6 @@ exports[`renders <ServiceList /> without throwing 1`] = `
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
font-weight: bold;
display: block;
color: ;
display: inline-block;

12
packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap
View File

@ -1085,7 +1085,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<li
className="c0"
id="ckYfBi"
id="bQyfov"
>
.c1 {
font-family: sans-serif;
@ -1236,7 +1236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input
checked={false}
className="c0"
id="cjJOWd"
id="xbEsB"
name="service-view"
onChange={[Function]}
type="radio"
@ -1262,7 +1262,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<label
className="c0"
htmlFor="cjJOWd"
htmlFor="xbEsB"
>
List
</label>
@ -1372,7 +1372,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<li
className="c0"
id="ckYfBi"
id="bQyfov"
>
.c1 {
font-family: sans-serif;
@ -1523,7 +1523,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input
checked={false}
className="c0"
id="bVLDyd"
id="pgLYd"
name="service-view"
onChange={[Function]}
type="radio"
@ -1549,7 +1549,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<label
className="c0"
htmlFor="bVLDyd"
htmlFor="pgLYd"
>
Topology
</label>

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

@ -1,12 +1,11 @@
import React from 'react';
import remcalc from 'remcalc';
import PropTypes from 'prop-types';
import is, { isOr } from 'styled-is';
import is from 'styled-is';
import styled, { css } from 'styled-components';
import { A, Button as NButton } from 'normalized-styled-components';
import { Link } from 'react-router-dom';
import { bottomShaddow, borderRadius } from '../boxes';
import paperEffect from '../paper-effect';
import { borderRadius } from '../boxes';
import typography from '../typography';
import Baseline from '../baseline';
import StatusLoader from '../status-loader';
@ -91,38 +90,30 @@ const style = css`
background-color: ${props => props.theme.whiteActive};
border-color: ${props => props.theme.grey};
}
`}
${is('tertiary')`
color: ${props => props.theme.secondary};
background-color: ${props => props.theme.white};
`} ${is('tertiary')`
color: ${props => props.theme.tertiary};
background-color: ${props => props.theme.background};
border-color: ${props => props.theme.grey};
box-shadow: ${paperEffect};
&:focus {
background-color: ${props => props.theme.white};
border-color: ${props => props.theme.grey};
}
&:hover {
background-color: ${props => props.theme.whiteHover};
border-color: ${props => props.theme.grey};
}
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus {
background-color: ${props => props.theme.whiteActive};
border-color: ${props => props.theme.grey};
box-shadow: ${bottomShaddow};
background-color: ${props => props.theme.tertiaryActive};
color: ${props => props.theme.tertiaryActiveColor};
border-color: ${props => props.theme.tertiaryActiveColor};
}
`}
`} ${is('tertiary', 'selected')`
background-color: ${props => props.theme.tertiaryActive};
color: ${props => props.theme.tertiaryActiveColor};
border-color: ${props => props.theme.tertiaryActiveColor};
`};
${is('disabled')`
color: ${props => props.theme.grey};
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
box-shadow: ${bottomShaddow};
&:focus {
background-color: ${props => props.theme.disabled};
@ -140,18 +131,14 @@ const style = css`
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.disabled};
}
`}
${isOr('rect', 'tertiary')`
`} ${is('rect')`
border-radius: 0;
`}
`};
`;
const StyledButton = NButton.extend`
min-width: ${remcalc(120)};
${style}
& + button {
${style} & + button {
margin-left: ${remcalc(20)};
}
`;
@ -204,7 +191,11 @@ Button.propTypes = {
to: PropTypes.string,
primary: PropTypes.bool,
secondary: PropTypes.bool,
tertiary: PropTypes.bool
tertiary: PropTypes.bool,
/**
* When used, will give button an active state (Only for tertiary for now)
*/
selected: PropTypes.bool
};
Button.defaultProps = {

2
packages/ui-toolkit/src/button/usage.md
View File

@ -25,6 +25,8 @@
<Button tertiary>Inspire the tertiary</Button>
<span> </span>
<Button href='#3' tertiary>Inspire the tertiary (anchor)</Button>
<span> </span>
<Button tertiary selected>Inspire the tertiary</Button>
</span>
```

1
packages/ui-toolkit/src/card/title.js
View File

@ -60,7 +60,6 @@ const Title = ({ children, ...rest }) => {
name="card-title"
xs={collapsed ? 6 : 12}
{...rest}
name="container"
>
{_children}
</Container>

17
packages/ui-toolkit/src/message/Readme.md Normal file
View File

@ -0,0 +1,17 @@
## Success
```
<Message title="Choosing deployement data center" message="Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more"/>
```
## Error
```
<Message title="Choosing deployement data center" error message="Oh no"/>
```
## Warning
```
<Message title="Choosing deployement data center" warning message="There were some issues"/>
```

22
packages/ui-toolkit/src/message/index.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import is from 'styled-is';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import unitcalc from 'unitcalc';
@ -22,12 +23,13 @@ const StyledColor = styled.div`
left: 0;
width: ${unitcalc(6)};
height: 100%;
background-color: ${props =>
props.type === 'ERROR'
? props.theme.red
: props.type === 'WARNING'
? props.theme.orange
: props.type === 'EDUCATION' ? props.theme.green : props.theme.green};
background-color: ${props => props.theme.green};
${is('error')`
background-color: ${props => props.theme.red};
`};
${is('warning')`
background-color: ${props => props.theme.orange};
`};
`;
const StyledMessageContainer = styled.div`
@ -49,7 +51,7 @@ const StyledClose = styled(CloseButton)`
top: ${unitcalc(0.5)};
`;
const Message = ({ title, message, onCloseClick, type = 'MESSAGE' }) => {
const Message = ({ title, message, onCloseClick, ...type }) => {
const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null;
const renderClose = onCloseClick ? (
@ -58,7 +60,7 @@ const Message = ({ title, message, onCloseClick, type = 'MESSAGE' }) => {
return (
<StyledContainer>
<StyledColor type={type} />
<StyledColor {...type} />
<StyledMessageContainer>
{renderTitle}
<StyledMessage>{message}</StyledMessage>
@ -72,7 +74,9 @@ Message.propTypes = {
title: PropTypes.string,
message: PropTypes.string.isRequired,
onCloseClick: PropTypes.func,
type: PropTypes.oneOf(['ERROR', 'WARNING', 'EDUCATION', 'MESSAGE'])
error: PropTypes.boolean,
warning: PropTypes.boolean,
success: PropTypes.boolean
};
export default Message;

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

@ -35,12 +35,19 @@ const white = {
whiteActive: '#E9E9E9' // used
};
const tertiary = {
tertiary: '#363636',
tertiaryActive: 'rgba(54, 74, 205, 0.1)',
tertiaryActiveColor: '#2931C2'
};
/** ********************************** BASE *********************************** */
export const base = {
...primary,
...secondary,
...white,
...tertiary,
text: '#494949', // used
grey: '#D8D8D8', // used
disabled: '#FAFAFA', // used

3
packages/ui-toolkit/styleguide.config.js
View File

@ -69,7 +69,8 @@ module.exports = snapguidist({
'src/topology/index.js',
'src/tooltip/tooltip.js',
'src/close-button/index.js',
'src/icon-button/index.js'
'src/icon-button/index.js',
'src/message/index.js'
]
},
{