From 45554e4e9c962c9e353b904dd5f33c768fcfa0a8 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 23 Oct 2020 09:26:32 +0100
Subject: [PATCH] ui: Notice component (#9011)

Add simple Notice template only glimmer component
---
 .../app/components/anonymous/index.hbs        |  1 +
 .../app/components/anonymous/index.js         |  5 +++++
 .../consul-ui/app/components/notice/index.hbs |  9 +++++++++
 .../styles/base/components/notice/layout.scss | 19 +++++++++++++++----
 .../styles/base/components/notice/skin.scss   | 13 +++++++++++--
 .../app/styles/components/notice.scss         |  3 +++
 6 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 ui/packages/consul-ui/app/components/anonymous/index.hbs
 create mode 100644 ui/packages/consul-ui/app/components/anonymous/index.js
 create mode 100644 ui/packages/consul-ui/app/components/notice/index.hbs

diff --git a/ui/packages/consul-ui/app/components/anonymous/index.hbs b/ui/packages/consul-ui/app/components/anonymous/index.hbs
new file mode 100644
index 0000000000..fb5c4b157d
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/anonymous/index.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/anonymous/index.js b/ui/packages/consul-ui/app/components/anonymous/index.js
new file mode 100644
index 0000000000..4798652642
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/anonymous/index.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});
diff --git a/ui/packages/consul-ui/app/components/notice/index.hbs b/ui/packages/consul-ui/app/components/notice/index.hbs
new file mode 100644
index 0000000000..f3ddfaf5d3
--- /dev/null
+++ b/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>
diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/layout.scss b/ui/packages/consul-ui/app/styles/base/components/notice/layout.scss
index be21421b7f..f7f49a9d43 100644
--- a/ui/packages/consul-ui/app/styles/base/components/notice/layout.scss
+++ b/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: 16px;
+  top: 0.8rem;
+  left: 0.6rem;
+  font-size: 1rem;
 }
diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss b/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss
index 53ce949f68..fbde9161a7 100644
--- a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss
+++ b/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;
diff --git a/ui/packages/consul-ui/app/styles/components/notice.scss b/ui/packages/consul-ui/app/styles/components/notice.scss
index 5754bbb637..7241720cc4 100644
--- a/ui/packages/consul-ui/app/styles/components/notice.scss
+++ b/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;
+}