From 4cf837d56a7ec639d3bedf4b585d961c69f59458 Mon Sep 17 00:00:00 2001
From: Alex <alex-ju@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:00:03 +0000
Subject: [PATCH] UI: HDS adoption replace footer element (#24191)

* Replace footer with `Hds::AppFooter`

* Remove unused `.footer` styles

* Add changelog entry

* Use `doc-link` helper for 'Documentation' link
---
 changelog/24191.txt            |  3 +++
 ui/app/styles/core.scss        |  1 -
 ui/app/styles/core/footer.scss | 20 -----------------
 ui/app/templates/vault.hbs     | 39 +++++++++++++---------------------
 4 files changed, 18 insertions(+), 45 deletions(-)
 create mode 100644 changelog/24191.txt
 delete mode 100644 ui/app/styles/core/footer.scss

diff --git a/changelog/24191.txt b/changelog/24191.txt
new file mode 100644
index 0000000000..2fe98e926d
--- /dev/null
+++ b/changelog/24191.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Implement Helios Design System footer component
+```
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 92d50091f6..eefc125be3 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -30,7 +30,6 @@
 @import './core/control';
 @import './core/field';
 @import './core/file';
-@import './core/footer';
 @import './core/inputs';
 @import './core/json-diff-patch';
 @import './core/label';
diff --git a/ui/app/styles/core/footer.scss b/ui/app/styles/core/footer.scss
deleted file mode 100644
index c3a193c309..0000000000
--- a/ui/app/styles/core/footer.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-.footer {
-  background-color: transparent;
-  border-top: $base-border;
-  padding: $spacing-24 $spacing-20;
-  margin-top: auto;
-
-  span:not(:first-child) {
-    display: inline-block;
-    padding: 0 0.5rem;
-
-    @include until($mobile) {
-      display: none;
-    }
-  }
-}
diff --git a/ui/app/templates/vault.hbs b/ui/app/templates/vault.hbs
index 0c3fd74bc2..3a72ea2d85 100644
--- a/ui/app/templates/vault.hbs
+++ b/ui/app/templates/vault.hbs
@@ -4,32 +4,23 @@
 ~}}
 
 {{outlet}}
-<footer class="footer has-text-grey has-text-centered">
-  <span class="is-inline-block">
-    <Icon @name="hashicorp" aria-hidden="true" class="has-text-grey-light" />
-    &copy;
-    {{date-format (now) "yyyy"}}
-    HashiCorp
-  </span>
-  <span>
-    <ExternalLink @href={{changelog-url-for this.auth.activeCluster.leaderNode.version}} class="link has-text-grey">
-      Vault
-      {{this.auth.activeCluster.leaderNode.version}}
-    </ExternalLink>
-  </span>
+
+<Hds::AppFooter as |AF|>
+  <AF.Link @href={{changelog-url-for this.auth.activeCluster.leaderNode.version}}>
+    Vault
+    {{this.auth.activeCluster.leaderNode.version}}
+  </AF.Link>
   {{#if (is-version "OSS")}}
-    <span>
-      <ExternalLink @href="https://hashicorp.com/products/vault/trial?source=vaultui" class="link has-text-grey">
-        Upgrade to Vault Enterprise
-      </ExternalLink>
-    </span>
+    <AF.Link @href="https://hashicorp.com/products/vault/trial?source=vaultui">
+      Upgrade to Vault Enterprise
+    </AF.Link>
   {{/if}}
-  <span>
-    <DocLink @path="/vault" class="has-text-grey">
-      Documentation
-    </DocLink>
-  </span>
-</footer>
+  <AF.Link @href={{doc-link "/vault"}}>
+    Documentation
+  </AF.Link>
+  <AF.LegalLinks />
+</Hds::AppFooter>
+
 {{#if (eq this.env "development")}}
   <div class="env-banner level development">
     <div class="level-item notification">