From 51dfd4d75c176fa5bd12036405a116913f0cadff Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 10:38:43 +0200 Subject: [PATCH 1/6] feat: added checkbox component --- packages/dgt-components/demo/demo.ts | 4 +- packages/dgt-components/demo/index.html | 4 + .../components/checkbox/checkbox.component.ts | 99 +++++++++++++++++++ packages/dgt-theme/lib/icons/Checkbox.svg | 4 + packages/dgt-theme/lib/index.ts | 1 + 5 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 packages/dgt-components/lib/components/checkbox/checkbox.component.ts create mode 100644 packages/dgt-theme/lib/icons/Checkbox.svg diff --git a/packages/dgt-components/demo/demo.ts b/packages/dgt-components/demo/demo.ts index 81e3d5ea..ea1f34f4 100644 --- a/packages/dgt-components/demo/demo.ts +++ b/packages/dgt-components/demo/demo.ts @@ -8,6 +8,7 @@ import { ProfileContactComponent } from '../lib/components/profile/profile-cont import { ProfilePayslipComponent } from '../lib/components/profile/profile-payslip.component'; import { DemoAuthenticateComponent } from './demo-authenticate.component'; import { ListItemComponent } from '../lib/components/list-item/list-item.component'; +import { CheckboxComponent } from '../lib/components/checkbox/checkbox.component'; @@ -19,6 +20,7 @@ customElements.define('profile-name-component', ProfileNameComponent); customElements.define('profile-contact-component', ProfileContactComponent); customElements.define('profile-payslip-component',  ProfilePayslipComponent); customElements.define('list-item', ListItemComponent); +customElements.define('checkbox-component', CheckboxComponent); const parser = new Parser(); @@ -58,4 +60,4 @@ document.addEventListener(ComponentEventType.WRITE, (event: ComponentWriteEvent) detail: { ...event.detail, cause: event, success: true }, })), 2000); -}); +}); \ No newline at end of file diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html index 19f1a3a9..b1da2f92 100644 --- a/packages/dgt-components/demo/index.html +++ b/packages/dgt-components/demo/index.html @@ -13,6 +13,10 @@ + + Ik geef mijn toestemming + + diff --git a/packages/dgt-components/lib/components/checkbox/checkbox.component.ts b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts new file mode 100644 index 00000000..b52c6682 --- /dev/null +++ b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts @@ -0,0 +1,99 @@ +import { css, html, LitElement, property, unsafeCSS } from 'lit-element'; +import { DGTLoggerService, Translator } from '@digita-ai/dgt-utils'; +import { Checkbox, Theme } from '@digita-ai/dgt-theme'; +import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; + +/** + * A component which shows the details of a single alert. + */ +export class CheckboxComponent extends LitElement { + + /** + * The component's logger. + */ + @property({ type: DGTLoggerService }) + public logger: DGTLoggerService; + + /** + * The component's translator. + */ + @property({ type: Translator }) + public translator: Translator; + + /** + * Renders the component as HTML. + * + * @returns The rendered HTML of the component. + */ + render() { + + return html` + + `; + + } + /** + * The styles associated with the component. + */ + static get styles() { + + return [ + unsafeCSS(Theme), + css` + .container { + position: relative; + padding-left: 35px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + .check { + position: absolute; + top: 0; + left: 0; + height: 23px; + width: 23px; + background-color: #eee; + display: flex; + align-items: center; + justify-content: center; + } + + .check svg { + height: 100%; + width: 100%; + fill: #8fbe00; + margin: 4.6px; + } + + .container:hover input ~ .check { + background-color: #ccc; + } + + .container input:checked ~ .check svg { + display: none; + } + `, + ]; + + } + +} + +export default CheckboxComponent; diff --git a/packages/dgt-theme/lib/icons/Checkbox.svg b/packages/dgt-theme/lib/icons/Checkbox.svg new file mode 100644 index 00000000..9e48a3cd --- /dev/null +++ b/packages/dgt-theme/lib/icons/Checkbox.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/dgt-theme/lib/index.ts b/packages/dgt-theme/lib/index.ts index 6b8bf4fe..6f36edd7 100644 --- a/packages/dgt-theme/lib/index.ts +++ b/packages/dgt-theme/lib/index.ts @@ -26,6 +26,7 @@ export { default as Podspaces } from './icons/Podspaces.svg?raw'; export { default as Doccle } from './icons/Doccle.svg?raw'; export { default as Vault } from './icons/vault.svg'; export { default as Location } from './icons/Location.svg?raw'; +export { default as Checkbox } from './icons/Checkbox.svg?raw'; /** * Export theme From 2a80bce8a35cec6b27f5760f93d1ed36f1230aa1 Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 10:41:17 +0200 Subject: [PATCH 2/6] fix: checkbox card --- packages/dgt-components/demo/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html index b1da2f92..222d177d 100644 --- a/packages/dgt-components/demo/index.html +++ b/packages/dgt-components/demo/index.html @@ -13,7 +13,7 @@ - + Ik geef mijn toestemming From 0ea8a4a805c0be89e15793d98620b7791e4b9f2f Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 11:08:40 +0200 Subject: [PATCH 3/6] fix: styling for checkbox --- packages/dgt-components/demo/index.html | 2 ++ .../lib/components/checkbox/checkbox.component.ts | 10 ++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html index 222d177d..b3f856cf 100644 --- a/packages/dgt-components/demo/index.html +++ b/packages/dgt-components/demo/index.html @@ -15,6 +15,8 @@ Ik geef mijn toestemming + Ik geef mijn toestemming + Ik geef mijn toestemming diff --git a/packages/dgt-components/lib/components/checkbox/checkbox.component.ts b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts index b52c6682..a01f374a 100644 --- a/packages/dgt-components/lib/components/checkbox/checkbox.component.ts +++ b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts @@ -29,9 +29,9 @@ export class CheckboxComponent extends LitElement { return html` `; @@ -46,13 +46,14 @@ export class CheckboxComponent extends LitElement { css` .container { position: relative; - padding-left: 35px; cursor: pointer; - font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + display: flex; + align-items: center; + gap: var(--gap-normal); } .container input { @@ -64,9 +65,6 @@ export class CheckboxComponent extends LitElement { } .check { - position: absolute; - top: 0; - left: 0; height: 23px; width: 23px; background-color: #eee; From 0bcca7a4056d446675ee8738ec8aa6355e1bb905 Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 11:33:20 +0200 Subject: [PATCH 4/6] feat: added properties --- packages/dgt-components/demo/index.html | 2 +- .../components/checkbox/checkbox.component.ts | 26 +++++++++++++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html index b3f856cf..9713beda 100644 --- a/packages/dgt-components/demo/index.html +++ b/packages/dgt-components/demo/index.html @@ -14,7 +14,7 @@ - Ik geef mijn toestemming + Ik geef mijn toestemming Ik geef mijn toestemming Ik geef mijn toestemming diff --git a/packages/dgt-components/lib/components/checkbox/checkbox.component.ts b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts index a01f374a..d10df3cb 100644 --- a/packages/dgt-components/lib/components/checkbox/checkbox.component.ts +++ b/packages/dgt-components/lib/components/checkbox/checkbox.component.ts @@ -1,7 +1,8 @@ -import { css, html, LitElement, property, unsafeCSS } from 'lit-element'; +import { css, CSSResult, html, LitElement, property, TemplateResult, unsafeCSS } from 'lit-element'; import { DGTLoggerService, Translator } from '@digita-ai/dgt-utils'; import { Checkbox, Theme } from '@digita-ai/dgt-theme'; import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; +import { ifDefined } from 'lit-html/directives/if-defined'; /** * A component which shows the details of a single alert. @@ -20,16 +21,27 @@ export class CheckboxComponent extends LitElement { @property({ type: Translator }) public translator: Translator; + @property({ type: Boolean }) + public checked = false; + + @property({ type: String }) + public value: string; + + toggle(): void{ + + this.checked = !this.checked; + + } /** * Renders the component as HTML. * * @returns The rendered HTML of the component. */ - render() { + render(): TemplateResult { return html` @@ -39,7 +51,7 @@ export class CheckboxComponent extends LitElement { /** * The styles associated with the component. */ - static get styles() { + static get styles(): CSSResult[] { return [ unsafeCSS(Theme), @@ -84,9 +96,13 @@ export class CheckboxComponent extends LitElement { background-color: #ccc; } - .container input:checked ~ .check svg { + .container input ~ .check svg { display: none; } + + .container input:checked ~ .check svg { + display: block + } `, ]; From e82e98026b1ffa5bc7bc1d106cffaba153961b21 Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 12:28:22 +0200 Subject: [PATCH 5/6] test: added for checkbox --- .../checkbox/checkbox.component.spec.ts | 49 +++++++++++++++++++ packages/dgt-components/package.json | 10 ++-- packages/dgt-components/tests/setup.ts | 4 +- 3 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 packages/dgt-components/lib/components/checkbox/checkbox.component.spec.ts diff --git a/packages/dgt-components/lib/components/checkbox/checkbox.component.spec.ts b/packages/dgt-components/lib/components/checkbox/checkbox.component.spec.ts new file mode 100644 index 00000000..05a777ba --- /dev/null +++ b/packages/dgt-components/lib/components/checkbox/checkbox.component.spec.ts @@ -0,0 +1,49 @@ +import { CheckboxComponent } from './checkbox.component'; + +describe('CardComponent', () => { + + let component: CheckboxComponent; + const tag = 'checkbox-component'; + + beforeEach(() => { + + component = window.document.createElement(tag) as CheckboxComponent; + + }); + + afterEach(() => { + + document.getElementsByTagName('html')[0].innerHTML = ''; + + }); + + it('should be correctly instantiated', () => { + + expect(component).toBeTruthy(); + + }); + + it('should add checked to input when checked is specified', async () => { + + component.checked = true; + window.document.body.appendChild(component); + await component.updateComplete; + + const checkbox = window.document.body.getElementsByTagName(tag)[0].shadowRoot; + + expect(checkbox.querySelector('input')).toHaveProperty('checked', true); + + }); + + it('should not add checked to input when checked is not specified', async () => { + + window.document.body.appendChild(component); + await component.updateComplete; + + const checkbox = window.document.body.getElementsByTagName(tag)[0].shadowRoot; + + expect(checkbox.querySelector('input')).toHaveProperty('checked', false); + + }); + +}); diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json index cc6d3e05..7f2fe474 100644 --- a/packages/dgt-components/package.json +++ b/packages/dgt-components/package.json @@ -90,10 +90,10 @@ ], "coverageThreshold": { "global": { - "branches": 27.55, - "functions": 30.22, - "lines": 30.16, - "statements": 29.91 + "branches": 27.8, + "functions": 31.44, + "lines": 31.92, + "statements": 31.62 } }, "coveragePathIgnorePatterns": [ @@ -105,4 +105,4 @@ "/lib/demo/" ] } -} +} \ No newline at end of file diff --git a/packages/dgt-components/tests/setup.ts b/packages/dgt-components/tests/setup.ts index f5ec7a51..ed4797e5 100644 --- a/packages/dgt-components/tests/setup.ts +++ b/packages/dgt-components/tests/setup.ts @@ -8,7 +8,8 @@ import { SidebarComponent } from '../lib/components/sidebar/sidebar.component'; import { SidebarItemComponent } from '../lib/components/sidebar/sidebar-item.component'; import { CardComponent } from '../lib/components/cards/card.component'; import { ListItemComponent } from '../lib/components/list-item/list-item.component'; -import SeparatorComponent from '../lib/components/separator/separator.component'; +import { SeparatorComponent } from '../lib/components/separator/separator.component'; +import { CheckboxComponent } from '../lib/components/checkbox/checkbox.component'; /** * Register tags for components. @@ -23,6 +24,7 @@ customElements.define('nde-large-card', CardComponent); customElements.define('card-header', ContentHeaderComponent); customElements.define('list-item', ListItemComponent); customElements.define('separator-component', SeparatorComponent); +customElements.define('checkbox-component', CheckboxComponent); /** * Enable mocks for fetch. From 9e9c795ef3ade18a3bc3c857c5840c1bb9df073b Mon Sep 17 00:00:00 2001 From: Arne Vandoorslaer Date: Tue, 12 Oct 2021 15:47:31 +0200 Subject: [PATCH 6/6] fix: export component --- packages/dgt-components/lib/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/dgt-components/lib/index.ts b/packages/dgt-components/lib/index.ts index 6d31ec6d..d48191c0 100644 --- a/packages/dgt-components/lib/index.ts +++ b/packages/dgt-components/lib/index.ts @@ -35,6 +35,7 @@ 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 './components/checkbox/checkbox.component'; export * from './models/holder.model'; export * from './models/invite.model'; export * from './models/issuer.model'; @@ -52,3 +53,4 @@ export * from './services/i18n/mock-translator'; export * from './services/i18n/translator'; export * from './util/define'; export * from './util/hydrate'; +