chore(ui-toolkit): add tertiary button

.gitignore

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

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

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

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

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

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

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

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

@@ -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 {
+      .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-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 {
+        .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-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 {
+          .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-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 {
+      .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-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 {
+        .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-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 {
+          .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-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]}

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

@@ -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;

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

@@ -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;

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

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

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

@@ -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;

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

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

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

@@ -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;

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

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

packages/ui-toolkit/src/button/index.js

@@ -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 { borderRadius } from '../boxes';
-import paperEffect from '../paper-effect';
 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.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};
-    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};
+      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')`
     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};
     }
-  `}
+  `} ${is('rect')`
-
-  ${isOr('rect', 'tertiary')`
     border-radius: 0;
-  `}
+  `};
 `;
 
 const StyledButton = NButton.extend`
   min-width: ${remcalc(120)};
-  ${style}
+  ${style} & + button {
-
-  & + 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 = {

packages/ui-toolkit/src/button/usage.md

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

packages/ui-toolkit/src/card/title.js

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

packages/ui-toolkit/src/message/Readme.md

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

packages/ui-toolkit/src/message/index.js

@@ -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 =>
+  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`
@@ -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;

packages/ui-toolkit/src/theme/index.js

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

packages/ui-toolkit/styleguide.config.js

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