fix: checkbox accessibility (#195)

* fix: checkbox accessibility

* fix: tappable area and variables

* tests: update checkobox tests

src/components.d.ts

@@ -103,7 +103,7 @@ export namespace Components {
         "size": Size;
     }
     interface DHorizontalStack {
-        "gap": 2 | 4 | 8;
+        "gap": Gap;
     }
     interface DIcon {
         "icon": string;
@@ -710,7 +710,7 @@ declare namespace LocalJSX {
         "size"?: Size;
     }
     interface DHorizontalStack {
-        "gap"?: 2 | 4 | 8;
+        "gap"?: Gap;
     }
     interface DIcon {
         "icon"?: string;

src/components/activity-card/readme.md

@@ -11,6 +11,7 @@
 | ------------- | ------------- | ----------- | --------- | ----------- |
 | `date`        | `date`        |             | `string`  | `undefined` |
 | `description` | `description` |             | `string`  | `undefined` |
+| `href`        | `href`        |             | `string`  | `undefined` |
 | `logo`        | `logo`        |             | `string`  | `undefined` |
 | `message`     | `message`     |             | `string`  | `undefined` |
 | `read`        | `read`        |             | `boolean` | `false`     |

src/components/checkbox/d-checkbox.css

@@ -1,3 +1,20 @@
 :host {
   display: block;
 }
+ion-checkbox {
+  --checkbox-background: var(--highlight);
+  --checkbox-background-checked: var(--accent);
+  width: 48px;
+  height: 48px;
+  justify-items: center;
+  margin-left: -12px;
+
+}
+ion-checkbox::part(container) {
+  border-radius: 1px;
+  border: 2px solid;
+  border-color: var(--on-alt);
+  --checkmark-color: var(--stroke);
+  --checkmark-width:3px;
+  --size: 22px;
+}

src/components/checkbox/d-checkbox.tsx

@@ -18,7 +18,7 @@ export class DCheckbox {
     return (
       <Host>
         <d-vertical-stack>
-          <d-horizontal-stack>
+          <d-horizontal-stack class="items-center" gap={0}>
             <ion-checkbox onIonChange={e => this.updateValue(e.detail.checked)} checked={this.checked}></ion-checkbox>
             <div>
               <slot />

src/components/checkbox/test/d-checkbox.spec.tsx

@@ -11,7 +11,7 @@ describe('d-checkbox', () => {
       <d-checkbox>
         <mock:shadow-root>
           <d-vertical-stack>
-           <d-horizontal-stack>
+           <d-horizontal-stack class="items-center" gap="0">
              <ion-checkbox></ion-checkbox>
              <div>
                <slot></slot>

src/components/horizontal-stack/d-horizontal-stack.tsx

@@ -1,12 +1,13 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import { Gap } from '../types';
 
 @Component({
   tag: 'd-horizontal-stack',
   styleUrl: 'd-horizontal-stack.css',
   shadow: true,
 })
 export class DHorizontalStack {
-  @Prop() gap: 2 | 4 | 8 = 2;
+  @Prop() gap: Gap = 2;
 
   render() {
     return (

src/components/horizontal-stack/readme.md

@@ -5,9 +5,9 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type          | Default |
-| -------- | --------- | ----------- | ------------- | ------- |
-| `gap`    | `gap`     |             | `2 \| 4 \| 8` | `2`     |
+| Property | Attribute | Description | Type               | Default |
+| -------- | --------- | ----------- | ------------------ | ------- |
+| `gap`    | `gap`     |             | `0 \| 2 \| 4 \| 8` | `2`     |
 
 
 ## Dependencies