feat(checkbox): element checkbox

websublime · Aug 1, 2023 · f9d2022 · f9d2022
1 parent f45bd25
commit f9d2022
Show file tree

Hide file tree

Showing 11 changed files with 238 additions and 7 deletions.
diff --git a/.changeset/rude-ligers-ring.md b/.changeset/rude-ligers-ring.md
@@ -0,0 +1,9 @@
+---
+'@websublime/vitamin-theme': minor
+'@websublime/vitamin-docs': minor
+'@websublime/vitamin-ui': minor
+---
+
+Checkbox element
+
+Checkbox with checkmark and readjust ui development script for styling with tailwind. Page is now able to use tailwind without affecting elements styles
diff --git a/packages/docs/stories/checkbox/checkbox.stories.ts b/packages/docs/stories/checkbox/checkbox.stories.ts
@@ -0,0 +1,80 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { CheckboxElement } from '@websublime/vitamin-ui/element/checkbox.js';
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { registerComponents } from '../loader.js';
+
+registerComponents();
+
+type Story = StoryObj;
+
+/**
+ * # Switch stories
+ * These stories showcase the switch
+ */
+const meta: Meta<CheckboxElement> = {
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Property to set default checked state'
+    }
+  },
+  component: 'ui-checkbox',
+  // rome-ignore lint/suspicious/noExplicitAny: <explanation>
+  decorators: [withActions as any],
+  parameters: {
+    actions: {
+      handles: ['change']
+    }
+  },
+  tags: ['autodocs'],
+  title: 'Elements/Checkbox'
+};
+
+export default meta;
+
+/**
+ * # Simple Checkbox
+ * Checkbox with no label
+ */
+export const Checkbox: Story = {
+  args: { checked: false },
+  render: ({ checked }) => html`<ui-checkbox .checked="${checked}"></ui-checkbox>`
+};
+
+/**
+ * # Styling Checkbox
+ * How to style Checkbox. Css variables are present in .ui-checkbox class.
+ */
+export const CheckboxStyle: Story = {
+  render: () => html`
+    <style>
+      .switch-props {
+        --checkbox-checked-color: theme('colors.grey-dark');
+        --checkbox-background-color: theme('colors.white');
+        --checkbox-hover-color: theme('colors.grey-dark');
+        --checkbox-diameter: 20px;
+        --checkbox-border-radius: 5px;
+        --checkbox-border-color: theme('colors.grey');
+        --checkbox-border-width: 1px;
+        --checkbox-border-style: solid;
+        --checkbox-checkmark-size: 1.2;
+      }
+    </style>
+
+    <p>See show code</p>
+  `
+};
+
+/**
+ * # Label Checkbox
+ * Checkbox with label
+ */
+export const CheckboxLabel: Story = {
+  args: {},
+  render: ({ name }) =>
+    html` <ui-checkbox><span class="text-black dark:text-white" slot="label">Checked</span></ui-checkbox> `
+};
diff --git a/packages/docs/stories/loader.ts b/packages/docs/stories/loader.ts
@@ -1,7 +1,9 @@
+import { registerComponent as registerCheckbox } from '@websublime/vitamin-ui/plugin/checkbox.js';
 import { registerComponent as registerIcon } from '@websublime/vitamin-ui/plugin/icon.js';
 import { registerComponent as registerSwitch } from '@websublime/vitamin-ui/plugin/switch.js';
 
 export function registerComponents() {
   customElements.get('ui-icon') || registerIcon();
   customElements.get('ui-switch') || registerSwitch();
+  customElements.get('ui-checkbox') || registerCheckbox();
 }
diff --git a/packages/docs/stories/style.css b/packages/docs/stories/style.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind utilities;
 @tailwind components;
+
+@layer base {
+  body {
+    --font-size: 16px;
+  }
+}
diff --git a/packages/theme/src/css/utilities/properties.css b/packages/theme/src/css/utilities/properties.css
@@ -27,3 +27,15 @@
   --switch-button-left: 3px;
   --switch-button-bottom: 3px;
 }
+
+.checkbox-props {
+  --checkbox-checked-color: theme('colors.grey-dark');
+  --checkbox-background-color: theme('colors.white');
+  --checkbox-hover-color: theme('colors.grey-dark');
+  --checkbox-diameter: 20px;
+  --checkbox-border-radius: 5px;
+  --checkbox-border-color: theme('colors.grey');;
+  --checkbox-border-width: 1px;
+  --checkbox-border-style: solid;
+  --checkbox-checkmark-size: 1.2;
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -9,17 +9,19 @@
 |
 */
 
-import { join, resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import convert from 'color-convert';
-import { readFileSync } from 'fs-extra';
 import { parse } from 'postcss';
 import postcssJs from 'postcss-js';
-import { withOptions } from 'tailwindcss/plugin.js';
+import plugin from 'tailwindcss/plugin.js';
 
 import { palette } from './colors.js';
 import { defineTheme } from './themes.js';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const hslToString = ([hue, saturation, lightness]) => `${hue}deg ${saturation}% ${lightness}%`;
 
 const setupTheme = (themeDescriptor) => {
@@ -44,7 +46,7 @@ const setupTheme = (themeDescriptor) => {
   return base;
 };
 
-export default withOptions(
+export default plugin.withOptions(
   () => {
     return function ({ addBase, addUtilities, config }) {
       const name = config('vitamin.theme.name', 'orizon');

diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
@@ -18,7 +18,7 @@ export const defineTheme = (options = { colors: {}, globals: {} }) => {
   mapper.set('globals', {
     fontFamily:
       'Lato, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
-    opacityColor: '1',
+    'opacity-color': '1',
     ...options.globals
   });
 

diff --git a/packages/ui/build.mjs b/packages/ui/build.mjs
@@ -2,8 +2,8 @@ import { readFile } from 'node:fs/promises';
 
 // eslint-disable-next-line import/no-unresolved
 import clean from '@akrc/esbuild-plugin-clean';
-// eslint-disable-next-line import/no-unresolved
 import vitaminTheme from '@websublime/vitamin-theme';
+// eslint-disable-next-line import/no-unresolved
 import postcssAutoprefixer from 'autoprefixer';
 import { context } from 'esbuild';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -69,6 +69,14 @@
     "./plugin/switch.js": {
       "types": "./dist/elements/switch/plugin.d.ts",
       "default": "./dist/elements/switch/plugin.js"
+    },
+    "./element/checkbox.js": {
+      "types": "./dist/elements/checkbox/index.d.ts",
+      "default": "./dist/elements/checkbox/index.js"
+    },
+    "./plugin/checkbox.js": {
+      "types": "./dist/elements/checkbox/plugin.d.ts",
+      "default": "./dist/elements/checkbox/plugin.js"
     }
   },
   "publishConfig": {

diff --git a/packages/ui/src/elements/checkbox/style.css b/packages/ui/src/elements/checkbox/style.css
@@ -3,6 +3,102 @@
 
 @layer components {
   :host {
-    @apply flex flex-wrap content-center;
+    @apply checkbox-props flex flex-wrap content-center;
+  }
+
+  .ui-checkbox-label {
+    @apply flex;
+  }
+
+  slot[name=lable]::slotted(*) {
+    display: inline-flex;
+  }
+
+  input[type="checkbox"],
+  input[type="checkbox"] *,
+  input[type="checkbox"] *::before,
+  input[type="checkbox"] *::after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: var(--checkbox-diameter);
+    height: var(--checkbox-diameter);
+    border-radius: var(--checkbox-border-radius);
+    background: var(--checkbox-background-color);
+    border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+    cursor: pointer;
+    position: relative;
+  }
+
+  input[type="checkbox"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
+    box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--checkbox-checked-color);
+    border-radius: inherit;
+    opacity: 0;
+    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+    -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  }
+
+  input[type="checkbox"]::before {
+    top: 40%;
+    left: 50%;
+    content: "";
+    position: absolute;
+    width: 4px;
+    height: 7px;
+    border-right: 2px solid var(--checkbox-background-color);
+    border-bottom: 2px solid var(--checkbox-background-color);
+    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    opacity: 0;
+    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
+    -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
+  }
+
+  /* actions */
+
+  input[type="checkbox"]:hover {
+    border-color: var(--checkbox-hover-color);
+  }
+
+  input[type="checkbox"]:checked {
+    background: var(--checkbox-checked-color);
+    border-color: transparent;
+  }
+
+  input[type="checkbox"]:checked::before {
+    opacity: 1;
+    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkbox-checkmark-size));
+    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkbox-checkmark-size));
+    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkbox-checkmark-size));
+    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  }
+
+  input[type="checkbox"]:active:not(:checked)::after {
+    -webkit-transition: none;
+    -o-transition: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    transition: none;
+    opacity: 1;
   }
 }
diff --git a/packages/ui/www/index.html b/packages/ui/www/index.html
@@ -67,6 +67,7 @@
               <th>Properties</th>
               <th>CSS Properties</th>
             </tr>
+
             <tr>
               <td>
                 <p>Name: ui-icon</p>
@@ -77,6 +78,7 @@
               <td>TODO</td>
               <td>TODO</td>
             </tr>
+
             <tr>
               <td>
                 <p>Name: ui-switch</p>
@@ -96,6 +98,20 @@
               <td>TODO</td>
               <td>TODO</td>
             </tr>
+
+            <tr>
+              <td>
+                <p>Name: ui-checkbox</p>
+              </td>
+              <td>
+                <ui-checkbox></ui-checkbox>
+                <ui-checkbox>
+                  <span slot="label">Check</span>
+                </ui-checkbox>
+              </td>
+              <td>TODO</td>
+              <td>TODO</td>
+            </tr>
           </table>
         </div>
       </div>