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/*/dist
packages/*/buid packages/*/buid
packages/ui-toolkit/styleguide/ packages/ui-toolkit/styleguide/
packages/ui-toolkit/.snapguidist/
packages/*/package-lock.json packages/*/package-lock.json
_env _env

View File

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

View File

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

View File

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

View File

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

View File

@ -47,7 +47,7 @@ exports[`renders <Error /> without throwing 1`] = `
<div <div
className="c0" className="c0"
type="ERROR" type="MESSAGE"
/> />
.c2 { .c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; 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 <div
className="c0" className="c0"
type="WARNING" type="MESSAGE"
/> />
.c2 { .c2 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; 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-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block; display: block;
color: ; color: ;
float: right; float: right;
@ -654,7 +653,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block; display: block;
color: ; color: ;
float: right; float: right;
@ -835,7 +833,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block; display: block;
color: ; color: ;
float: right; float: right;
@ -885,7 +882,6 @@ exports[`renders <Scale /> without throwing 1`] = `
font-size: 0.9375rem; font-size: 0.9375rem;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-weight: bold;
display: block; display: block;
color: ; color: ;
float: right; float: right;
@ -1098,7 +1094,7 @@ exports[`renders <Scale /> without throwing 1`] = `
<input <input
className="c0 c1" className="c0 c1"
id="bSMDdQ" id="BhIyi"
name="replicas" name="replicas"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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