US198278 tab design updates

* added knobs for theme, orientation and variants for accordion, tabs, and content set

Author: chrisdo1

elements/pfe-accordion/demo/pfe-accordion.story.js

@@ -20,6 +20,19 @@ stories.add(PfeAccordion.tag, () => {
   let config = {};
   // const props = PfeAccordion.properties;
   // const slots = PfeAccordion.slots;
+  const props = {
+    on: {
+      title: "Theme",
+      type: "string",
+      enum: [
+        "light",
+        "dark"
+      ],
+      default: "light"
+    }
+  };
+
+  config.prop = tools.autoPropKnobs(props, storybookBridge);
 
   //-- Add content to light DOM
   config.slots = [];

elements/pfe-content-set/demo/pfe-content-set.story.js

@@ -30,11 +30,10 @@ stories.add(PfeContentSet.tag, () => {
 
   const variantLabel = "Variant";
   const variantOptions = {
-    "": "default",
-    primary: "Primary",
-    secondary: "Secondary"
+    wind: "wind",
+    earth: "earth"
   };
-  const variantDefault = "";
+  const variantDefault = "wind";
   const variant = select(variantLabel, variantOptions, variantDefault);
   const variantAttr = variant ? ` pfe-variant="${variant}"` : "";
 
@@ -55,7 +54,7 @@ stories.add(PfeContentSet.tag, () => {
     .map((item, i) =>
       sets.push({
         heading: lorem(headingConfig).replace(/^\w/, c => c.toUpperCase()),
-        panel: `<h2>${lorem(headingConfig).replace(/^\w/, c =>
+        panel: `<h2 style="margin-top: 0;">${lorem(headingConfig).replace(/^\w/, c =>
           c.toUpperCase()
         )}</h2>
       ${lorem({
@@ -73,7 +72,7 @@ ${Array(countVar)
     .split(0)
     .map(
       (item, i) => `
-  <h2 pfe-content-set--header>${sets[i].heading}</h2>
+  <h3 pfe-content-set--header style="margin: 0;">${sets[i].heading}</h3>
   <div pfe-content-set--panel>
     ${sets[i].panel}
   </div>`)

elements/pfe-sass/mixins/_mixins.scss

@@ -193,29 +193,6 @@
   }
 }
 
-/// ===========================================================================
-/// Tab-specific SASS mixins
-/// ===========================================================================
-
-@mixin pfe-tab-panel-container($orientation: "horizontal", $border: false) {
-    margin: 0;
-    width: 100%;
-    padding: #{pfe-var(container-spacer)} 0;
-    @if $orientation == "vertical" {
-      padding-left: calc(#{pfe-var(container-spacer)} * 2);
-    }
-    @if $border {
-      padding: calc(#{pfe-var(container-spacer)} * 2);
-      border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
-      @if $orientation == "horizontal" {
-        border-top: none;
-      }
-      @if $orientation == "vertical" {
-        border-left: none;
-      }
-    }
-}
-
 /// ===========================================================================
 /// Accordion Specific SASS Vars
 /// ===========================================================================

elements/pfe-sass/variables/_maps.scss

@@ -53,9 +53,6 @@ $pfe-colors: (
   ui-disabled--text:                  $pfe-color--ui-disabled--text,
   ui-disabled--text--hover:           $pfe-color--ui-disabled--text--hover,
 
-  ui-tab--dark-hover-color:           $pfe-color--white,
-
-
   // ========================================================================
   // Base Surface Colors for Container elements
   // ========================================================================

elements/pfe-tabs/demo/pfe-tabs.story.js

@@ -35,6 +35,24 @@ stories.add(PfeTabs.tag, () => {
       title: "Vertical orientation",
       type: "boolean",
       default: false
+    },
+    on: {
+      title: "Theme",
+      type: "string",
+      enum: [
+        "light",
+        "dark"
+      ],
+      default: "light"
+    },
+    "pfe-variant": {
+      title: "Variant",
+      type: "string",
+      enum: [
+        "wind",
+        "earth"
+      ],
+      default: "wind"
     }
   };
 

elements/pfe-tabs/src/pfe-tab-panel.scss

@@ -2,6 +2,25 @@
 
 $LOCAL: tabs;
 
+@mixin pfe-tab-panel-container($orientation: "horizontal", $border: false) {
+    margin: 0;
+    width: 100%;
+    padding: #{pfe-var(container-spacer)} 0;
+    @if $orientation == "vertical" {
+      padding-left: calc(#{pfe-var(container-spacer)} * 2);
+    }
+    @if $border {
+      padding: calc(#{pfe-var(container-spacer)} * 2);
+      border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
+      @if $orientation == "horizontal" {
+        border-top: none;
+      }
+      @if $orientation == "vertical" {
+        border-left: none;
+      }
+    }
+}
+
 :host {
   display: block;
   color: #{pfe-radio(color--text)};

elements/pfe-tabs/src/pfe-tab.scss

@@ -77,7 +77,7 @@ $LOCAL: tabs;
 
 :host([pfe-variant="wind"][aria-selected="true"][on="dark"]),
 :host([pfe-variant="wind"][on="dark"]:hover) {
-  --pfe-tabs--aux: #{pfe-color(ui-tab--dark-hover-color)};
+  --pfe-tabs--aux: #{pfe-color(text--on-dark)};
 }
 
 /// ===========================================================================