tabs styles improvements

src/components.d.ts

@@ -503,6 +503,7 @@ export namespace Components {
     size: number;
   }
   interface HyTabs {
+    headerstyle: string;
     tabId?: string;
     tabListLabel: string;
   }
@@ -1362,6 +1363,7 @@ declare namespace LocalJSX {
     size?: number;
   }
   interface HyTabs {
+    headerstyle?: string;
     tabId?: string;
     tabListLabel?: string;
   }

src/components/hy-tabs/hy-tabs.scss

@@ -58,7 +58,7 @@
     }
 
     &__left {
-      left: 8px;
+      left: 2px;
 
       svg {
         left: -1.5px;
@@ -66,7 +66,7 @@
     }
 
     &__right {
-      right: 8px;
+      right: 2px;
 
       svg {
         left: 1.5px;
@@ -101,7 +101,7 @@
     font-weight: 600;
     justify-content: center;
     letter-spacing: -0.44px;
-    margin: 0 8px 0 0;
+    margin: 0 4px 0 0;
     max-width: calc(100% / 12 * 3);
     min-height: 44px;
     min-width: 100px;
@@ -116,12 +116,14 @@
     @include breakpoint($narrow) {
       @include font-size(18px, 24px);
       letter-spacing: -0.56px;
+      margin: 0 8px 0 0;
       padding: 8px 12px;
 
       span.tab-title {
         padding: 8px 12px;
       }
     }
+
     @include breakpoint($medium) {
       padding: 8px 16px;
 
@@ -129,8 +131,12 @@
         padding: 8px 16px;
       }
     }
+  }
+
+  // No sidebar
+  [role='tab'].large {
     @include breakpoint($overwide) {
-      margin-right: 12px;
+      margin: 0 12px 0 0;
     }
   }
 

src/components/hy-tabs/hy-tabs.tsx

@@ -35,6 +35,7 @@ export class HyTabs implements ComponentInterface {
   @State() tabButtons: NodeListOf<Element>[];
   @State() tabList: NodeListOf<Element>[];
   @Element() el: HTMLElement;
+  @Prop() headerstyle: string = 'common';
 
   componentWillLoad() {
     const tabItems = this.el.querySelectorAll('hy-tabs-item');
@@ -49,6 +50,13 @@ export class HyTabs implements ComponentInterface {
   }
 
   componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+
     const tabContainer = this.el.children[0];
     if (tabContainer) {
       this.generateArrays(tabContainer);
@@ -319,7 +327,7 @@ export class HyTabs implements ComponentInterface {
                 const title = Object.values(item)[0];
                 const id = title.toLowerCase().replace(/\W/g, '-');
                 return (
-                  <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id}>
+                  <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id} class={this.headerstyle}>
                     {title}
                   </button>
                 );

src/components/hy-tabs/readme.md

@@ -6,6 +6,7 @@
 
 | Property       | Attribute        | Description | Type     | Default     |
 | -------------- | ---------------- | ----------- | -------- | ----------- |
+| `headerstyle`  | `headerstyle`    |             | `string` | `'common'`  |
 | `tabId`        | `tab-id`         |             | `string` | `undefined` |
 | `tabListLabel` | `tab-list-label` |             | `string` | `''`        |