Notice refactor

browser.json

@@ -95,6 +95,11 @@
       "to": "./icon[ds-4].js",
       "if-flag": "ds-4"
     },
+    {
+      "from": "./inline-notice.js",
+      "to": "./inline-notice[ds-4].js",
+      "if-flag": "ds-4"
+    },
     {
       "from": "./label.js",
       "to": "./label[ds-4].js",
@@ -125,10 +130,9 @@
       "to": "./menu-button[ds-4].js",
       "if-flag": "ds-4"
     },
-
     {
-      "from": "./notice.js",
-      "to": "./notice[ds-4].js",
+      "from": "./page-notice.js",
+      "to": "./page-notice[ds-4].js",
       "if-flag": "ds-4"
     },
     {
@@ -141,6 +145,11 @@
       "to": "./radio[ds-4].js",
       "if-flag": "ds-4"
     },
+    {
+      "from": "./section-notice.js",
+      "to": "./section-notice[ds-4].js",
+      "if-flag": "ds-4"
+    },
     {
       "from": "./section-title.js",
       "to": "./section-title[ds-4].js",
@@ -200,6 +209,11 @@
       "to": "./utility[ds-4].js",
       "if-flag": "ds-4"
     },
+    {
+      "from": "./window-notice.js",
+      "to": "./window-notice[ds-4].js",
+      "if-flag": "ds-4"
+    },
     {
       "from": "./wizard-stepper.js",
       "to": "./wizard-stepper[ds-4].js",

dist/inline-notice/ds4/inline-notice.css

@@ -0,0 +1,24 @@
+.inline-notice {
+  margin: 8px 0;
+}
+div.inline-notice {
+  display: -webkit-box;
+  display: flex;
+}
+span.inline-notice {
+  display: -webkit-inline-box;
+  display: inline-flex;
+}
+.inline-notice__header {
+  -webkit-box-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: flex;
+  margin-right: 8px;
+}
+.inline-notice p {
+  margin: 4px 0;
+}
+.inline-notice p:first-of-type {
+  font-weight: bold;
+}

dist/inline-notice/ds6/inline-notice.css

@@ -0,0 +1,24 @@
+.inline-notice {
+  margin: 8px 0;
+}
+div.inline-notice {
+  display: -webkit-box;
+  display: flex;
+}
+span.inline-notice {
+  display: -webkit-inline-box;
+  display: inline-flex;
+}
+.inline-notice__header {
+  -webkit-box-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: flex;
+  margin-right: 8px;
+}
+.inline-notice p {
+  margin: 4px 0;
+}
+.inline-notice p:first-of-type {
+  font-weight: bold;
+}

dist/notice/ds4/notice.css

@@ -61,136 +61,13 @@
   color: var(--window-notice-main-color, #5ba71b);
   margin: 20px 0 0;
 }
-.page-notice,
-.section-notice {
-  -webkit-box-align: stretch;
-          align-items: stretch;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  flex-wrap: wrap;
-  font-size: 0.875rem;
-  margin: 8px 0;
-}
-.page-notice > a.fake-btn,
-.section-notice > a.fake-btn,
-.page-notice > button.btn,
-.section-notice > button.btn {
-  color: #333;
-  color: var(--page-notice-button-color, #333);
-  border-color: currentColor;
-  margin: 0 16px 16px;
-  width: 100%;
-}
-.section-notice {
-  background-color: #eee;
-  background-color: var(--section-notice-default-background-color, #eee);
-}
-div[role="region"].page-notice,
-div[role="region"].section-notice,
-section.page-notice,
-section.section-notice {
-  display: -webkit-box;
-  display: flex;
-  margin: 8px 0;
-}
-span[role="region"].page-notice,
-span[role="region"].section-notice {
-  display: -webkit-inline-box;
-  display: inline-flex;
-}
-.page-notice__status svg.icon {
-  display: -webkit-box;
-  display: flex;
-  margin: 0;
-}
 .window-notice h2 svg.icon {
   display: block;
   font-size: 0;
   height: 35px;
   margin: 0 auto;
   width: 35px;
 }
-.page-notice__title {
-  font-weight: bold;
-}
-.page-notice__content,
-.section-notice__content {
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-flex: 1;
-          flex: 1;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-          flex-direction: column;
-  -webkit-box-pack: center;
-          justify-content: center;
-  margin: 16px;
-  width: 100%;
-  /* stylelint-disable */
-  -ms-word-break: break-all;
-  word-break: break-all;
-  /* Non standard for WebKit */
-  word-break: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-      hyphens: auto;
-  /* stylelint-enable */
-}
-.page-notice__status,
-.section-notice__status {
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
-  padding: 16px 0 16px 16px;
-}
-.page-notice__content p,
-.section-notice__content p {
-  margin: 0;
-}
-.page-notice__content {
-  font-size: 1rem;
-}
-.page-notice__close,
-.section-notice__close {
-  height: 48px;
-  width: 50px;
-}
-.page-notice--fluid,
-.section-notice--fluid {
-  width: 100%;
-}
-.page-notice--celebration .page-notice__title {
-  display: inline-block;
-  font-size: 1.25rem;
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-.page-notice__close,
-.section-notice__close,
-button.page-notice__close,
-button.section-notice__close {
-  background: none;
-  border: 0;
-}
-a.page-notice,
-a.section-notice,
-button.page-notice,
-button.section-notice {
-  display: -webkit-box;
-  display: flex;
-}
-a.page-notice,
-a.section-notice {
-  color: inherit;
-  text-decoration: none;
-}
 div.inline-notice {
   display: -webkit-box;
   display: flex;
@@ -226,100 +103,3 @@ span.inline-notice {
 .inline-notice__content {
   margin-left: 8px;
 }
-.page-notice--confirmation,
-.page-notice--celebration,
-.section-notice--confirmation {
-  background-color: #fff;
-  background-color: var(--page-notice-confirmation-background-color, #fff);
-  border-color: currentColor;
-  border-color: var(--page-notice-confirmation-border-color, currentColor);
-}
-.page-notice--attention,
-.section-notice--attention {
-  background-color: #fff;
-  background-color: var(--page-notice-attention-background-color, #fff);
-  border-color: currentColor;
-  border-color: var(--page-notice-attention-border-color, currentColor);
-}
-.page-notice--information,
-.section-notice--information {
-  background-color: #fff;
-  background-color: var(--page-notice-information-background-color, #fff);
-  border-color: currentColor;
-  border-color: var(--page-notice-information-border-color, currentColor);
-}
-.page-notice--attention,
-.section-notice--attention,
-a.page-notice--attention,
-a.section-notice--attention {
-  color: #dd1e31;
-}
-.page-notice--confirmation,
-.page-notice--attention,
-.page-notice--information,
-.page-notice--celebration {
-  border-style: solid;
-  border-width: 0;
-}
-/* LARGE SCREENS */
-@media (min-width: 601px) {
-  section.page-notice,
-  section.section-notice,
-  div[role="region"].page-notice,
-  div[role="region"].section-notice {
-    flex-wrap: nowrap;
-    margin: 16px 0;
-  }
-  section.page-notice > button.btn,
-  section.section-notice > button.btn,
-  div[role="region"].page-notice > button.btn,
-  div[role="region"].section-notice > button.btn,
-  section.page-notice > a.fake-btn,
-  section.section-notice > a.fake-btn,
-  div[role="region"].page-notice > a.fake-btn,
-  div[role="region"].section-notice > a.fake-btn {
-    margin: auto 16px;
-    width: auto;
-  }
-  .page-notice--celebration .page-notice__status {
-    -webkit-box-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: flex;
-    padding: 24px 0 24px 24px;
-  }
-  .page-notice--celebration .page-notice__title {
-    font-size: 1.875rem;
-    margin-bottom: 8px;
-  }
-  .page-notice--celebration .page-notice__content {
-    margin: 24px;
-  }
-}
-.page-notice--information,
-.page-notice--confirmation,
-.page-notice--attention,
-.page-notice--celebration {
-  border-bottom: 1px solid #ccc;
-  border-top: 1px solid #ccc;
-}
-.section-notice--information,
-.section-notice--confirmation,
-.section-notice--attention {
-  border: 1px solid #ccc;
-}
-@media (min-width: 601px) {
-  .page-notice {
-    border: 1px solid #ccc;
-  }
-  .page-notice--information {
-    border-top: 2px solid #0654ba;
-  }
-  .page-notice--confirmation,
-  .page-notice--celebration {
-    border-top: 2px solid #5ba71b;
-  }
-  .page-notice--attention {
-    border-top: 2px solid #dd1e31;
-  }
-}