From e1093eaec381ed0c1ca1bc16e1983a161d9f0dda Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Mon, 11 Oct 2021 18:16:40 +0200 Subject: [PATCH] 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 Co-authored-by: Stijn Taelemans --- packages/dgt-components/demo/demo.ts | 2 - .../components/cards/card.component.spec.ts | 20 +++++----- .../lib/components/cards/card.component.ts | 40 ++++++++++++++----- .../header/content-header.component.spec.ts | 10 ++--- .../profile/profile-contact.component.ts | 2 +- .../profile/profile-name.component.ts | 2 +- .../profile/profile-payslip.component.ts | 2 +- packages/dgt-components/lib/index.ts | 9 ++--- packages/dgt-components/tests/setup.ts | 2 +- 9 files changed, 54 insertions(+), 35 deletions(-) diff --git a/packages/dgt-components/demo/demo.ts b/packages/dgt-components/demo/demo.ts index 81e3d5ea..c23fd758 100644 --- 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 index 290f145d..253f78e3 100644 --- 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 index 59ec61e7..a8300584 100644 --- 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`
- ${this.showHeader + ${!this.hideHeader ? html` - + - + + ` : html`` } - ${this.showImage + ${!this.hideImage ? html`
@@ -80,9 +92,9 @@ export class CardComponent extends LitElement { : html`` } - ${this.showContent + ${!this.hideContent ? html` -
+
` @@ -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 index a31d7b27..2872b109 100644 --- 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('slot[name="title"]'); + const titleSlot = window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('slot[name="title"]'); expect(titleSlot.assignedElements()[0].innerHTML).toEqual('Foo'); - const subtitleSlot = window.document.body.getElementsByTagName('nde-content-header')[0].shadowRoot.querySelector('slot[name="subtitle"]'); + const subtitleSlot = window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('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 index a1db4508..df04a6d9 100644 --- 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` - +
Contact information
Your email address and phone number
diff --git a/packages/dgt-components/lib/components/profile/profile-name.component.ts b/packages/dgt-components/lib/components/profile/profile-name.component.ts index c32f40b9..4dc53f6c 100644 --- 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` - +
Names
Your names
diff --git a/packages/dgt-components/lib/components/profile/profile-payslip.component.ts b/packages/dgt-components/lib/components/profile/profile-payslip.component.ts index d21d1370..83ce2e7a 100644 --- 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` - +
Payslips
Your payslips
diff --git a/packages/dgt-components/lib/index.ts b/packages/dgt-components/lib/index.ts index fc96fd7c..6d31ec6d 100644 --- 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 index 2a63a3fb..f5ec7a51 100644 --- 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);