From fe2d83bc4a40b30ffc7db2c9b21795c45e58227a Mon Sep 17 00:00:00 2001
From: Bhushan Palsapure <bhushanp@ebi.ac.uk>
Date: Fri, 10 May 2024 17:42:59 +0100
Subject: [PATCH] Changed : Issue-1920 - Retired explainer component (#2040)

* Changed : Issue-1920 - Retired explainer component

* Changed : Issue-1920 - Retired explainer component
---
 components/vf-componenet-rollup/CHANGELOG.md    | 5 +++++
 components/vf-componenet-rollup/index.scss      | 2 --
 components/vf-explainer/CHANGELOG.md            | 4 ++++
 components/vf-explainer/README.md               | 3 ++-
 components/vf-explainer/vf-explainer.config.yml | 6 ++++--
 components/vf-explainer/vf-explainer.scss       | 9 +++++----
 6 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/components/vf-componenet-rollup/CHANGELOG.md b/components/vf-componenet-rollup/CHANGELOG.md
index 966b4784ca..bffc6705fe 100755
--- a/components/vf-componenet-rollup/CHANGELOG.md
+++ b/components/vf-componenet-rollup/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.4.8
+
+* Deprecated `vf-collapse` component. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1911)
+* Deprecated `vf-explainer` component. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1920)
+
 ## 1.4.7
 
 * Fixed build notices. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1936)
diff --git a/components/vf-componenet-rollup/index.scss b/components/vf-componenet-rollup/index.scss
index 490222ff6b..7b2f4d2354 100755
--- a/components/vf-componenet-rollup/index.scss
+++ b/components/vf-componenet-rollup/index.scss
@@ -51,12 +51,10 @@ button {
 
 @import 'vf-badge/vf-badge.scss';
 @import 'vf-bookmark/vf-bookmark.scss';
-@import 'vf-collapse/vf-collapse.scss';
 @import 'vf-link/vf-link.scss';
 @import 'vf-logo/vf-logo.scss';
 @import 'vf-embed/vf-embed.scss';
 @import 'embl-logo/embl-logo.scss';
-@import 'vf-explainer/vf-explainer.scss';
 @import 'vf-form/vf-form.scss';
 @import 'vf-button/vf-button.scss';
 @import 'vf-figure/vf-figure.scss';
diff --git a/components/vf-explainer/CHANGELOG.md b/components/vf-explainer/CHANGELOG.md
index 8a79079593..184ec50756 100755
--- a/components/vf-explainer/CHANGELOG.md
+++ b/components/vf-explainer/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 0.1.1
+
+* Deprecated `vf-explainer` component. `vf-details` component needs to be used instead. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1920)
+
 ### 0.1.0
 
 * initial version
diff --git a/components/vf-explainer/README.md b/components/vf-explainer/README.md
index acf9e90cff..f0ee883f35 100755
--- a/components/vf-explainer/README.md
+++ b/components/vf-explainer/README.md
@@ -4,7 +4,8 @@
 
 ## About
 
-Life science websites love a bit of jargon and complicated concepts and "explainers" help for terms like: `ORCID`, `transcript isoform`, and `lymphoblastoid cell lines`.
+This component has been <span class="vf-u-text-color--red">deprecated</span>. Please use the <a class="vf-link" href="https://stable.visual-framework.dev/components/vf-details">vf-details</a> component.
+Justification text: This component hasn't been implemented. The basic use case for providing details is supported by vf-details. For highlighting explanations we suggested that the Comms team uses vf-card.
 
 ## Usage
 
diff --git a/components/vf-explainer/vf-explainer.config.yml b/components/vf-explainer/vf-explainer.config.yml
index d1f6ad75a7..1e87aedd45 100755
--- a/components/vf-explainer/vf-explainer.config.yml
+++ b/components/vf-explainer/vf-explainer.config.yml
@@ -2,7 +2,9 @@
 title: Explainer
 # Label shown on index pages
 label: Explainer
-status: alpha
+status: deprecated
+component-type: deprecated
+hidden: true
 # The template used from /components/_previews
 #
 # Per-variant options
@@ -10,7 +12,7 @@ status: alpha
   # - name: default
   #   hidden: true
 context:
-  component-type: element
+  component-type: deprecated
   # custom-values: passed as {{custom-values}}
   # title: Title text
   # text: String of text
diff --git a/components/vf-explainer/vf-explainer.scss b/components/vf-explainer/vf-explainer.scss
index c681f1b671..da0401f32f 100755
--- a/components/vf-explainer/vf-explainer.scss
+++ b/components/vf-explainer/vf-explainer.scss
@@ -17,8 +17,9 @@
  */
 
 @import 'vf-explainer.variables.scss';
-
-.vf-explainer:before {
-  content: 'This component has not yet been implement, see the README.md for more information.';
-  display: block;
+html:not(.vf-disable-deprecated) {
+  .vf-explainer:before {
+    content: 'This component has not yet been implement, see the README.md for more information.';
+    display: block;
+  }
 }