Issue 1956: Updated Back to top button to 'secondary' button theme (#…

…1960) Issue 1956: Updated Back to top button to 'secondary' button theme
visual-framework · Sep 28, 2023 · 66b3516 · 66b3516
1 parent bb5deda
commit 66b3516
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/components/vf-back-to-top/CHANGELOG.md b/components/vf-back-to-top/CHANGELOG.md
@@ -1,3 +1,8 @@
+### 1.0.1
+
+* Updated the Back to Top button to secondary and changed arrow colour.
+  * [Tracking issue](https://github.com/visual-framework/vf-core/issues/1956)
+
 ### 1.0.0-alpha.2
 
 * Fixed a null reference error.

diff --git a/components/vf-back-to-top/vf-back-to-top.jsx b/components/vf-back-to-top/vf-back-to-top.jsx
@@ -49,7 +49,7 @@ export function VFBackToTop({
         <a
           href={scrollToId}
           onClick={handleOnClick}
-          className="vf-button vf-button--primary vf-button--sm"
+          className="vf-button vf-button--secondary vf-button--sm"
           aria-label=" Back to top "
         >
           <span className="vf-button__text | vf-u-sr-only">Back to top</span>
@@ -71,7 +71,7 @@ const Icon = () => (
     <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
       <path
         d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z"
-        fill="#ffffff"
+        fill="#3b6fb6"
         stroke="none"
         strokeLinecap="round"
         strokeLinejoin="round"

diff --git a/components/vf-back-to-top/vf-back-to-top.njk b/components/vf-back-to-top/vf-back-to-top.njk
@@ -18,10 +18,10 @@
 {% endif %}
 
 <div class="vf-back-to-top vf-back-top--{{type}}" data-vf-js-back-to-top {% if type === 'floating'%} data-vf-js-back-to-top-floating {% endif %}>
-  <a {% if scrollToId %}href="{{'#'+scrollToId}}" data-scroll-to-id="{{scrollToId}}" {% endif %}class="vf-button vf-button--primary vf-button--sm" aria-label="{{text}}">
+  <a {% if scrollToId %}href="{{'#'+scrollToId}}" data-scroll-to-id="{{scrollToId}}" {% endif %}class="vf-button vf-button--secondary vf-button--sm" aria-label="{{text}}">
     <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
       <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
-        <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#ffffff" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+        <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
       </g>
     </svg>
     {{text}}