Merge pull request #363 from patternfly/US198278-tab-design-updates

US198278 tab design updates

Author: castastrophe

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/index.html

@@ -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-content-set/demo/pfe-content-set.story.js

@@ -32,15 +32,14 @@ class PfeContentSet extends PFElement {
   get settings() {
     let settings = {};
     const variant = this.getAttribute("pfe-variant");
+    const theme = this.getAttribute("on");
 
-    if (variant === "primary") {
+    if (variant) {
       settings.variant = variant;
-      settings.color = "striped";
-    } else if (variant === "secondary") {
-      settings.variant = variant;
-      settings.color = "dark";
-    } else {
-      settings.color = "lightest";
+    }
+
+    if (theme) {
+      settings.theme = theme 
     }
 
     return settings;
@@ -93,9 +92,9 @@ class PfeContentSet extends PFElement {
     // Append the accordion to the document fragment
     fragment.appendChild(accordion);
 
-    // Pass the color property down to the accordion component
-    if (this.settings.color) {
-      accordion.setAttribute("color", this.settings.color);
+    // Pass the theme property down to the accordion component
+    if (this.settings.theme) {
+      accordion.setAttribute("on", this.settings.theme);
     }
 
     // Append the fragment to the component
@@ -147,6 +146,11 @@ class PfeContentSet extends PFElement {
       tabs.setAttribute("pfe-variant", this.settings.variant);
     }
 
+    // Pass the theme property down to the accordion component
+    if (this.settings.theme) {
+      tabs.setAttribute("on", this.settings.theme);
+    }
+
     // Append the fragment to the component
     this.appendChild(fragment);
   }

elements/pfe-content-set/src/pfe-content-set.js

@@ -20,7 +20,7 @@ <h2 pfe-content-set--header>heading 3</h2>
     </div>
 
     <div style="width: 600px;">
-      <pfe-content-set pfe-variant="primary" id="primary">
+      <pfe-content-set pfe-variant="wind" id="wind">
           <h2 pfe-content-set--header>heading 1</h2>
           <p pfe-content-set--panel>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <h2 pfe-content-set--header>heading 2</h2>
@@ -31,7 +31,7 @@ <h2 pfe-content-set--header>heading 3</h2>
     </div>
 
     <div style="width: 1024px;">
-      <pfe-content-set pfe-variant="secondary" id="secondary">
+      <pfe-content-set pfe-variant="earth" id="earth">
           <h2 pfe-content-set--header>heading 1</h2>
           <p pfe-content-set--panel>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <h2 pfe-content-set--header>heading 2</h2>
@@ -46,7 +46,7 @@ <h2 pfe-content-set--header>heading 5</h2>
     </div>
 
     <div style="width: 1024px;">
-      <pfe-content-set vertical pfe-variant="secondary" id="secondary-vertical">
+      <pfe-content-set vertical pfe-variant="earth" id="earth-vertical">
           <h2 pfe-content-set--header>heading 1</h2>
           <p pfe-content-set--panel>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <h2 pfe-content-set--header>heading 2</h2>
@@ -75,27 +75,26 @@ <h2 pfe-content-set--header>heading 3</h2>
           assert.equal(thirdHeader.getAttribute('aria-selected'), 'false');
         });
 
-        test('it should be a striped accordion', () => {
-          const pfeAccordion = document.querySelector('#primary').querySelector("pfe-accordion");
+        test('it should be a light accordion', () => {
+          const pfeAccordion = document.querySelector('#wind').querySelector("pfe-accordion");
           const firstHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-child(1)');
           const thirdHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-child(5)');
-          const firstPanel = document.querySelector('#primary').querySelector("pfe-accordion-panel:nth-child(2)");
+          const firstPanel = document.querySelector('#wind').querySelector("pfe-accordion-panel:nth-child(2)");
           const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-child(4)');
 
           assert.isTrue(firstHeader.hasAttribute('aria-controls'));
-          assert.equal(firstHeader.getAttribute('color'), 'striped');
           assert.isTrue(thirdHeader.hasAttribute('aria-controls'));
           assert.isTrue(firstPanel.hasAttribute('aria-labelledby'));
           assert.isTrue(secondPanel.hasAttribute('aria-labelledby'));
         });
 
         test('it should have dark tabs', () => {
-          const pfeTabs = document.querySelector('#secondary').querySelector("pfe-tabs");
+          const pfeTabs = document.querySelector('#earth').querySelector("pfe-tabs");
           const firstHeader = pfeTabs.querySelector('pfe-tab:nth-child(1)');
           const secondHeader = pfeTabs.querySelector('pfe-tab:nth-child(3)');
           const fifthHeader = pfeTabs.querySelector('pfe-tab:nth-child(9)');
 
-          assert.equal(pfeTabs.getAttribute('pfe-variant'), 'secondary');
+          assert.equal(pfeTabs.getAttribute('pfe-variant'), 'earth');
           assert.equal(firstHeader.getAttribute('tabindex'), '0');
           assert.equal(firstHeader.getAttribute('aria-selected'), 'true');
           assert.equal(secondHeader.getAttribute('aria-selected'), 'false');
@@ -104,11 +103,11 @@ <h2 pfe-content-set--header>heading 3</h2>
         });
 
         test('it should have vertical tabs', () => {
-          const pfeTabs = document.querySelector('#secondary-vertical').querySelector("pfe-tabs");
+          const pfeTabs = document.querySelector('#earth-vertical').querySelector("pfe-tabs");
           const firstHeader = pfeTabs.querySelector('pfe-tab:nth-child(1)');
           const secondHeader = pfeTabs.querySelector('pfe-tab:nth-child(3)');
           assert.isTrue(pfeTabs.hasAttribute('vertical'));
-          assert.equal(pfeTabs.getAttribute('pfe-variant'), 'secondary');
+          assert.equal(pfeTabs.getAttribute('pfe-variant'), 'earth');
           assert.equal(firstHeader.getAttribute('tabindex'), '0');
           assert.equal(firstHeader.getAttribute('aria-selected'), 'true');
           assert.equal(secondHeader.getAttribute('aria-selected'), 'false');

elements/pfe-content-set/test/pfe-content-set_test.html

@@ -84,6 +84,7 @@
     --pfe-broadcasted--color--ui-link--hover:     #{pfe-color(surface--complement--link--hover)};
     --pfe-broadcasted--color--ui-link--focus:     #{pfe-color(surface--complement--link--focus)};
   }
+
   @else if $theme == lighter {
     --pfe-broadcasted--color--text:               #{pfe-color(surface--lighter--text)};
     --pfe-broadcasted--color--ui-link:            #{pfe-color(surface--lighter--link)};

elements/pfe-sass/mixins/_mixins.scss

@@ -33,7 +33,7 @@ $pfelements--gray-light:        #d2d2d2 !default;
 $pfelements--gray-dark:         #333 !default;
 
 // Other tertiary named colors to be used below
-$pfelements--red:               #c00 !default;
+$pfelements--red:               #e00 !default; // Was #c00
 $pfelements--yellow:            #f0ab00 !default;
 $pfelements--cyan:              #007a87 !default;
 $pfelements--purple:            rebeccapurple !default; // Was #703fec

elements/pfe-sass/variables/_crayola.scss

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