Deprecate: vf-box (#1680)

Deprecates `vf-box`. Most use cases should now use the `vf-card` component. A new layout-specific `vf-box` may be made in the future.

Closes #1667

components/vf-banner/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.9.1
+
+* `--inline` variant Nunjucks template file cleanup.
+
 ### 1.9.0
 
 * Correct "tertary" typo in "vf-button--tertiary".

components/vf-banner/vf-banner--inline.njk

@@ -1,5 +1,4 @@
-<!-- <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. -->
-
+<!-- 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. -->
 <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="{{ banner__inline_href }}" class="vf-link">Complete our quick survey</a> to help us make it better.</p>

components/vf-box/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.4.0
+
+* Deprecates `vf-box`. Most use cases should now use the `vf-card` component. A new layout-specific `vf-box` may be made in the future.
+
 ### 2.3.3
 
 * Repeat release of 2.3.2 for dependency linkage.

components/vf-box/README.md

@@ -4,10 +4,12 @@
 
 ## About
 
-The `vf-box` layout container can add spacing, a background color, a border, and text colours to an area of content.
+This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="https://stable.visual-framework.dev/components/vf-card">vf-card</a> component. A new layout-specific `vf-box` may be made in the future.
 
 ## Usage
 
+The `vf-box` layout container can add spacing, a background color, a border, and text colours to an area of content.
+
 A `vf-box` can be used in all layout components (`vf-grid`, `vf-stack`, `embl-grid`) and also inside of `vf-content`.
 
 For now `vf-box` is only designed to accept a heading and text (both have classes). The text node – `vf-box__text` can also accept a link which will inherit the text colour.

components/vf-box/vf-box.config.yml

@@ -1,8 +1,10 @@
 title: Box
 label: Box
-status: live
+status: deprecated
+component-type: deprecated
+hidden: true
 context:
-  component-type: block
+  component-type: deprecated
 variants:
   - name: default
     hidden: true
@@ -109,21 +111,21 @@ variants:
       box_text: This is some more content that would be in the box.
       variant: normal
       theme: primary
-      box_spacing: 400      
+      box_spacing: 400
   - name: "600"
     context:
       box_heading: Did you know?
       box_text: This is some more content that would be in the box.
       variant: normal
       theme: primary
-      box_spacing: 600      
+      box_spacing: 600
   - name: "800"
     context:
       box_heading: Did you know?
       box_text: This is some more content that would be in the box.
       variant: normal
       theme: primary
-      box_spacing: 800                  
+      box_spacing: 800
   - name: easy primary is a link
     context:
       box_href: "JavaScript:Void(0);"

tools/vf-component-library/src/site/guidance/deprecating-components.njk

@@ -30,9 +30,9 @@ Here's what we need to make sure we do:
 1. Update `README.md` with:
     - why the component has been deprecated
     - what component(s) developers should instead use
-    - Use this template
+    - Use this template in the README.md file
     ```html
-    This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#"new</a> component.</h2> in the README.md file.
+    This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#">new</a> component.
     ```
 1. Publish on npm
     - see [`PUBLISHING.md`](https://github.com/visual-framework/vf-core/blob/develop/PUBLISHING.md)
@@ -45,7 +45,7 @@ Here's what we need to make sure we do:
 1. Add a note to the `--variant.njk`
     - Use this template
     ```html
-    <h2>This variant has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#"new</a> component.</h2> in the README.md file.
+    This variant has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#">new</a> component.
     ```
 1. Wrap the relevant Sass in `html:not(.vf-disable-deprecated) {`
 1. Hide the variant tab in `.config.yml`: