srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/forms/form-errors/InputError.vue

@@ -0,0 +1,208 @@
+<template>
+  <div
+    :id
+    class="input-error-message"
+    data-theme="error"
+    :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }]"
+    :data-testid
+    :aria-hidden="!showError"
+  >
+    <div class="inner" :class="[{ show: showError }]">
+      <div class="inner-content">
+        <div class="inner-icon">
+          <Icon name="radix-icons:circle-backslash" class="icon" />
+        </div>
+        <div class="message">
+          <ul v-if="isArray" class="message-list">
+            <li v-for="(message, index) in errorMessage" :key="index" class="message-list-item">{{ message }}</li>
+          </ul>
+          <span v-else class="message-single">
+            {{ errorMessage }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  errorMessage: string | string[] | object;
+  showError: boolean;
+  id: string;
+  styleClassPassthrough?: string | string[];
+  compact?: boolean;
+  isDetached: boolean;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "inputError",
+  styleClassPassthrough: () => [],
+  compact: false,
+  inputVariant: "normal",
+});
+
+const isArray = computed(() => {
+  return Array.isArray(props.errorMessage);
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.input-error-message {
+  grid-row: 2;
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: 0fr;
+
+  color: var(--input-error-color);
+  background-color: var(--theme-error-surface);
+  opacity: 0;
+
+  transition:
+    grid-template-rows var(--theme-form-transition-duration) linear,
+    opacity var(--theme-form-transition-duration) linear,
+    margin-block-start var(--theme-form-transition-duration) linear;
+
+  transition-behavior: allow-discrete;
+
+  border-radius: 0;
+  border: var(--form-element-border-width) solid transparent;
+  outline: var(--form-element-outline-width) solid transparent;
+
+  background-clip: padding-box;
+
+  translate: 0 calc(-1 * calc(var(--form-element-border-width) + var(--form-input-border-radius)));
+
+  margin-block-start: var(--input-error-margin-block-start);
+
+  &.underlined {
+    outline-color: transparent;
+  }
+
+  &.detached {
+    margin-block-start: 0rem;
+
+    border-top: var(--form-element-border-width) solid var(--theme-error-surface);
+    border-right: var(--form-element-border-width) solid var(--theme-error-surface);
+    border-bottom: var(--form-element-border-width) solid var(--red-08);
+    border-left: var(--form-element-border-width) solid var(--theme-error-surface);
+
+    border-radius: var(--form-input-border-radius);
+
+    &.underlined {
+      border-radius: 0;
+    }
+  }
+
+  &.show {
+    grid-template-rows: 1fr;
+    display: grid;
+    opacity: 1;
+
+    border: var(--form-element-border-width) solid var(--theme-error-border);
+    outline: var(--form-element-outline-width) solid var(--theme-error-outline);
+
+    &:not(.underlined) {
+      border-bottom-left-radius: var(--form-input-border-radius);
+      border-bottom-right-radius: var(--form-input-border-radius);
+    }
+
+    &.detached {
+      margin-block-start: 2rem;
+    }
+  }
+
+  .inner {
+    align-items: center;
+    overflow: hidden;
+
+    .inner-content {
+      display: flex;
+      align-items: center;
+
+      .inner-icon {
+        display: inline-block;
+        padding-left: 1.2rem;
+
+        .icon {
+          color: white;
+          transform: translateY(3px);
+        }
+      }
+
+      .message {
+        display: inline-block;
+        flex-grow: 1;
+        font-family: var(--font-family);
+        font-size: 1.6rem;
+        font-weight: 500;
+        padding-block: 1rem 1rem;
+        padding-inline: 1.2rem;
+
+        .message-single {
+          color: var(--input-error-color);
+        }
+
+        .message-list {
+          list-style-type: none;
+          padding-inline-start: 0;
+          margin-block-start: 0;
+          margin-block-end: 0;
+
+          .message-list-item {
+            color: white;
+          }
+
+          .message-list-item + .message-list-item {
+            margin-block-start: 0.6rem;
+          }
+        }
+      }
+    }
+  }
+
+  /* Modifiers for input variants: */
+  &:is(.detached) {
+    &.normal {
+      .inner {
+        .inner-content {
+          .message {
+            padding-block: 1.2rem 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  &:not(.detached) {
+    &.normal {
+      .inner {
+        padding-block-start: var(--form-input-border-radius);
+
+        .inner-content {
+          .message {
+            padding-block: 1.2rem 1rem;
+          }
+        }
+      }
+    }
+    &.underlined {
+      .inner {
+        .inner-content {
+          .message {
+            padding-block: 1rem 1rem;
+          }
+        }
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/forms/form-errors/tests/InputError.spec.ts

@@ -0,0 +1,66 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputError.vue";
+
+const initialPropsData = {
+  dataTestid: "inputError",
+  errorMessage: "Hello World",
+  showError: true,
+  id: "testId",
+  styleClassPassthrough: ["testClass"],
+  compact: false,
+  isDetached: true,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    props: mockPropsData,
+  });
+};
+
+describe("InputError Component", () => {
+  it("renders properly", async () => {
+    wrapper = await wrapperFactory();
+
+    // Check the value of the data-testid attribute
+    const dataTestIdValue = wrapper.attributes("data-testid");
+    expect(dataTestIdValue).toBe("inputError");
+
+    expect(wrapper.find("[data-testid]").classes()).toContain("testClass");
+    expect(wrapper.find("[data-testid]").classes()).toContain("show");
+  });
+
+  it("is not displayed by default", async () => {
+    const propData = {
+      showError: false,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find("[data-testid]").classes()).not.toContain("show");
+  });
+
+  it("is displays a single error message", async () => {
+    const propData = {
+      showError: true,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find(".message-list").exists()).toBe(false);
+    expect(wrapper.find(".message-single").text()).toContain("Hello World");
+  });
+
+  it("is displays a single error message", async () => {
+    const propData = {
+      errorMessage: ["Hello World", "Hello World 2"],
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find(".message-single").exists()).toBe(false);
+    expect(wrapper.find(".message-list .message-list-item:first-child").text()).toEqual("Hello World");
+    expect(wrapper.find(".message-list .message-list-item:last-child").text()).toEqual("Hello World 2");
+  });
+});

package/app/components/forms/form-fieldset/FormFieldset.vue

@@ -0,0 +1,75 @@
+<template>
+  <fieldset
+    :id="id"
+    :aria-required="required"
+    :aria-invalid="fieldHasError"
+    role="radiogroup"
+    :name="name"
+    class="form-fieldset"
+    :class="[elementClasses, { error: fieldHasError }]"
+    :data-testid="dataTestid"
+  >
+    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': slots.description }]">
+      <slot name="legend">{{ legend }}</slot>
+    </legend>
+
+    <div class="form-fieldset-content">
+      <slot name="content"></slot>
+    </div>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  id: string;
+  name: string;
+  legend?: string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  dataTestid?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  legend: "",
+  required: false,
+  fieldHasError: false,
+  dataTestid: "",
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.form-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  .form-fieldset-legend {
+    color: var(--form-fieldset-legend-color);
+    margin-block: 0.8rem;
+    font-size: var(--step-5);
+    font-weight: normal;
+    line-height: 1.5;
+
+    &.has-description {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-fieldset-description {
+    font-size: 1.6rem;
+    margin-top: 1.2rem;
+  }
+
+  .form-fieldset-content {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+}
+}
+</style>

package/app/components/forms/input-button/InputButtonCore.vue

@@ -0,0 +1,219 @@
+<template>
+  <component
+    :is="tag"
+    :type="!isLink ? props.type : undefined"
+    :href="isLink ? props.href : undefined"
+    :readonly="!isLink ? props.readonly : undefined"
+    :aria-disabled="!isLink ? props.readonly : undefined"
+    data-testid="input-button-core"
+    :data-theme="theme"
+    class="input-button-core"
+    :class="buttonClasses"
+  >
+    <PendingEffect v-if="hasPendingEffect" />
+
+    <span v-if="hasLeftSlot" class="btn-icon left">
+      <slot name="left"></slot>
+    </span>
+    <span class="button-text" :class="[{ 'sr-only': hasIconOnlySlot }]">{{ buttonText }}</span>
+    <span v-if="hasRightSlot" class="btn-icon right">
+      <slot name="right"></slot>
+    </span>
+    <span v-if="hasIconOnlySlot" class="btn-icon icon-only">
+      <slot name="iconOnly"></slot>
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { InputTypesButton, FormUiTheme, InputButtonVariant } from "~/types/forms/types.forms";
+import { NuxtLink } from "#components";
+interface Props {
+  type?: InputTypesButton;
+  href?: string;
+  theme?: FormUiTheme;
+  variant?: InputButtonVariant;
+  isPill?: boolean;
+  buttonText?: string;
+  isPending?: boolean;
+  hasPendingEffect?: boolean;
+  readonly?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "button",
+  href: undefined,
+  theme: "default",
+  variant: "primary",
+  isPill: false,
+  buttonText: "",
+  isPending: false,
+  hasPendingEffect: false,
+  readonly: false,
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+
+// If href is undefined tag is button, else it's a link
+const isLink = computed(() => Boolean(props.href));
+const isInternalLink = computed(() => isLink.value && props.href && props.href.startsWith("/"));
+const tag = computed(() => {
+  if (isInternalLink.value) return NuxtLink;
+  if (isLink.value) return "a";
+  return "button";
+});
+
+// Cache slot computations for better performance
+const hasLeftSlot = computed(() => Boolean(slots.left && !slots.iconOnly));
+const hasRightSlot = computed(() => Boolean(slots.right && !slots.iconOnly));
+const hasIconOnlySlot = computed(() => Boolean(slots.iconOnly));
+
+// Combine all button classes into a single computed
+const buttonClasses = computed(() => [
+  props.variant,
+  elementClasses.value,
+  { "icon-only": hasIconOnlySlot.value },
+  { "pending-effect": props.hasPendingEffect },
+  { "is-pending": props.isPending },
+  { pill: props.isPill },
+  { "is-link": isLink.value },
+]);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.input-button-core {
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--button-icon-gap);
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  border-radius: var(--button-border-radius);
+  font-family: var(--font-family);
+  padding-inline: var(--button-padding-inline);
+  padding-block: var(--button-padding-block);
+  touch-action: manipulation;
+  overflow: hidden;
+  transition: all var(--control-transition-duration) var(--control-transition-ease);
+
+  &.is-link {
+    display: inline-grid;
+  }
+
+  /*
+  * Variants
+  **/
+  &.primary {
+    background-color: var(--theme-button-primary-surface);
+    color: var(--theme-button-primary-text);
+    border: var(--button-border-width) solid var(--theme-button-primary-border);
+    outline: var(--button-outline-width) solid var(--theme-button-primary-outline);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--theme-button-secondary-surface);
+      color: var(--theme-button-secondary-text);
+      border-color: var(--theme-button-primary-border-active);
+      outline-color: var(--theme-button-primary-outline-active);
+    }
+
+    &.is-pending {
+      background-color: color-mix(in oklab, var(--theme-button-primary-surface) 50%, transparent);
+    }
+  }
+
+  &.secondary {
+    background-color: var(--theme-button-secondary-surface);
+    border: var(--button-border-width) solid var(--theme-button-secondary-border);
+    color: var(--theme-button-secondary-text);
+    outline: var(--button-outline-width) solid var(--theme-button-secondary-outline);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--theme-button-primary-surface);
+      color: var(--theme-button-primary-text);
+      border-color: var(--theme-button-secondary-border-active);
+      outline-color: var(--theme-button-secondary-outline-active);
+    }
+  }
+
+  &.tertiary {
+    background-color: var(--theme-button-tertiary-surface);
+    border: var(--button-border-width) solid transparent;
+    color: var(--theme-button-tertiary-text);
+    text-decoration: underline;
+    outline: var(--button-outline-width) solid transparent;
+
+    &:hover,
+    &:focus-visible {
+      border-color: var(--theme-button-tertiary-border-active);
+      outline-color: var(--theme-button-tertiary-outline-active);
+    }
+  }
+
+  &.primary,
+  &.secondary,
+  &.tertiary {
+    &.pill {
+      border-radius: 100vw;
+    }
+  }
+
+  /*
+  * Shared States
+  **/
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    outline-width: var(--button-focus-ring-width);
+    outline-offset: var(--button-focus-ring-offset);
+  }
+
+  &[readonly] {
+    opacity: 0.5;
+    &:hover,
+    &:focus-visible {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  .button-text {
+    display: inline-block;
+    white-space: nowrap;
+    font-size: var(--button-font-size);
+    line-height: var(--button-line-height);
+    font-weight: var(--button-font-weight);
+  }
+
+  .btn-icon {
+    display: flex;
+
+    .icon {
+      aspect-ratio: 1;
+      display: inline-block;
+      height: var(--input-icon-size);
+      width: var(--input-icon-size);
+    }
+  }
+
+  &.icon-only {
+    aspect-ratio: 1;
+    border-radius: var(--button-border-radius-icon-only);
+    margin: 0;
+    padding: 0;
+
+    .btn-icon {
+      margin: 1.2rem;
+    }
+  }
+}
+}
+</style>

package/app/components/forms/input-button/playwright/input-button-core.playwright.ts

@@ -0,0 +1,113 @@
+import { test, expect, type Page } from "@playwright/test";
+
+// --- Config ---
+const STORYBOOK_URL = "http://127.0.0.1:6006";
+const STORY_BASE = "components-forms-input-button-inputbuttoncore";
+const BUTTON_TIMEOUT = 15000;
+
+// --- Helpers ---
+const getStoryUrl = (story: string, args: Record<string, string> = {}) => {
+  const argsParam = Object.entries(args)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(";");
+  const url = `${STORYBOOK_URL}/?path=/story/${STORY_BASE}--${story}`;
+  return argsParam ? `${url}&args=${argsParam}` : url;
+};
+
+const getButton = async (page: Page, story: string, args: Record<string, string> = {}) => {
+  await page.goto(getStoryUrl(story, args));
+  const frame = page.frameLocator("#storybook-preview-iframe");
+  const button = frame.getByRole("button");
+  await button.waitFor({ state: "visible", timeout: BUTTON_TIMEOUT });
+  return button;
+};
+
+// --- Stories ---
+const STORIES = [
+  "default",
+  // "with-both-emoji-icons",
+  "with-both-nuxt-icon-components",
+  // "emoji-icon-only",
+  "nuxt-icon-only-component",
+] as const;
+
+// --- Variants to cycle through ---
+const VARIANTS = ["primary", "secondary", "tertiary"] as const;
+const THEMES = ["default", "success", "error", "warning"] as const;
+
+// -------------------------
+// Per-story baseline snapshots
+// -------------------------
+test.describe("InputButtonCore — story baselines", () => {
+  for (const story of STORIES) {
+    test(`${story} matches snapshot`, async ({ page }) => {
+      const button = await getButton(page, story);
+      await expect(button).toHaveScreenshot(`${story}.png`);
+    });
+  }
+});
+
+// -------------------------
+// Variant snapshots (default story × each variant)
+// -------------------------
+test.describe("InputButtonCore — variants", () => {
+  for (const variant of VARIANTS) {
+    test(`default story — variant: ${variant}`, async ({ page }) => {
+      const button = await getButton(page, "default", { variant });
+      await expect(button).toHaveScreenshot(`default-variant-${variant}.png`);
+    });
+  }
+});
+
+// -------------------------
+// Theme snapshots (default story × each theme)
+// -------------------------
+test.describe("InputButtonCore — themes", () => {
+  for (const theme of THEMES) {
+    test(`default story — theme: ${theme}`, async ({ page }) => {
+      const button = await getButton(page, "default", { theme });
+      await expect(button).toHaveScreenshot(`default-theme-${theme}.png`);
+    });
+  }
+});
+
+// -------------------------
+// State snapshots
+// -------------------------
+test.describe("InputButtonCore — states", () => {
+  test("readonly", async ({ page }) => {
+    const button = await getButton(page, "default", { readonly: "true" });
+    await expect(button).toHaveScreenshot("state-readonly.png");
+  });
+
+  test("isPending", async ({ page }) => {
+    const button = await getButton(page, "default", { isPending: "true", hasPendingEffect: "true" });
+    await expect(button).toHaveScreenshot("state-pending.png");
+  });
+
+  test("pill shape", async ({ page }) => {
+    const button = await getButton(page, "default", { isPill: "true" });
+    await expect(button).toHaveScreenshot("state-pill.png");
+  });
+});
+
+// -------------------------
+// Key combinations (variant × state — not exhaustive, just meaningful)
+// -------------------------
+test.describe("InputButtonCore — variant × state combinations", () => {
+  const combinations: Array<{ story: string; args: Record<string, string>; name: string }> = [
+    { story: "default", args: { variant: "secondary", isPill: "true" }, name: "secondary-pill" },
+    { story: "default", args: { variant: "tertiary", readonly: "true" }, name: "tertiary-readonly" },
+    { story: "default", args: { variant: "primary", isPending: "true" }, name: "primary-pending" },
+    { story: "with-both-nuxt-icon-components", args: { variant: "secondary" }, name: "icons-secondary" },
+    { story: "with-both-nuxt-icon-components", args: { variant: "tertiary" }, name: "icons-tertiary" },
+    // { story: "emoji-icon-only", args: { variant: "secondary" }, name: "icon-only-secondary" },
+  ];
+
+  for (const { story, args, name } of combinations) {
+    test(name, async ({ page }) => {
+      const button = await getButton(page, story, args);
+      await expect(button).toHaveScreenshot(`combo-${name}.png`);
+    });
+  }
+});