From 6aae404c54371bcc9aecc70cccf4f47caaa3a420 Mon Sep 17 00:00:00 2001
From: Andrew Bone <AndrewB05@gmail.com>
Date: Wed, 7 Apr 2021 14:11:15 +0100
Subject: [PATCH] Update Analytics Dashboard time navigation to tabs (#13270)

* Move to crayons-tabs

* Update js logic to use crayon-tabs

* Remove toggle and add tab

The added code moved the tabs to the right hand side of the container (until mobile styles kick in then it will fill the container).
---
 app/assets/stylesheets/dashboard.scss | 29 ++-------------------------
 app/javascript/analytics/dashboard.js |  6 +++---
 app/views/shared/_stats.html.erb      |  8 ++++----
 3 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 4a1e82318..46f0aaab7 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -279,33 +279,8 @@
   }
 }
 
-.toggles {
-  text-align: center;
-}
-
-.toggles button {
-  display: inline-block;
-  padding: 2px 8px;
-  margin: 8px;
-  font-size: 1.3em;
-  border-radius: 2px;
-  border: 1px solid transparent;
-  font-family: $helvetica-condensed;
-  font-stretch: condensed;
-  top: 18px;
-  font-weight: 600;
-  background-color: transparent;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.selected {
-    background: #cfd7ff;
-    color: #0a0a0a !important;
-    border: 1px solid #4e57ef;
-    box-shadow: 3px 4px 0px #4e57ef;
-  }
+.crayons-tabs--analytics {
+  justify-content: flex-end;
 }
 
 .graphs {
diff --git a/app/javascript/analytics/dashboard.js b/app/javascript/analytics/dashboard.js
index 3a6a16a7c..52faf5e11 100644
--- a/app/javascript/analytics/dashboard.js
+++ b/app/javascript/analytics/dashboard.js
@@ -1,13 +1,13 @@
 import { callHistoricalAPI, callReferrersAPI } from './client';
 
 function resetActive(activeButton) {
-  const buttons = document.getElementsByClassName('timerange-button');
+  const buttons = document.querySelectorAll('.crayons-tabs--analytics .crayons-tabs__item');
   for (let i = 0; i < buttons.length; i += 1) {
     const button = buttons[i];
-    button.classList.remove('selected');
+    button.classList.remove('crayons-tabs__item--current');
   }
 
-  activeButton.classList.add('selected');
+  activeButton.classList.add('crayons-tabs__item--current');
 }
 
 function sumAnalytics(data, key) {
diff --git a/app/views/shared/_stats.html.erb b/app/views/shared/_stats.html.erb
index c1d2b7744..91e925590 100644
--- a/app/views/shared/_stats.html.erb
+++ b/app/views/shared/_stats.html.erb
@@ -1,7 +1,7 @@
-<div class="toggles">
-  <button class="selected timerange-button" id="week-button">Week</button>
-  <button class="timerange-button" id="month-button">Month</button>
-  <button class="timerange-button" id="infinity-button">Infinity</button>
+<div class="crayons-tabs crayons-tabs--analytics">
+  <button class="crayons-tabs__item crayons-tabs__item--current" id="week-button">Week</button>
+  <button class="crayons-tabs__item" id="month-button">Month</button>
+  <button class="crayons-tabs__item" id="infinity-button">Infinity</button>
 </div>
 
 <div class="summary-stats">