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:
parent
6aa2725cc8
commit
d0e4bcd27e
1
.gitignore
vendored
1
.gitignore
vendored
@ -158,6 +158,7 @@ _todo
|
||||
packages/*/dist
|
||||
packages/*/buid
|
||||
packages/ui-toolkit/styleguide/
|
||||
packages/ui-toolkit/.snapguidist/
|
||||
packages/*/package-lock.json
|
||||
|
||||
_env
|
||||
|
@ -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: ;
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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]}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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]}
|
||||
|
@ -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;
|
||||
|
@ -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]}
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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 = {
|
||||
|
@ -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>
|
||||
```
|
||||
|
||||
|
@ -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
17
packages/ui-toolkit/src/message/Readme.md
Normal 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"/>
|
||||
```
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
]
|
||||
},
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user