srcdev-nuxt-components 9.2.0 → 9.2.2

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import InputCopy from "../InputCopy.vue";
+
+describe("InputCopy", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders readonly input with value", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key-123",
+        label: "Test key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("test-key-123");
+    expect(input.element.readOnly).toBe(true);
+  });
+
+  it("displays description when provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        description: "This is your license key.",
+      },
+    });
+
+    expect(wrapper.text()).toContain("This is your license key.");
+  });
+
+  it("does not display description when not provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        description: undefined,
+      },
+    });
+
+    const description = wrapper.find(".input-copy__description");
+    expect(description.exists()).toBe(false);
+  });
+
+  it("renders copy button with default text", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        buttonText: "Copy",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.text()).toContain("Copy");
+  });
+
+  it("renders copy button with custom text", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        buttonText: "Copy to clipboard",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.text()).toContain("Copy to clipboard");
+  });
+
+  it("disables button when isDisabled is true", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        isDisabled: true,
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeDefined();
+  });
+
+  it("button is not disabled when isDisabled is false", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        isDisabled: false,
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeUndefined();
+  });
+
+  it("has proper aria-label on input from label prop", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "License key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("aria-label")).toBe("License key");
+  });
+
+  it("has proper aria-label on input from ariaLabel prop (takes precedence)", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "License key",
+        ariaLabel: "Unique license identifier",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("aria-label")).toBe("Unique license identifier");
+  });
+
+  it("has proper aria-label on button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "API token",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("aria-label")).toContain("Copy");
+    expect(button.attributes("aria-label")).toContain("API token");
+  });
+
+  it("has icon element in button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const icon = wrapper.find(".input-copy__icon");
+    expect(icon.exists()).toBe(true);
+  });
+
+  it("input wrapper contains both input and button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const wrapper_el = wrapper.find(".input-copy__wrapper");
+    expect(wrapper_el.exists()).toBe(true);
+
+    const input = wrapper_el.find("input");
+    const button = wrapper_el.find("button");
+
+    expect(input.exists()).toBe(true);
+    expect(button.exists()).toBe(true);
+  });
+
+  it("renders with correct component classes", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("input-copy");
+  });
+
+  it("applies styleClassPassthrough classes", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        styleClassPassthrough: ["custom-class", "another-class"],
+      },
+    });
+
+    expect(wrapper.classes()).toContain("custom-class");
+    expect(wrapper.classes()).toContain("another-class");
+  });
+});

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -0,0 +1,149 @@
+# PricingCard — Consumer Styling Guide
+
+## Public token API
+
+All `--pricing-card-*` tokens are the stable override surface. Set them at any scope (global, page,
+or instance) without touching the component itself.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--pricing-card-border` | `1px solid var(--slate-03)` | Card border |
+| `--pricing-card-border-radius` | `0.8rem` | Corner rounding |
+| `--pricing-card-padding` | `2rem` | Internal padding |
+| `--pricing-card-background` | `var(--slate-00)` | Card background colour |
+| `--pricing-card-shadow` | `0 2px 8px oklch(...)` | Box shadow |
+| `--pricing-card-gap` | `1.2rem` | Gap between elements (name, price, features, CTA) |
+| `--pricing-card-highlight-border` | `2px solid var(--teal-06)` | Border when `isHighlighted` |
+| `--pricing-card-highlight-shadow` | `0 8px 24px oklch(...)` | Shadow when highlighted |
+| `--pricing-card-highlight-scale` | `1.05` | Scale transform when highlighted |
+| `--pricing-card-badge-bg` | `var(--teal-06)` | "Most Popular" badge background |
+| `--pricing-card-badge-text` | `var(--teal-00)` | Badge text colour |
+| `--pricing-card-name-font-size` | `1.8rem` | Plan name heading size |
+| `--pricing-card-name-color` | `#1a1a1a` | Plan name text colour |
+| `--pricing-card-amount-font-size` | `3.2rem` | Price amount size |
+| `--pricing-card-amount-color` | `#1a1a1a` | Price text colour |
+| `--pricing-card-period-font-size` | `0.9rem` | Billing period ("one-time", "per month") size |
+| `--pricing-card-period-color` | `#666` | Billing period text colour |
+| `--pricing-card-description-color` | `#555` | Plan description text colour |
+| `--pricing-card-feature-color` | `#333` | Feature list text colour |
+| `--pricing-card-cta-bg` | `var(--theme-button-primary-surface)` | CTA button background |
+| `--pricing-card-cta-bg-hover` | `var(--theme-button-primary-surface-hover)` | CTA button background on hover |
+| `--pricing-card-cta-text` | `var(--theme-button-primary-text)` | CTA button text colour |
+| `--pricing-card-cta-padding` | `1rem 1.6rem` | CTA button padding |
+| `--pricing-card-cta-border-radius` | `0.4rem` | CTA button corner rounding |
+
+---
+
+## Global theming — app-level CSS file
+
+Create `assets/styles/setup/07.components/pricing-card.css` in the consuming app and set tokens on
+`:root`. These values apply to every `PricingCard` instance across the site.
+
+```css
+/* assets/styles/setup/07.components/pricing-card.css */
+:root {
+  --pricing-card-border-radius: 1rem;
+  --pricing-card-padding: 2.4rem;
+  --pricing-card-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+  --pricing-card-gap: 1.6rem;
+  --pricing-card-badge-bg: var(--brand-primary);
+  --pricing-card-highlight-border: 2px solid var(--brand-primary);
+  --pricing-card-highlight-shadow: 0 12px 32px rgb(0 0 0 / 15%);
+  --pricing-card-cta-border-radius: 0.6rem;
+}
+```
+
+---
+
+## Per-instance overrides via inline styles
+
+Override tokens directly on a single card instance:
+
+```vue
+<PricingCard
+  planName="Enterprise"
+  :price="999"
+  style="
+    --pricing-card-border-radius: 1.2rem;
+    --pricing-card-highlight-shadow: 0 16px 48px rgb(0 0 0 / 20%);
+  "
+  @select="handleSelect"
+/>
+```
+
+---
+
+## Page-scoped overrides
+
+When pricing cards appear in a specific page context, scope overrides under the page wrapper:
+
+```css
+/* In the consuming page's unscoped <style> block */
+.pricing-page {
+  .pricing-card {
+    --pricing-card-border-radius: 1.2rem;
+    --pricing-card-padding: 2.8rem;
+    --pricing-card-gap: 1.8rem;
+
+    &.is-highlighted {
+      --pricing-card-highlight-scale: 1.08;
+      --pricing-card-highlight-shadow: 0 20px 48px rgb(0 0 0 / 18%);
+    }
+  }
+}
+```
+
+---
+
+## Three-card comparison grid
+
+When displaying multiple cards side-by-side (common in pricing pages), wrap in a grid container:
+
+```vue
+<div class="pricing-grid">
+  <PricingCard v-for="plan in plans" :key="plan.id" v-bind="plan" @select="handleSelect" />
+</div>
+```
+
+```css
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+
+  .pricing-card {
+    /* Optional per-card overrides */
+  }
+
+  /* Alternate: fixed 3-column layout */
+  &.three-col {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+---
+
+## Feature checkmark colour
+
+The feature list checkmarks use `--teal-06` by default. Override globally or per-instance:
+
+```css
+.pricing-page {
+  .pricing-card__feature::before {
+    color: var(--brand-primary);
+  }
+}
+```
+
+Or inline:
+
+```vue
+<PricingCard
+  v-bind="plan"
+  style="--_feature-checkmark-color: var(--brand-accent);"
+  @select="handleSelect"
+/>
+```
+
+(Note: `--_feature-checkmark-color` is an internal token; consider requesting it as a public token if override is needed frequently.)

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -0,0 +1,222 @@
+<template>
+  <component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
+    <div v-if="isHighlighted" class="pricing-card__badge">Most Popular</div>
+
+    <h3 class="pricing-card__name">{{ planName }}</h3>
+
+    <div class="pricing-card__price">
+      <span class="pricing-card__amount">${{ price }}</span>
+      <span v-if="billingPeriod" class="pricing-card__period">{{ billingPeriod }}</span>
+    </div>
+
+    <p v-if="description" class="pricing-card__description">{{ description }}</p>
+
+    <ul class="pricing-card__features">
+      <slot name="features">
+        <li v-for="(feature, index) in features" :key="index" class="pricing-card__feature">
+          {{ feature }}
+        </li>
+      </slot>
+    </ul>
+
+    <button
+      class="pricing-card__cta"
+      :disabled="ctaDisabled"
+      @click="handleSelect"
+    >
+      {{ ctaText }}
+    </button>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article";
+  planName: string;
+  price: number;
+  billingPeriod?: string;
+  description?: string;
+  features?: string[];
+  isHighlighted?: boolean;
+  ctaText?: string;
+  ctaDisabled?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "article",
+  billingPeriod: "one-time",
+  description: undefined,
+  features: () => [],
+  isHighlighted: false,
+  ctaText: "Get started",
+  ctaDisabled: false,
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{
+  select: [planName: string];
+}>();
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const handleSelect = () => {
+  emit("select", props.planName);
+};
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  },
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .pricing-card {
+    --_card-border: var(--pricing-card-border, 1px solid var(--slate-03));
+    --_card-border-radius: var(--pricing-card-border-radius, 0.8rem);
+    --_card-padding: var(--pricing-card-padding, 2rem);
+    --_card-background: var(--pricing-card-background, var(--slate-00));
+    --_card-shadow: var(--pricing-card-shadow, 0 2px 8px oklch(from var(--slate-08) l c h / 0.12));
+    --_card-gap: var(--pricing-card-gap, 1.2rem);
+
+    --_highlight-border: var(--pricing-card-highlight-border, 2px solid var(--teal-06));
+    --_highlight-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.20));
+    --_highlight-scale: var(--pricing-card-highlight-scale, 1.05);
+
+    --_badge-bg: var(--pricing-card-badge-bg, var(--teal-06));
+    --_badge-text: var(--pricing-card-badge-text, var(--teal-00));
+
+    --_name-font-size: var(--pricing-card-name-font-size, 1.8rem);
+    --_name-color: var(--pricing-card-name-color, #1a1a1a);
+
+    --_amount-font-size: var(--pricing-card-amount-font-size, 3.2rem);
+    --_amount-color: var(--pricing-card-amount-color, #1a1a1a);
+    --_period-font-size: var(--pricing-card-period-font-size, 0.9rem);
+    --_period-color: var(--pricing-card-period-color, #666);
+
+    --_description-color: var(--pricing-card-description-color, #555);
+    --_feature-color: var(--pricing-card-feature-color, #333);
+
+    --_cta-bg: var(--pricing-card-cta-bg, var(--theme-button-primary-surface));
+    --_cta-bg-hover: var(--pricing-card-cta-bg-hover, var(--theme-button-primary-surface-hover));
+    --_cta-text: var(--pricing-card-cta-text, var(--theme-button-primary-text));
+    --_cta-padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
+    --_cta-border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--_card-gap);
+    position: relative;
+
+    padding: var(--_card-padding);
+    background-color: var(--_card-background);
+    border: var(--_card-border);
+    border-radius: var(--_card-border-radius);
+    box-shadow: var(--_card-shadow);
+
+    transition: all 0.3s ease;
+
+    &.is-highlighted {
+      border: var(--_highlight-border);
+      box-shadow: var(--_highlight-shadow);
+      transform: scale(var(--_highlight-scale));
+    }
+
+    .pricing-card__badge {
+      position: absolute;
+      top: -0.6rem;
+      left: 50%;
+      transform: translateX(-50%);
+
+      display: inline-block;
+      padding: 0.4rem 1rem;
+      background-color: var(--_badge-bg);
+      color: var(--_badge-text);
+      border-radius: 2rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .pricing-card__name {
+      margin: 0;
+      font-size: var(--_name-font-size);
+      font-weight: 600;
+      color: var(--_name-color);
+    }
+
+    .pricing-card__price {
+      display: flex;
+      align-items: baseline;
+      gap: 0.4rem;
+    }
+
+    .pricing-card__amount {
+      font-size: var(--_amount-font-size);
+      font-weight: 700;
+      color: var(--_amount-color);
+    }
+
+    .pricing-card__period {
+      font-size: var(--_period-font-size);
+      color: var(--_period-color);
+    }
+
+    .pricing-card__description {
+      margin: 0;
+      color: var(--_description-color);
+      line-height: 1.5;
+    }
+
+    .pricing-card__features {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+
+      flex-grow: 1;
+    }
+
+    .pricing-card__feature {
+      color: var(--_feature-color);
+      padding-left: 1.6rem;
+      position: relative;
+
+      &::before {
+        content: "✓";
+        position: absolute;
+        left: 0;
+        color: var(--teal-06);
+        font-weight: bold;
+      }
+    }
+
+    .pricing-card__cta {
+      align-self: flex-start;
+      padding: var(--_cta-padding);
+      background-color: var(--_cta-bg);
+      color: var(--_cta-text);
+      border: none;
+      border-radius: var(--_cta-border-radius);
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover:not(:disabled) {
+        background-color: var(--_cta-bg-hover);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/pricing-card/stories/PricingCard.stories.ts

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import PricingCard from "../PricingCard.vue";
+
+const meta: Meta<typeof PricingCard> = {
+  title: "Molecules/Pricing Card",
+  component: PricingCard,
+  tags: ["autodocs"],
+  argTypes: {
+    planName: { control: "text" },
+    price: { control: "number" },
+    billingPeriod: { control: "text" },
+    description: { control: "text" },
+    isHighlighted: { control: "boolean" },
+    ctaText: { control: "text" },
+    ctaDisabled: { control: "boolean" },
+  },
+  args: {
+    planName: "Single Site",
+    price: 99,
+    billingPeriod: "one-time",
+    description: "Perfect for freelancers and solo practitioners.",
+    features: ["Embed on one domain", "Unlimited consultations", "Email support", "Monthly updates"],
+    isHighlighted: false,
+    ctaText: "Get started",
+    ctaDisabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A SaaS pricing plan card displaying plan name, price, features, and a CTA button. " +
+          "Supports a 'Most Popular' highlight state with scaled/emphasized styling. " +
+          "Emits a `select` event when the CTA button is clicked. " +
+          "Use multiple cards in a grid layout to build a pricing comparison table.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const storyWrapper = (args: Record<string, unknown>, handleSelect: (planName: string) => void) => ({
+  components: { PricingCard },
+  setup() {
+    return { args, handleSelect };
+  },
+  template: `
+    <div style="padding: 2rem; background: #f5f5f5; border-radius: 0.5rem;">
+      <PricingCard v-bind="args" @select="handleSelect" />
+    </div>
+  `,
+});
+
+export const Default: Story = {
+  render: (args) => {
+    const handleSelect = (planName: string) => {
+      console.log(`Selected plan: ${planName}`);
+    };
+    return storyWrapper(args, handleSelect);
+  },
+};
+
+export const Highlighted: Story = {
+  args: {
+    planName: "Agency",
+    price: 299,
+    description: "Best for growing teams managing multiple sites.",
+    features: ["Embed on up to 3 domains", "Unlimited consultations", "Priority email support", "Weekly updates"],
+    isHighlighted: true,
+  },
+  render: (args) => {
+    const handleSelect = (planName: string) => {
+      console.log(`Selected plan: ${planName}`);
+    };
+    return storyWrapper(args, handleSelect);
+  },
+};
+
+export const Unlimited: Story = {
+  args: {
+    planName: "Unlimited",
+    price: 799,
+    description: "Enterprise plan for unlimited growth.",
+    features: [
+      "Unlimited domains",
+      "Unlimited consultations",
+      "24/7 priority support",
+      "Real-time updates",
+      "Custom integrations",
+    ],
+    isHighlighted: false,
+  },
+  render: (args) => {
+    const handleSelect = (planName: string) => {
+      console.log(`Selected plan: ${planName}`);
+    };
+    return storyWrapper(args, handleSelect);
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    planName: "Coming Soon",
+    price: 199,
+    description: "New plan launching soon.",
+    features: ["Feature 1", "Feature 2", "Feature 3"],
+    ctaDisabled: true,
+    ctaText: "Coming soon",
+  },
+  render: (args) => {
+    const handleSelect = (planName: string) => {
+      console.log(`Selected plan: ${planName}`);
+    };
+    return storyWrapper(args, handleSelect);
+  },
+};
+
+export const ThreeCardComparison: Story = {
+  render: () => ({
+    components: { PricingCard },
+    setup() {
+      const handleSelect = (planName: string) => {
+        console.log(`Selected plan: ${planName}`);
+      };
+      return { handleSelect };
+    },
+    template: `
+      <div style="padding: 2rem; background: #f5f5f5; border-radius: 0.5rem;">
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
+          <PricingCard
+            planName="Single Site"
+            :price="99"
+            billingPeriod="one-time"
+            description="Perfect for freelancers and solo practitioners."
+            :features="['Embed on one domain', 'Unlimited consultations', 'Email support', 'Monthly updates']"
+            @select="handleSelect"
+          />
+          <PricingCard
+            planName="Agency"
+            :price="299"
+            billingPeriod="one-time"
+            description="Best for growing teams managing multiple sites."
+            :features="['Embed on up to 3 domains', 'Unlimited consultations', 'Priority email support', 'Weekly updates']"
+            :isHighlighted="true"
+            @select="handleSelect"
+          />
+          <PricingCard
+            planName="Unlimited"
+            :price="799"
+            billingPeriod="one-time"
+            description="Enterprise plan for unlimited growth."
+            :features="['Unlimited domains', 'Unlimited consultations', '24/7 priority support', 'Real-time updates', 'Custom integrations']"
+            @select="handleSelect"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};