Add Toniq Checkbox Variant Button (#124)

Toniq-Labs · Jun 12, 2024 · c3d218a · c3d218a
1 parent 1bfe2fe
commit c3d218a
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.16.4",
+    "version": "16.17.0",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.16.4",
+    "version": "16.17.0",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-checkbox/toniq-checkbox.element.book.ts b/packages/design-system/src/elements/toniq-checkbox/toniq-checkbox.element.book.ts
@@ -6,7 +6,7 @@ import {
     cssVarsToPageControls,
 } from '../../element-book/book-helpers/css-var-page-controls';
 import {elementsBookPage} from '../../element-book/book-pages/elements.book';
-import {ToniqCheckbox} from './toniq-checkbox.element';
+import {ToniqCheckbox, ToniqCheckboxVariantEnum} from './toniq-checkbox.element';
 
 const exampleVariations: ReadonlyArray<{
     title: string;
@@ -16,6 +16,12 @@ const exampleVariations: ReadonlyArray<{
         title: 'default',
         inputs: {},
     },
+    {
+        title: 'button',
+        inputs: {
+            variant: ToniqCheckboxVariantEnum.Button,
+        },
+    },
     {
         title: 'disabled',
         inputs: {

diff --git a/packages/design-system/src/elements/toniq-checkbox/toniq-checkbox.element.ts b/packages/design-system/src/elements/toniq-checkbox/toniq-checkbox.element.ts
@@ -1,4 +1,4 @@
-import {classMap, css, defineElementEvent, html, listen} from 'element-vir';
+import {classMap, css, defineElementEvent, html, listen, renderIf} from 'element-vir';
 import {noNativeFormStyles, noUserSelect} from 'vira';
 import {CheckMark24Icon} from '../../icons/svgs/core-24/check-mark-24.icon';
 import {toniqDurations} from '../../styles/animation';
@@ -7,11 +7,18 @@ import {toniqDisabledStyles} from '../../styles/disabled';
 import {createFocusStyles} from '../../styles/focus';
 import {toniqFontStyles} from '../../styles/fonts';
 import {defineToniqElement} from '../define-toniq-element';
+import {ToniqButton, ToniqButtonVariantEnum} from '../toniq-button/toniq-button.element';
 import {ToniqIcon} from '../toniq-icon/toniq-icon.element';
 
+export enum ToniqCheckboxVariantEnum {
+    Default = 'default',
+    Button = 'button',
+}
+
 export const ToniqCheckbox = defineToniqElement<{
     text?: string | undefined;
     disabled?: boolean | undefined;
+    variant?: ToniqCheckboxVariantEnum;
     checked: boolean;
 }>()({
     tagName: 'toniq-checkbox',
@@ -113,31 +120,45 @@ export const ToniqCheckbox = defineToniqElement<{
         }
     `,
     renderCallback({inputs, dispatch, events}) {
-        const iconTemplate = html`
-            <span class="checkbox ${inputs.checked ? 'checked' : ''}">
-                <${ToniqIcon.assign({icon: CheckMark24Icon})}
-                    class="check-mark ${classMap({hidden: !inputs.checked})}"
-                ></${ToniqIcon}>
-            </span>
-        `;
+        const iconTemplate = renderIf(
+            inputs.variant !== ToniqCheckboxVariantEnum.Button,
+            html`
+                <span class="checkbox ${inputs.checked ? 'checked' : ''}">
+                    <${ToniqIcon.assign({icon: CheckMark24Icon})}
+                        class="check-mark ${classMap({hidden: !inputs.checked})}"
+                    ></${ToniqIcon}>
+                </span>
+            `,
+        );
 
-        const textTemplate = html`
-            <slot
-                class=${classMap({
-                    label: true,
-                    checked: inputs.checked,
-                })}
-            >
-                <span
+        const textTemplate = renderIf(
+            inputs.variant !== ToniqCheckboxVariantEnum.Button,
+            html`
+                <slot
                     class=${classMap({
                         label: true,
                         checked: inputs.checked,
                     })}
                 >
-                    ${inputs.text}
-                </span>
-            </slot>
-        `;
+                    <span
+                        class=${classMap({
+                            label: true,
+                            checked: inputs.checked,
+                        })}
+                    >
+                        ${inputs.text}
+                    </span>
+                </slot>
+            `,
+            html`
+                <${ToniqButton.assign({
+                    text: inputs.text,
+                    variant: inputs.checked
+                        ? ToniqButtonVariantEnum.Default
+                        : ToniqButtonVariantEnum.Outline,
+                })}></${ToniqButton}>
+            `,
+        );
 
         return html`
             <button

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.16.4",
+    "version": "16.17.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.16.4",
+    "version": "16.17.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",