srcdev-nuxt-components 9.2.1 → 9.2.3

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,225 @@
+<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>
+
+    <div class="pricing-card__cta">
+      <slot
+        name="cta"
+        :cta-text="ctaText"
+        :is-disabled="ctaDisabled"
+        :plan-name="planName"
+        :on-select="handleSelect"
+      >
+        <InputButtonCore
+          :button-text="ctaText"
+          :readonly="ctaDisabled"
+          @click="handleSelect"
+        />
+      </slot>
+    </div>
+  </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;
+
+      :deep(.input-button-core) {
+        padding: var(--_cta-padding);
+        background-color: var(--_cta-bg);
+        color: var(--_cta-text);
+        border-radius: var(--_cta-border-radius);
+        font-weight: 600;
+
+        &:hover:not([aria-disabled="true"]) {
+          background-color: var(--_cta-bg-hover);
+        }
+      }
+    }
+  }
+}
+</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>
+    `,
+  }),
+};

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import PricingCard from "../PricingCard.vue";
+
+describe("PricingCard", () => {
+  it("renders plan name, price, and CTA", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Single Site",
+        price: 99,
+        billingPeriod: "one-time",
+        ctaText: "Get started",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Single Site");
+    expect(wrapper.text()).toContain("$99");
+    expect(wrapper.text()).toContain("one-time");
+    expect(wrapper.text()).toContain("Get started");
+  });
+
+  it("renders features from props", () => {
+    const features = ["Feature 1", "Feature 2", "Feature 3"];
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        features,
+      },
+    });
+
+    features.forEach((feature) => {
+      expect(wrapper.text()).toContain(feature);
+    });
+  });
+
+  it("renders description when provided", () => {
+    const description = "This is a great plan";
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        description,
+      },
+    });
+
+    expect(wrapper.text()).toContain(description);
+  });
+
+  it("applies highlighted class when isHighlighted is true", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        isHighlighted: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain("is-highlighted");
+  });
+
+  it("displays badge when highlighted", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        isHighlighted: true,
+      },
+    });
+
+    expect(wrapper.text()).toContain("Most Popular");
+  });
+
+  it("emits select event with plan name on CTA click", async () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+      },
+    });
+
+    const button = wrapper.find("button");
+    await button.trigger("click");
+
+    expect(wrapper.emitted("select")).toBeTruthy();
+    expect(wrapper.emitted("select")?.[0]).toEqual(["Test Plan"]);
+  });
+
+  it("disables CTA when ctaDisabled is true", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        ctaDisabled: true,
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeDefined();
+  });
+
+  it("renders custom features via slot", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+      },
+      slots: {
+        features: '<li>Custom Feature 1</li><li>Custom Feature 2</li>',
+      },
+    });
+
+    expect(wrapper.text()).toContain("Custom Feature 1");
+    expect(wrapper.text()).toContain("Custom Feature 2");
+  });
+
+  it("uses semantic article tag by default", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+      },
+    });
+
+    expect(wrapper.element.tagName).toBe("ARTICLE");
+  });
+
+  it("allows custom tag via prop", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        tag: "section",
+      },
+    });
+
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+});

package/nuxt.config.ts

@@ -123,7 +123,12 @@ export default defineNuxtConfig({
   },
   vite: {
     optimizeDeps: {
-      include: ["@oddbird/css-anchor-positioning", "@vue/devtools-core", "@vue/devtools-kit", "vue-qrcode-reader"],
+      include: [
+        "@oddbird/css-anchor-positioning",
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
+        ...(isStandalone ? ["vue-qrcode-reader"] : []),
+      ],
     },
   },
   vue: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.1",
+  "version": "9.2.3",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -32,6 +32,7 @@
   },
   "files": [
     ".claude/",
+    ".vscode/",
     "app/",
     "modules/",
     "scripts/",