From 716985c22becfd1fe959c18656e5ed3dcdd2c626 Mon Sep 17 00:00:00 2001
From: Oseer Williams <oseer.williams@gmail.com>
Date: Mon, 22 Jan 2024 17:30:02 -0500
Subject: [PATCH] docs(storybook): update theme

---
 libs/components/.storybook/manager-head.html | 45 +++++---------------
 libs/components/src/switch/switch.stories.js | 15 +++----
 2 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/libs/components/.storybook/manager-head.html b/libs/components/.storybook/manager-head.html
index 92bc775309..3beb1c44d7 100644
--- a/libs/components/.storybook/manager-head.html
+++ b/libs/components/.storybook/manager-head.html
@@ -1,4 +1,9 @@
+<link
+  href="https://cdn.jsdelivr.net/npm/@covalent/tokens@8.1.0-beta.6/index.css"
+  rel="stylesheet"
+/>
 <style>
+  /* Storybook theme overrides */
   .sidebar-header {
     max-width: 213px;
   }
@@ -6,14 +11,15 @@
     box-shadow: none;
   }
 
-  .light #root > div > div[role='main'] > div {
-    border: 1px solid rgba(0, 0, 0, 0.12);
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-light-on-primary);
   }
-  .dark #root > div > div[role='main'] > div {
-    border: 1px solid rgba(255, 255, 255, 0.12);
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-dark-on-primary);
   }
 
-
   .light #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
     color: var(--cv-light-secondary);
   }
@@ -21,33 +27,4 @@
   .dark #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
     color: var(--cv-dark-secondary);
   }
-
-  .light #storybook-explorer-tree a.sidebar-item svg {
-    color: rgba(0, 0, 0, 0.54);
-  }
-  .light #storybook-explorer-tree a.sidebar-item[data-selected='true']:hover {
-    background-color: rgba(133, 221, 220, 0.2);
-  }
-  .light #storybook-explorer-tree a.sidebar-item:hover,
-  .light a.sidebar-item:focus {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
-  #storybook-explorer-tree a.sidebar-item svg {
-    color: #ffffff;
-  }
-  #storybook-explorer-tree a.sidebar-item[data-selected='true']:hover {
-    background-color: rgba(4, 92, 92, 0.6);
-  }
-  #storybook-explorer-tree a.sidebar-item:hover,
-  .light a.sidebar-item:focus {
-    background-color: hsla(0, 0%, 100%, 0.04);
-  }
-  .sidebar-item#components-dialog--anatomy,
-  .sidebar-item#components-dialog--logout,
-  .sidebar-item#components-dialog--udf {
-    display: none;
-  }
-  .sidebar-item + a {
-    display: none;
-  }
 </style>
diff --git a/libs/components/src/switch/switch.stories.js b/libs/components/src/switch/switch.stories.js
index 0950c6a431..a294527324 100644
--- a/libs/components/src/switch/switch.stories.js
+++ b/libs/components/src/switch/switch.stories.js
@@ -15,11 +15,11 @@ export default {
   },
 };
 
-const Template = ({ disabled, label, checked, onChange }) => {
+const Template = ({ disabled, label = 'On/Off', checked, onChange }) => {
   const switchInput = document.createElement('cv-switch');
   switchInput.checked = checked;
   switchInput.disabled = disabled;
-  switchInput.ariaLabel = 'Example switch button'
+  switchInput.ariaLabel = label;
 
   switchInput.addEventListener('change', onChange);
 
@@ -31,12 +31,11 @@ const Template = ({ disabled, label, checked, onChange }) => {
     return formfield;
   }
 
-  return switchInput;
+  return `
+    <cv-formfield label="${label}" aria-label="${label}">
+      <cv-switch></cv-switch>
+    </cv-formfield>
+  `;
 };
 
 export const Basic = Template.bind({});
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  label: 'Bananas',
-};