WIP: feat(elements) add textfield element

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"],
 };
 
 export default config;

packages/documentation/.storybook/preview.ts

@@ -4,6 +4,7 @@ import { holisticonTheme } from "./theme.js";
 
 const preview: Preview = {
   parameters: { docs: { theme: holisticonTheme } },
+  tags: ["autodocs"],
 };
 
 export default preview;

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import { when } from "lit/directives/when.js";
+
+interface TextfieldArgs {
+  label: string;
+  disabled: boolean;
+  required: boolean;
+}
+
+const meta: Meta<TextfieldArgs> = {
+  args: {
+    label: "Textfield",
+    disabled: false,
+    required: false,
+  },
+  render: (args) => html`
+    <div class="hap-textfield">
+      <label for="textfield">
+        ${args.label}${when(
+          args.required,
+          () => html`<span aria-hidden="true">*</span>`,
+        )}
+      </label>
+      <input
+        id="textfield"
+        ?required=${args.required}
+        ?disabled=${args.disabled}
+      />
+      <span class="hap-textfield-error">This is a error message</span>
+    </div>
+  `,
+};
+
+export default meta;
+type Story = StoryObj<TextfieldArgs>;
+
+export const Default: Story = {};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    label: "Enter and Remove Text",
+    required: true,
+  },
+};

packages/foundation/atomic-playfulness.tokens.json

@@ -149,6 +149,9 @@
       "500": { "$value": "#C7CFEB" },
       "600": { "$value": "#B3BCD3" },
       "700": { "$value": "#9CA4B8" }
+    },
+    "secondary": {
+      "bright-red": { "$value": "#EB4B2D" }
     }
   }
 }

packages/foundation/src/atomic-playfulness.css

@@ -1,3 +1,5 @@
 @import "../dist/tokens.css";
 @import "./es-klarheit.css";
+
 @import "./elements/typography.css";
+@import "./elements/textfield.css";

packages/foundation/src/elements/textfield.css

@@ -0,0 +1,70 @@
+.hap-textfield {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hap-space-xxSmall);
+
+  & > label,
+  & > input {
+    /* Copied from hap-text */
+    font-family: var(--hap-text-font-family);
+    font-size: var(--hap-text-font-size);
+    font-weight: var(--hap-text-font-weight);
+    letter-spacing: var(--hap-text-letter-spacing);
+    line-height: var(--hap-text-line-height);
+  }
+
+  & > label {
+    display: flex;
+    gap: var(--hap-space-xxSmall);
+    padding-inline-start: var(--hap-space-large);
+  }
+
+  & > input {
+    /* TODO: Do we need tokens for transitions stuff? */
+    transition: all 150ms linear;
+    background-color: var(--hap-color-neutral-white);
+    padding-inline: var(--hap-space-large);
+    padding-block: var(--hap-space-small);
+    /* TODO: We need tokens for border and outline stuff.. */
+    border: 2px solid var(--hap-color-forest-green-500);
+    border-radius: 1000rem;
+  }
+
+  & > input:hover {
+    background-color: var(--hap-color-blue-gray-300);
+  }
+
+  & > input:focus-visible {
+    outline: 2px solid var(--hap-color-forest-green-500);
+    outline-offset: 1px;
+  }
+
+  & > input:disabled {
+    pointer-events: none;
+    border-color: var(--hap-color-blue-gray-700);
+    background-color: var(--hap-color-blue-gray-400);
+  }
+
+  & > input:user-invalid {
+    border-color: var(--hap-color-secondary-bright-red);
+  }
+
+  & .hap-textfield-error {
+    /* TODO: How do we deal with error messages and content shifting?
+    Do they always reserve their space, i.e. visibility: hidden,
+    or do the claim space when needed? */
+    display: none;
+    padding-inline-start: var(--hap-space-large);
+    color: var(--hap-color-secondary-bright-red);
+    /* Copied from hap-text-small */
+    font-family: var(--hap-text-small-font-family);
+    font-size: var(--hap-text-small-font-size);
+    font-weight: var(--hap-text-small-font-weight);
+    letter-spacing: var(--hap-text-small-letter-spacing);
+    line-height: var(--hap-text-small-line-height);
+  }
+
+  &:has(input:user-invalid) > .hap-textfield-error {
+    display: initial;
+  }
+}