1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 07:10:05 +02:00

chore(ui-toolkit): add tertiary button

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

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

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: ;
}

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}

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}

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,18 +632,7 @@ 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 {
.c3 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -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,18 +710,7 @@ 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 {
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -756,30 +745,30 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0;
}
.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: ;
}
<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;
font-weight: bold;
display: block;
color: ;
}
.c2 {
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -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,18 +2000,7 @@ 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 {
.c3 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -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,18 +2078,7 @@ 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 {
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -2122,30 +2113,30 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0;
}
.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: ;
}
<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;
font-weight: bold;
display: block;
color: ;
}
.c2 {
.c2 {
font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@ -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]}

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;

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;

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]}

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;

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]}

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;

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>

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 = {

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>
```

View File

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

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"/>
```

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;

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

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'
]
},
{