the one that deprecates the phase variant of the banner (#1465)

* deprecates the phase variant * Typo * Typo * comments out the loud heading in the nunjucks file Co-authored-by: Ken Hawkins <khawkins98@gmail.com>
visual-framework · Mar 31, 2021 · 9f61cef · 9f61cef
1 parent 596050e
commit 9f61cef
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/components/vf-banner/CHANGELOG.md b/components/vf-banner/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.7.2
+
+* adds deprecation notices around the `--phase` variant.
+
 ### 1.7.1
 
 * changes any `set-` style functions to cleaner version

diff --git a/components/vf-banner/vf-banner--inline.njk b/components/vf-banner/vf-banner--inline.njk
@@ -1,3 +1,5 @@
+<!-- <h2>This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="./vf-banner--info/"new</a> component.</h2> in the README.md file. -->
+
 <div class="vf-banner vf-banner--phase">
   <div class="vf-banner__content">
     <p class="vf-banner__text">This is a new web page. <a href="{{ vf-banner--inline_href }}" class="vf-link">Complete our quick survey</a> to help us make it better.</p>

diff --git a/components/vf-banner/vf-banner--phase.scss b/components/vf-banner/vf-banner--phase.scss
@@ -1,28 +1,30 @@
-.vf-banner--phase {
-  background-color: $vf-phase-banner-color--background;
+html:not(.vf-disable-deprecated) {
+  @warn 'This variant has been deprecated, please use the --notice variant of `vf-banner';
 
-  margin: 16px 0;
+  .vf-banner--phase {
+    background-color: $vf-phase-banner-color--background;
 
-  .vf-banner__text,
-  [class*='vf-text'] { // as of 1.0.4 use of vf-text is not recommended and is subject to future removal
-    color: $vf-phase-banner-color--text;
-    margin: 0; // makes the text have no margin so the parent component defines the spacing
+    margin: 16px 0;
 
-    & .vf-banner__link,
-    & .vf-link {
-      color: $vf-banner-color--link;
+    .vf-banner__text,
+    [class*='vf-text'] { // as of 1.0.4 use of vf-text is not recommended and is subject to future removal
+      color: $vf-phase-banner-color--text;
+      margin: 0; // makes the text have no margin so the parent component defines the spacing
+
+      & .vf-banner__link,
+      & .vf-link {
+        color: $vf-banner-color--link;
+      }
     }
-  }
 
-  .vf-banner__content {
-    display: flex;
-  }
+    .vf-banner__content {
+      display: flex;
+    }
 
-  .vf-button {
-    @media (min-width: $vf-breakpoint--lg) {
-      margin-left: auto;
+    .vf-button {
+      @media (min-width: $vf-breakpoint--lg) {
+        margin-left: auto;
+      }
     }
   }
-
-
 }
diff --git a/components/vf-banner/vf-banner.config.yml b/components/vf-banner/vf-banner.config.yml
@@ -32,7 +32,11 @@ variants:
       banner__success: true
       banner__dismissable: true
       banner__message: Congratulations! You have made something <a class="vf-banner__link" href="JavaScript:Void(0);">awesome</a>!
-
+  - name: phase
+    hidden: true
+    status: deprecated
+    context:
+      component-type: deprecated
   - name: default
     hidden: true
   - name: inline