chore: finish cz-button

env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css?inline' {
+  import { CSSResultGroup } from 'lit';
+  const content: CSSResultGroup;
+  export default content;
+}

lib/storybook/.storybook/main.ts

@@ -4,7 +4,7 @@ import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../../../packages/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  stories: ['../../../packages/**/src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/web-components-vite',

packages/button/src/index.ts

@@ -1 +1 @@
-export * from './lib/button.js';
+export * from './lib/button.component.js';

packages/button/src/lib/button.ts → packages/button/src/lib/button.component.ts

@@ -4,52 +4,37 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { spread } from '@open-wc/lit-helpers';
 import classNames from 'classnames';
+import { CZButtonProps, CZButtonAppearance, CZButtonSize } from './button.types.js';
 
 import { CraftzingElement, createStyles } from '@design-system/common';
 
-// import { ChLoader } from '../loader/loader.component.ts';
-// import { ChIcon } from '../icon/icon.component.ts';
+import buttonStyle from './button.css?inline';
 
-import buttonStyle from "./button.css?inline";
-
-/**
- * @tag cz-button
- * @summary Buttons indicate possible actions or choices to a user.
- *
- * @csspart base - The component's base wrapper.
- * @csspart content - The component's content.
- */
-class CZButton extends CraftzingElement {
+class CZButton extends CraftzingElement implements CZButtonProps {
   static styles:CSSResultGroup = createStyles(buttonStyle);
 
-  @property({ type: String, reflect: true })
-  appearance: 'default' | 'primary' | 'secondary' | 'tertiary' | undefined = 'default';
-
-  @property({ type: String, reflect: true })
-  size: "sm" | "lg" | undefined = "lg";
+  @property({ reflect: true })
+  appearance: CZButtonAppearance = "default";
 
   @property({ type: String, reflect: true })
-  width: "auto" | "full" | undefined = "auto";
+  size: CZButtonSize = "large";
 
   @property({ type: String, reflect: true })
-  href: string | undefined;
+  href = undefined;
 
-  // static dependencies = {
-  //   'ch-loader': ChLoader,
-  //   'ch-icon': ChIcon,
-  // };
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   render() {
-    // const iconSize = this.size === 'sm' ? 'sm' : 'md';
     const tag = this.href ? literal`a` : literal`button`;
+    console.log(this.disabled);
 
     return html`<${tag}
       ${spread(this.undeclaredAttributes)}
       class="${classNames([
        'button',
         `button--appearance-${this.appearance}`,
         `button--size-${this.size}`,
-        `button--width-${this.width}`,
       ])}"
       href="${ifDefined(this.href && !this.disabled ? this.href : undefined)}"
       ?disabled="${this.disabled}"

packages/button/src/lib/button.css

@@ -5,8 +5,6 @@
   align-items: center;
   justify-content: center;
 
-  font-family: sans-serif;
-  font-size: 1rem;
   line-height: 1.2;
   font-weight: 700;
 
@@ -16,22 +14,61 @@
   --btn-transition: all 0.2s ease-in-out 0s;
   transition: var(--btn-transition);
 
-  border: var(--px-border-m) solid transparent;
-
-  --slotted-icon-size: var(--px-icon-size-xs-mobile);
-
-  &:hover:not([disabled], [aria-disabled='true']),
-  &:focus:not([disabled], [aria-disabled='true']) {
-    border-color: var(--px-color-border-action-hover-default);
-    outline: 0;
-  }
+  border: 0.125rem solid transparent;
 
   &:active {
     transform: scale(0.95);
   }
 
+  &:hover,
+  &:focus-visible {
+    opacity: 0.95;
+  }
+
   &:where([disabled], [aria-disabled='true']) {
     cursor: default;
     pointer-events: none;
   }
+}
+
+.button--appearance-default {
+  background-color: plum;
+  color: rgb(29, 29, 29);
+
+  &:where([disabled], [aria-disabled='true']) {
+    background-color: rgb(182, 146, 182);
+    color: rgb(55, 55, 55);
+  }
+}
+
+.button--appearance-primary {
+  background-color: rebeccapurple;
+  color: whitesmoke;
+
+  &:where([disabled], [aria-disabled='true']) {
+    background-color: rgb(152, 102, 202);
+    color: white;
+  }
+}
+
+.button--appearance-secondary {
+  background-color: whitesmoke;
+  color: rebeccapurple;
+
+  &:where([disabled], [aria-disabled='true']) {
+    background-color: rgb(239, 239, 239);
+    color: rgb(152, 102, 202);
+  }
+}
+
+.button--size-small {
+  padding: 0.25rem 0.75rem;
+  font-family: sans-serif;
+  font-size: 1rem;
+}
+
+.button--size-large {
+  padding: 0.5rem 1.25rem;
+  font-family: sans-serif;
+  font-size: 1.25rem;
 }

packages/button/src/lib/button.stories.ts

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { CZButton } from './button.component.js';
+import { CZButtonProps } from './button.types.js';
+
+CZButton.define('cz-button');
+
+export default {
+  title: "Components/Button",
+  component: "cz-button",
+  tags: ["autodocs"],
+  render: ({appearance, size, href, disabled}: CZButtonProps) => html`<cz-button
+    appearance=${ifDefined(appearance)}
+    size=${ifDefined(size)}
+    href=${ifDefined(href)}
+    ?disabled=${disabled}
+  >
+    Craftzing button
+  </cz-button>`,
+  argTypes: {
+    appearance: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'primary', 'secondary'],
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'large'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    href: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Appearance = {
+  args: {
+    appearance: 'primary',
+    size: undefined,
+  },
+};
+
+export const Size = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Link = {
+  args: {
+    href: 'https://craftzing.com',
+  },
+};

packages/button/src/lib/button.types.ts

@@ -0,0 +1,8 @@
+export type CZButtonAppearance = 'default' | 'primary' | 'secondary';
+export type CZButtonSize = 'small' | 'large';
+export type CZButtonProps = {
+  appearance?: CZButtonAppearance;
+  size?: CZButtonSize;
+  href?: string;
+  disabled?: boolean;
+}

tsconfig.base.json

@@ -5,6 +5,9 @@
     "emitDeclarationOnly": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "include": [
+      "./env.d.ts",
+    ],
     "isolatedModules": true,
     "lib": ["es2022", "DOM", "DOM.Iterable"],
     "module": "nodenext",
@@ -22,6 +25,7 @@
     ],
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2022"
+    "target": "es2022",
+    "useDefineForClassFields": false,
   }
 }