docs(storybook): update theme

libs/components/.storybook/manager-head.html

@@ -1,53 +1,30 @@
+<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;
   }
   #root > div > div[role='main'] > div {
     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);
   }
 
   .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>

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',
-};