feat: develop checkbox component (#74)

* feat: added checkbox component

* fix: checkbox card

* fix: styling for checkbox

* feat: added properties

* test: added for checkbox

* fix: export component

packages/dgt-components/demo/demo.ts

@@ -7,6 +7,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';
 
 
 
@@ -17,6 +18,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();
 
@@ -56,4 +58,4 @@ document.addEventListener(ComponentEventType.WRITE, (event: ComponentWriteEvent)
     detail: { ...event.detail, cause: event, success: true },
   })), 2000);
 
-});
+});

packages/dgt-components/demo/index.html

@@ -13,6 +13,12 @@
   <!-- just a placeholder for serving in develop -->
   <script>window.global = window;</script>
   <script type="module" src="./demo.ts"></script>
+  <nde-card hideImage hideHeader>
+    <checkbox-component slot="content" checked>Ik geef mijn toestemming</checkbox-component>
+    <checkbox-component slot="content">Ik geef mijn toestemming</checkbox-component>
+    <checkbox-component slot="content">Ik geef mijn toestemming</checkbox-component>
+  </nde-card>
+
   <demo-auth></demo-auth>
 
   <list-item>

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);
+
+  });
+
+});

packages/dgt-components/lib/components/checkbox/checkbox.component.ts

@@ -0,0 +1,113 @@
+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.
+ */
+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;
+
+  @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(): TemplateResult {
+
+    return html`
+    <label class="container">  
+        <input @change="${this.toggle}" type="checkbox" ?checked="${this.checked}" value="${ifDefined(this.value)}">
+        <span class="check">${unsafeSVG(Checkbox)}</span>
+        <slot></slot>
+    </label>
+  `;
+
+  }
+  /**
+   * The styles associated with the component.
+   */
+  static get styles(): CSSResult[] {
+
+    return [
+      unsafeCSS(Theme),
+      css`
+        .container {
+            position: relative;
+            cursor: pointer;
+            -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 {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+        }
+        
+        .check {
+            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 ~ .check svg {
+            display: none;
+        } 
+
+        .container input:checked ~ .check svg {
+            display: block
+        } 
+  `,
+    ];
+
+  }
+
+}
+
+export default CheckboxComponent;

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';
+

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 @@
       "<rootDir>/lib/demo/"
     ]
   }
-}
+}

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.

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