feat: initial setup of button classes (#48)

Co-authored-by: Fabian Gaukler <fabian.gaukler@holisticon.de>

.changeset/rare-rings-count.md

@@ -0,0 +1,6 @@
+---
+"@holisticon/hap-documentation": minor
+"@holisticon/hap-foundation": minor
+---
+
+Added buttons and styling for them

package.json

@@ -32,6 +32,7 @@
     "lint-staged": "^15.2.4",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
+    "storybook-addon-pseudo-states": "4.0.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.0.0-alpha.16"
   }

packages/documentation/.storybook/main.ts

@@ -3,8 +3,8 @@ import type { StorybookConfig } from "@storybook/web-components-vite";
 const config: StorybookConfig = {
   framework: "@storybook/web-components-vite",
   core: { disableTelemetry: true },
-  stories: ["../src/**/*.mdx"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.ts"],
+  addons: ["@storybook/addon-essentials", "storybook-addon-pseudo-states"],
 };
 
 export default config;

packages/documentation/src/elements/button/button-story-helpers.ts

@@ -0,0 +1,91 @@
+import type { ArgTypes } from "@storybook/web-components";
+import { html } from "lit";
+
+type ButtonSize = "default" | "small";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "destructive";
+type ButtonIconPosition = "left" | "right";
+type ColorScheme = "light" | "dark";
+
+export const buttonArgs = (variant: ButtonVariant): ButtonArgs => ({
+  variant,
+  size: "default",
+  disabled: false,
+  iconPosition: "left",
+  label: "",
+});
+
+export const buttonArgTypes: Partial<ArgTypes<ButtonArgs>> = {
+  variant: {
+    control: { type: "select" },
+    options: ["primary", "secondary", "tertiary", "destructive"],
+  },
+  size: {
+    control: { type: "select" },
+    options: ["default", "small"],
+  },
+};
+
+export interface ButtonArgs {
+  label: string;
+  variant: ButtonVariant;
+  size: ButtonSize;
+  disabled: boolean;
+  icon?: string;
+  iconPosition: ButtonIconPosition;
+}
+
+export const renderButtons = (args: ButtonArgs, colorScheme: ColorScheme) =>
+  html`<div
+    style="display:flex;gap:0.5rem;flex-direction:column;padding:2rem;color-scheme:${colorScheme};background-color:${colorScheme ===
+    "light"
+      ? "white"
+      : "black"}"
+  >
+    ${renderButton({ ...args, size: "default", label: "Default" })}
+    ${renderButton({
+      ...args,
+      size: "default",
+      label: "Default",
+      icon: "[Icon]",
+    })}
+    ${renderButton({
+      ...args,
+      size: "default",
+      label: "Default",
+      icon: "[Icon]",
+      iconPosition: "right",
+    })}
+    ${renderButton({ ...args, size: "small", label: "Small" })}
+    ${renderButton({
+      ...args,
+      size: "small",
+      label: "Small",
+      icon: "[Icon]",
+    })}
+    ${renderButton({
+      ...args,
+      size: "small",
+      label: "Small",
+      icon: "[Icon]",
+      iconPosition: "right",
+    })}
+  </div> `;
+
+const renderButton = (args: ButtonArgs) => {
+  return html`
+    <button
+      class="hap-button ${args.variant} ${args.size} ${args.disabled
+        ? "disabled"
+        : ""}"
+      ?disabled=${args.disabled}
+    >
+      ${args.icon && args.iconPosition === "left"
+        ? html`<span class="icon">${args.icon}</span>`
+        : ""}
+      ${args.label}
+      ${args.icon && args.iconPosition === "right"
+        ? html`<span class="icon">${args.icon}</span>`
+        : ""}
+    </button>
+  `;
+};

packages/documentation/src/elements/button/button.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import {
+  buttonArgs,
+  buttonArgTypes,
+  renderButtons,
+  type ButtonArgs,
+} from "./button-story-helpers.js";
+
+const meta: Meta<ButtonArgs> = {
+  argTypes: buttonArgTypes,
+
+  render: (args) =>
+    html`<div style="display:flex;gap:1rem">
+      ${renderButtons(args, "light")}${renderButtons(args, "dark")}
+    </div>`,
+};
+
+export default meta;
+
+export type Story = StoryObj<ButtonArgs>;
+
+export const ButtonPrimary: Story = { args: buttonArgs("primary") };
+export const ButtonSecondary: Story = { args: buttonArgs("secondary") };
+export const ButtonTertiary: Story = { args: buttonArgs("tertiary") };
+export const ButtonDestructive: Story = { args: buttonArgs("destructive") };

packages/documentation/src/elements/button/buttons.mdx

@@ -0,0 +1,24 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as ButtonStories from "./button.stories.ts";
+
+<Meta title="Elements/button/Buttons" />
+
+# Buttons
+
+The following kinds of buttons are available.
+
+## Primary Button
+
+<Canvas of={ButtonStories.ButtonPrimary} />
+
+## Secondary Button
+
+<Canvas of={ButtonStories.ButtonSecondary} />
+
+## Tertiary Button
+
+<Canvas of={ButtonStories.ButtonTertiary} />
+
+## Destructive Button
+
+<Canvas of={ButtonStories.ButtonDestructive} />