ui: Notice component (#9011)

Add simple Notice template only glimmer component

ui/packages/consul-ui/app/components/anonymous/index.hbs

@@ -0,0 +1 @@
+{{yield}}

ui/packages/consul-ui/app/components/anonymous/index.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});

ui/packages/consul-ui/app/components/notice/index.hbs

@@ -0,0 +1,9 @@
+<div
+  class="notice {{@type}}"
+  ...attributes
+>
+{{yield (hash
+  Header=(component 'anonymous' tagName="header")
+  Body=(component 'anonymous')
+)}}
+</div>

ui/packages/consul-ui/app/styles/base/components/notice/layout.scss

@@ -1,13 +1,24 @@
 %notice {
   position: relative;
-  padding: 1em;
+  padding: 0.8rem;
+}
+%notice header {
+  margin-bottom: 0.1rem;
+}
+%notice header > * {
+  margin-bottom: 0;
+}
+%notice p {
+  margin-bottom: 0.3rem;
+  line-height: 1.4;
 }
 /* this is probably skin */
 %notice {
-  padding-left: calc(1em + 32px);
+  padding-left: calc(0.8rem + 1.4rem);
 }
 %notice::before {
   position: absolute;
-  left: 16px;
+  top: 0.8rem;
-  top: 16px;
+  left: 0.6rem;
+  font-size: 1rem;
 }

ui/packages/consul-ui/app/styles/base/components/notice/skin.scss

@@ -1,6 +1,10 @@
 %notice {
   border-radius: $decor-radius-100;
-  border-width: 1px;
+  border: 1px solid;
+}
+%notice p:last-child a:only-child {
+  @extend %p3;
+  font-weight: $typo-weight-bold;
 }
 %notice-success,
 %notice-info,
@@ -16,7 +20,12 @@
   @extend %frame-green-500;
 }
 %notice-info {
-  @extend %frame-blue-500;
+  border-color: $blue-100;
+  background-color: $gray-010;
+  color: $black;
+}
+%notice-info header * {
+  color: $blue-700;
 }
 %notice-highlight {
   @extend %frame-gray-800;

ui/packages/consul-ui/app/styles/components/notice.scss

@@ -32,3 +32,6 @@
 .notice.policy-management {
   @extend %notice-highlight;
 }
+.notice.crd::before {
+  @extend %with-logo-kubernetes-color-icon;
+}