feat: dont show card header border (#106)

* feat: dont shot card header border * fix: removed inverse property * fix: updated coverage * feat: removed header border
useid · Nov 26, 2021 · 9d4b23b · 9d4b23b
1 parent 361bdf6
commit 9d4b23b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 55 deletions.
diff --git a/packages/dgt-components/lib/components/cards/card.component.ts b/packages/dgt-components/lib/components/cards/card.component.ts
@@ -74,7 +74,7 @@ export class CardComponent extends LitElement {
 
         ${!this.hideHeader
     ? html`
-            <card-header inverse>
+            <card-header class="inverse">
               <slot name="icon" slot="icon"></slot>
               <slot name="title" slot="title"></slot>
               <slot name="subtitle" slot="subtitle"></slot>

diff --git a/packages/dgt-components/lib/components/header/content-header.component.spec.ts b/packages/dgt-components/lib/components/header/content-header.component.spec.ts
@@ -45,23 +45,4 @@ describe('ContentHeaderComponent', () => {
 
   });
 
-  it.each([ true, false ])('should show set inverse class', async (inverse) => {
-
-    component.inverse = inverse;
-
-    window.document.body.appendChild(component);
-    await component.updateComplete;
-
-    if(inverse) {
-
-      expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeFalsy();
-
-    } else {
-
-      expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeTruthy();
-
-    }
-
-  });
-
 });
diff --git a/packages/dgt-components/lib/components/header/content-header.component.ts b/packages/dgt-components/lib/components/header/content-header.component.ts
@@ -6,12 +6,6 @@ import { Theme } from '@digita-ai/dgt-theme';
  */
 export class ContentHeaderComponent extends LitElement {
 
-  /**
-   * Decides the color variant of this component (dark/light)
-   */
-  @property({ type: Boolean })
-  public inverse = false;
-
   /**
    * Renders the component as HTML.
    *
@@ -20,8 +14,6 @@ export class ContentHeaderComponent extends LitElement {
   render() {
 
     return html`
-    <div class="header ${this.inverse ? '' : 'inverse'}">
-
       <div class="icon">
         <slot name="icon"></slot>
       </div>
@@ -34,8 +26,6 @@ export class ContentHeaderComponent extends LitElement {
       <div class="actions">
         <slot name="actions"></slot>
       </div>
-
-    </div>
   `;
 
   }
@@ -49,63 +39,59 @@ export class ContentHeaderComponent extends LitElement {
       unsafeCSS(Theme),
       css`
         :host {
-          display: block;
           height: 99px;
-          min-height: 99px;
-        }
-        .header.inverse {
-          background-color: var(--colors-primary-dark);
-          color: var(--colors-foreground-inverse);
-          fill: var(--colors-foreground-inverse);
-        }
-        .header {
-          height: 100%;
           padding: 0px var(--gap-large);
           background-color: var( --colors-background-light);
           color: var(--colors-foreground-normal);
           fill: var(--colors-foreground-normal);
-          border-bottom: 1px solid var(--colors-primary-normal);
           display: flex;
           flex-direction: row;
           align-items: center;
         }
-        .header .icon {
+
+
+        :host.inverse {
+          background-color: var(--colors-primary-dark);
+          color: var(--colors-foreground-inverse);
+          fill: var(--colors-foreground-inverse);
+        }
+        .icon {
           font-size: 25px;
         }
-        .header.inverse .icon ::slotted(svg) {
+        inverse .icon ::slotted(svg) {
           fill: var(--colors-foreground-inverse);
         }
-        .header .icon ::slotted(*) {
+        .icon ::slotted(*) {
           height: 25px;
           width: 25px;
         }
-        .header .content {
+        .content {
           flex: 1 0;
           margin: 0 var(--gap-normal);
         }
-        .header .content slot[name="title"]::slotted(*) {
+        .content slot[name="title"]::slotted(*) {
           overflow: hidden;
           font-weight: var(--font-weight-bold);
           font-size: var(--font-size-normal);
           height: var(--gap-normal);
           line-height: var(--gap-normal);
         }
-        .header .content slot[name="subtitle"]::slotted(*) {
+        .content slot[name="subtitle"]::slotted(*) {
           overflow: hidden;
           margin-top: var(--gap-tiny);
           font-size: var(--font-size-small);
           height: var(--gap-normal);
           line-height: var(--gap-normal);
         }
-        .header .actions {
+        .actions {
           margin-right: var(--gap-normal);
           display: flex;
           flex-direction: row;
         }
-        .header .actions:last-child {
+        .actions:last-child {
           margin-right: 0px;
         }
-        .header .actions ::slotted(*) {
+        .actions ::slotted(*) {
           max-height: var(--gap-normal);
           max-width: var(--gap-normal);
           height: var(--gap-normal);
@@ -115,7 +101,7 @@ export class ContentHeaderComponent extends LitElement {
           cursor: pointer;
           margin-left: var(--gap-normal);
         }
-        .header.inverse .actions ::slotted(*) {
+        :host.inverse .actions ::slotted(*) {
           fill: var(--colors-foreground-inverse);
           color: var(--colors-foreground-inverse);
         }

diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json
@@ -90,10 +90,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 32.14,
-        "functions": 33.93,
-        "lines": 37.64,
-        "statements": 37.78
+        "branches": 31.44,
+        "functions": 33.63,
+        "lines": 37.55,
+        "statements": 37.62
       }
     },
     "coveragePathIgnorePatterns": [