feat: develop section component (#61)

* feat: updated card component * fix: lint issue * chore: use classmaps * chore: use ? notation for boolean attributes * chore: updated coverage * chore: remove double dollar sign Co-authored-by: Wouter Termont <[email protected]> Co-authored-by: Stijn Taelemans <[email protected]>
useid · Oct 11, 2021 · e1093ea · e1093ea
1 parent 373c3a2
commit e1093ea
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 35 deletions.
diff --git a/packages/dgt-components/demo/demo.ts b/packages/dgt-components/demo/demo.ts
@@ -2,7 +2,6 @@ import { Parser } from 'n3';
 import { ComponentEventType, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
 import {ProfileNameComponent} from '../lib/components/profile/profile-name.component';
 import {FormElementComponent} from '../lib/components/forms/form-element.component';
-import {ContentHeaderComponent} from '../lib/components/header/content-header.component';
 import {CardComponent} from '../lib/components/cards/card.component';
 import { ProfileContactComponent } from '../lib/components/profile/profile-contact.component';
 import { ProfilePayslipComponent } from '../lib/components/profile/profile-payslip.component';
@@ -13,7 +12,6 @@ import { ListItemComponent } from '../lib/components/list-item/list-item.compone
 
 customElements.define('demo-auth', DemoAuthenticateComponent);
 customElements.define('nde-form-element', FormElementComponent);
-customElements.define('nde-content-header', ContentHeaderComponent);
 customElements.define('nde-card', CardComponent);
 customElements.define('profile-name-component', ProfileNameComponent);
 customElements.define('profile-contact-component', ProfileContactComponent);

diff --git a/packages/dgt-components/lib/components/cards/card.component.spec.ts b/packages/dgt-components/lib/components/cards/card.component.spec.ts
@@ -30,49 +30,49 @@ describe('CardComponent', () => {
 
     const largeCard = window.document.body.getElementsByTagName(tag)[0].shadowRoot;
 
-    expect(largeCard.querySelector('nde-content-header')).toBeTruthy();
+    expect(largeCard.querySelector('card-header')).toBeTruthy();
     expect(largeCard.querySelector('.image')).toBeTruthy();
     expect(largeCard.querySelector('.content')).toBeTruthy();
 
   });
 
-  it('should not display header when showHeader is false', async () => {
+  it('should not display header when showHeader is true', async () => {
 
-    component.showHeader = false;
+    component.hideHeader = true;
     window.document.body.appendChild(component);
     await component.updateComplete;
 
     const largeCard = window.document.body.getElementsByTagName(tag)[0].shadowRoot;
 
-    expect(largeCard.querySelector('nde-content-header')).not.toBeTruthy();
+    expect(largeCard.querySelector('card-header')).not.toBeTruthy();
     expect(largeCard.querySelector('.image')).toBeTruthy();
     expect(largeCard.querySelector('.content')).toBeTruthy();
 
   });
 
-  it('should not display image when showImage is false', async () => {
+  it('should not display image when hideImage is true', async () => {
 
-    component.showImage = false;
+    component.hideImage = true;
     window.document.body.appendChild(component);
     await component.updateComplete;
 
     const largeCard = window.document.body.getElementsByTagName(tag)[0].shadowRoot;
 
-    expect(largeCard.querySelector('nde-content-header')).toBeTruthy();
+    expect(largeCard.querySelector('card-header')).toBeTruthy();
     expect(largeCard.querySelector('.image')).not.toBeTruthy();
     expect(largeCard.querySelector('.content')).toBeTruthy();
 
   });
 
-  it('should not display content when showContent is false', async () => {
+  it('should not display content when hideContent is true', async () => {
 
-    component.showContent = false;
+    component.hideContent = true;
     window.document.body.appendChild(component);
     await component.updateComplete;
 
     const largeCard = window.document.body.getElementsByTagName(tag)[0].shadowRoot;
 
-    expect(largeCard.querySelector('nde-content-header')).toBeTruthy();
+    expect(largeCard.querySelector('card-header')).toBeTruthy();
     expect(largeCard.querySelector('.image')).toBeTruthy();
     expect(largeCard.querySelector('.content')).not.toBeTruthy();
 

diff --git a/packages/dgt-components/lib/components/cards/card.component.ts b/packages/dgt-components/lib/components/cards/card.component.ts
@@ -1,5 +1,7 @@
 import { Theme } from '@digita-ai/dgt-theme';
 import { css, html, LitElement, property, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { ContentHeaderComponent } from '../header/content-header.component';
 
 /**
  * A large card component
@@ -8,15 +10,22 @@ export class CardComponent extends LitElement {
 
   /** Determine whether the header of the card should be shown */
   @property({ type: Boolean })
-  public showHeader = true;
+  public hideHeader = false;
 
   /** Determine whether the image of the card should be shown */
   @property({ type: Boolean })
-  public showImage = true;
+  public hideImage = false;
 
   /** Determine whether the content of the card should be shown */
   @property({ type: Boolean })
-  public showContent = true;
+  public hideContent = false;
+
+  constructor() {
+
+    super();
+    this.define('card-header', ContentHeaderComponent);
+
+  }
 
   /**
    * The styles associated with the component.
@@ -58,20 +67,23 @@ export class CardComponent extends LitElement {
 
   render() {
 
+    const classes = { 'reduced-top-padding': this.hideImage };
+
     return html`
       <div class="large-card">
 
-        ${this.showHeader
+        ${!this.hideHeader
     ? html`
-            <nde-content-header inverse>
+            <card-header inverse>
               <slot name="icon" slot="icon"></slot>
               <slot name="title" slot="title"></slot>
               <slot name="subtitle" slot="subtitle"></slot>
-            </nde-content-header>
+              <slot name="actions" slot="actions"></slot>
+            </card-header>
           `
     : html``
 }
-        ${this.showImage
+        ${!this.hideImage
     ? html`
           <div class="image">
             <slot name="image"></slot>
@@ -80,9 +92,9 @@ export class CardComponent extends LitElement {
     : html``
 }
 
-        ${this.showContent
+        ${!this.hideContent
     ? html`
-          <div class="content${!this.showImage ? ' reduced-top-padding' : ''}">
+          <div class="content ${classMap(classes)}">
             <slot name="content"></slot>
           </div>
         `
@@ -94,6 +106,16 @@ export class CardComponent extends LitElement {
 
   }
 
+  define(tag: string, module: CustomElementConstructor): void {
+
+    if (!customElements.get(tag)) {
+
+      customElements.define(tag, module);
+
+    }
+
+  }
+
 }
 
 export default CardComponent;
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
@@ -6,7 +6,7 @@ describe('ContentHeaderComponent', () => {
 
   beforeEach(() => {
 
-    component = window.document.createElement('nde-content-header') as ContentHeaderComponent;
+    component = window.document.createElement('card-header') as ContentHeaderComponent;
 
     const title = window.document.createElement('div');
     title.innerHTML = 'Foo';
@@ -37,10 +37,10 @@ describe('ContentHeaderComponent', () => {
     window.document.body.appendChild(component);
     await component.updateComplete;
 
-    const titleSlot = window.document.body.getElementsByTagName('nde-content-header')[0].shadowRoot.querySelector<HTMLSlotElement>('slot[name="title"]');
+    const titleSlot = window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector<HTMLSlotElement>('slot[name="title"]');
     expect(titleSlot.assignedElements()[0].innerHTML).toEqual('Foo');
 
-    const subtitleSlot = window.document.body.getElementsByTagName('nde-content-header')[0].shadowRoot.querySelector<HTMLSlotElement>('slot[name="subtitle"]');
+    const subtitleSlot = window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector<HTMLSlotElement>('slot[name="subtitle"]');
     expect(subtitleSlot.assignedElements()[0].innerHTML).toEqual('Bar');
 
   });
@@ -54,11 +54,11 @@ describe('ContentHeaderComponent', () => {
 
     if(inverse) {
 
-      expect(window.document.body.getElementsByTagName('nde-content-header')[0].shadowRoot.querySelector('.header.inverse')).toBeFalsy();
+      expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeFalsy();
 
     } else {
 
-      expect(window.document.body.getElementsByTagName('nde-content-header')[0].shadowRoot.querySelector('.header.inverse')).toBeTruthy();
+      expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeTruthy();
 
     }
 

diff --git a/packages/dgt-components/lib/components/profile/profile-contact.component.ts b/packages/dgt-components/lib/components/profile/profile-contact.component.ts
@@ -154,7 +154,7 @@ export class ProfileContactComponent extends BaseComponent {
 
     return this.formActor ? html`
         
-    <nde-card .showImage="${false}">
+    <nde-card hideImage>
       <div slot="title">Contact information</div>
       <div slot="subtitle">Your email address and phone number</div>
       <div slot="icon">

diff --git a/packages/dgt-components/lib/components/profile/profile-name.component.ts b/packages/dgt-components/lib/components/profile/profile-name.component.ts
@@ -133,7 +133,7 @@ export class ProfileNameComponent extends BaseComponent {
 
     return this.formActor ? html`
         
-    <nde-card .showImage="${ !this.image ? false : true }">
+    <nde-card ?hideImage="${ !this.image }">
       <div slot="title">Names</div>
       <div slot="subtitle">Your names</div>
       <div slot="icon">

diff --git a/packages/dgt-components/lib/components/profile/profile-payslip.component.ts b/packages/dgt-components/lib/components/profile/profile-payslip.component.ts
@@ -111,7 +111,7 @@ export class ProfilePayslipComponent extends BaseComponent {
 
     return this.payslips && this.payslips.length > 0 ? html`
         
-    <nde-card .showImage="${ false }">
+    <nde-card hideImage>
       <div slot="title">Payslips</div>
       <div slot="subtitle">Your payslips</div>
       <div slot="icon">

diff --git a/packages/dgt-components/lib/index.ts b/packages/dgt-components/lib/index.ts
@@ -3,12 +3,11 @@
  */
 export * from './components/alerts/alert';
 export * from './components/alerts/alert.component';
-export * from './components/alerts/alert.component';
+export * from './components/base/base.component';
+export * from './components/cards/card.component';
 export * from './components/authentication/authenticate.component';
 export * from './components/authentication/authenticate.machine';
 export * from './components/authentication/webid.component';
-export * from './components/base/base.component';
-export * from './components/cards/card.component';
 export * from './components/consent/consent-request.component';
 export * from './components/consent/consent-result.component';
 export * from './components/forms/form-element.component';
@@ -31,11 +30,11 @@ export * from './components/sidebar/sidebar.component';
 export * from './components/sidebar/sidebar-list-item.component';
 export * from './components/sidebar/sidebar-list.component';
 export * from './components/sidebar/sidebar-item.component';
-export * from './components/source/source-list.component';
-export * from './components/source/source.component';
 export * from './components/state/event';
 export * from './components/state/schema';
 export * from './components/state/state';
+export * from './components/source/source-list.component';
+export * from './components/source/source.component';
 export * from './models/holder.model';
 export * from './models/invite.model';
 export * from './models/issuer.model';

diff --git a/packages/dgt-components/tests/setup.ts b/packages/dgt-components/tests/setup.ts
@@ -20,7 +20,7 @@ customElements.define('nde-sidebar-list-item', SidebarListItemComponent);
 customElements.define('nde-sidebar-list', SidebarListComponent);
 customElements.define('nde-sidebar', SidebarComponent);
 customElements.define('nde-large-card', CardComponent);
-customElements.define('nde-content-header', ContentHeaderComponent);
+customElements.define('card-header', ContentHeaderComponent);
 customElements.define('list-item', ListItemComponent);
 customElements.define('separator-component', SeparatorComponent);