srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/02.molecules/price-list/PriceList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="price-list" :class="elementClasses">
+    <div v-for="(column, colIndex) in priceListData" :key="colIndex" class="price-list__column">
+      <HeroText
+        :tag="'h2'"
+        font-size="subheading"
+        :text-content="[{ text: column.headingtext }]"
+        :icon="column.headingIcon ? column.headingIcon : undefined"
+        :style-class-passthrough="['price-list__heading']"
+      />
+
+      <dl class="price-list__list">
+        <div v-for="(item, index) in column.items" :key="index" class="price-list__row">
+          <dt class="price-list__description">{{ item.description }}</dt>
+          <dd class="price-list__price">
+            <span v-if="item.from" class="price-list__from">from</span>
+            <HeroText :tag="'h2'" font-size="label" :text-content="[{ text: item.price }]" />
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface PriceItem {
+  description: string;
+  price: string;
+  from?: boolean;
+}
+
+export interface PriceListData {
+  headingtext: string;
+  headingIcon?: string;
+  items: PriceItem[];
+}
+
+interface Props {
+  priceListData: PriceListData[];
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .price-list {
+    --_price-list-gap: 2rem;
+    --_price-list-heading-margin-block-end: 1.8rem;
+    --_price-list-row-gap: 0.75rem;
+    --_price-list-divider-color: var(--price-list-divider-color, currentColor);
+    --_price-list-divider-opacity: var(--price-list-divider-opacity, 0.15);
+    --_price-list-heading-font-size: var(--price-list-heading-font-size, 1.8rem);
+    --_price-list-description-font-size: var(--price-list-description-font-size, 1.4rem);
+    --_price-list-price-font-size: var(--price-list-price-font-size, 1.4rem);
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
+
+    @media (min-width: 48em) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .price-list__heading {
+      font-weight: 600;
+      margin: 0 0 var(--_price-list-heading-margin-block-end);
+
+      &.hero-text {
+        .hero-text__icon {
+          margin-inline-end: 1rem;
+        }
+      }
+    }
+
+    .price-list__list {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0rem;
+
+      .price-list__row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1.2rem;
+        padding-block: 1.4rem;
+        border-block-end: 1px solid
+          color-mix(
+            in srgb,
+            var(--_price-list-divider-color) calc(var(--_price-list-divider-opacity) * 100%),
+            transparent
+          );
+
+        &:last-child {
+          border-block-end: none;
+          padding-block-end: 0;
+        }
+        .price-list__description {
+          font-size: var(--_price-list-description-font-size);
+        }
+
+        .price-list__price {
+          font-size: var(--_price-list-price-font-size);
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/price-list/stories/PriceList.stories.ts

@@ -0,0 +1,103 @@
+import PriceList from "../PriceList.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const priceListData = [
+  {
+    headingtext: "Cutting & Treatment",
+    headingIcon: "lucide:sparkles",
+    items: [
+      { description: "Cut & Blow Dry", price: "£45" },
+      { description: "Restyle", price: "£65" },
+      { description: "Wash & Blow Dry", price: "£35" },
+      { description: "Trim & Tidy", price: "£25" },
+      { description: "Keratin Treatment", price: "£120" },
+    ],
+  },
+  {
+    headingtext: "Hair Colouring",
+    headingIcon: "lucide:sparkles",
+    items: [
+      { description: "Full Head Colour", price: "£75" },
+      { description: "Half Head Highlights", price: "£65" },
+      { description: "Full Head Highlights", price: "£85" },
+      { description: "Balayage", price: "£95" },
+      { description: "Toner", price: "£35" },
+    ],
+  },
+];
+
+const meta: Meta<typeof PriceList> = {
+  title: "Molecules/PriceList",
+  component: PriceList,
+  argTypes: {
+    priceListData: {
+      control: "object",
+      description: "Array of columns, each with a heading and list of items",
+      table: { category: "Content" },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+      table: { category: "Styling" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PriceList>;
+
+export const Default: Story = {
+  args: {
+    priceListData,
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { PriceList },
+    setup() {
+      return { args };
+    },
+    template: `<PriceList v-bind="args" />`,
+  }),
+};
+
+export const SingleColumn: Story = {
+  name: "Single Column",
+  args: {
+    priceListData: [priceListData[0]!],
+  },
+  render: (args) => ({
+    components: { PriceList },
+    setup() {
+      return { args };
+    },
+    template: `<PriceList v-bind="args" />`,
+  }),
+};
+
+export const EmptyState: Story = {
+  name: "Empty State",
+  args: {
+    priceListData: priceListData.map(({ headingtext, headingIcon }) => ({ headingtext, headingIcon, items: [] })),
+  },
+  render: (args) => ({
+    components: { PriceList },
+    setup() {
+      return { args };
+    },
+    template: `<PriceList v-bind="args" />`,
+  }),
+};
+
+export const NoIcons: Story = {
+  name: "No Icons",
+  args: {
+    priceListData: priceListData.map(({ headingtext, items }) => ({ headingtext, items })),
+  },
+  render: (args) => ({
+    components: { PriceList },
+    setup() {
+      return { args };
+    },
+    template: `<PriceList v-bind="args" />`,
+  }),
+};

package/app/components/02.molecules/price-list/tests/PriceList.spec.ts

@@ -0,0 +1,192 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PriceList from "../PriceList.vue";
+import type { PriceListData } from "../PriceList.vue";
+
+const defaultPriceListData = [
+  {
+    headingtext: "Cutting & Treatment",
+    items: [
+      { description: "Cut & Blow Dry", price: "£45" },
+      { description: "Restyle", price: "£65" },
+    ],
+  },
+  {
+    headingtext: "Hair Colouring",
+    items: [
+      { description: "Full Head Colour", price: "£75" },
+      { description: "Balayage", price: "£95" },
+    ],
+  },
+];
+
+const createWrapper = async (
+  priceListData: PriceListData[] = defaultPriceListData,
+  extraProps: { styleClassPassthrough?: string | string[] } = {}
+) => {
+  return mountSuspended(PriceList, {
+    props: { priceListData, ...extraProps },
+  });
+};
+
+describe("PriceList", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>> | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  // -------------------------
+  // Snapshots
+  // -------------------------
+  describe("Snapshots", () => {
+    it("default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it("custom headings", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "Cuts", items: [] },
+        { headingtext: "Colour", items: [] },
+      ]);
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  // -------------------------
+  // Rendering
+  // -------------------------
+  describe("Rendering", () => {
+    it("mounts without error", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.vm).toBeTruthy();
+    });
+
+    it("renders the root element", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".price-list").exists()).toBe(true);
+    });
+
+    it("renders two columns", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll(".price-list__column").length).toBe(2);
+    });
+
+    it("renders a dl list in each column", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll(".price-list__list").length).toBe(2);
+    });
+
+    it("renders correct number of rows in column 1", async () => {
+      wrapper = await createWrapper();
+      const column1 = wrapper.findAll(".price-list__column")[0]!;
+      expect(column1.findAll(".price-list__row").length).toBe(2);
+    });
+
+    it("renders correct number of rows in column 2", async () => {
+      wrapper = await createWrapper();
+      const column2 = wrapper.findAll(".price-list__column")[1]!;
+      expect(column2.findAll(".price-list__row").length).toBe(2);
+    });
+
+    it("renders description and price in each row", async () => {
+      wrapper = await createWrapper();
+      const firstRow = wrapper.find(".price-list__row");
+      expect(firstRow.find(".price-list__description").text()).toBe("Cut & Blow Dry");
+      expect(firstRow.find(".price-list__price").text()).toBe("£45");
+    });
+
+    it("renders empty columns when items are empty arrays", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "Cutting & Treatment", items: [] },
+        { headingtext: "Hair Colouring", items: [] },
+      ]);
+      expect(wrapper.findAll(".price-list__row").length).toBe(0);
+    });
+  });
+
+  // -------------------------
+  // Props
+  // -------------------------
+  describe("Props", () => {
+    it("renders column 1 heading", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll(".price-list__heading")[0]!.text()).toBe("Cutting & Treatment");
+    });
+
+    it("renders column 2 heading", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll(".price-list__heading")[1]!.text()).toBe("Hair Colouring");
+    });
+
+    it("renders custom headings from priceListData", async () => {
+      wrapper = await createWrapper([
+        { headingtext: "Cuts", items: [] },
+        { headingtext: "Colour", items: [] },
+      ]);
+      expect(wrapper.findAll(".price-list__heading")[0]!.text()).toBe("Cuts");
+      expect(wrapper.findAll(".price-list__heading")[1]!.text()).toBe("Colour");
+    });
+
+    it("renders a single column when priceListData has one entry", async () => {
+      wrapper = await createWrapper([{ headingtext: "Cutting & Treatment", items: [] }]);
+      expect(wrapper.findAll(".price-list__column").length).toBe(1);
+    });
+
+    it("applies styleClassPassthrough classes", async () => {
+      wrapper = await createWrapper(defaultPriceListData, { styleClassPassthrough: ["extra-class"] });
+      expect(wrapper.find(".price-list").classes()).toContain("extra-class");
+    });
+
+    it("renders a heading icon when headingIcon is provided", async () => {
+      wrapper = await createWrapper([{ headingtext: "Cutting & Treatment", headingIcon: "mdi:scissors", items: [] }]);
+      expect(wrapper.find(".price-list__heading .hero-text__icon").exists()).toBe(true);
+    });
+
+    it("does not render a heading icon when headingIcon is omitted", async () => {
+      wrapper = await createWrapper([{ headingtext: "Cutting & Treatment", items: [] }]);
+      expect(wrapper.find(".price-list__heading .hero-text__icon").exists()).toBe(false);
+    });
+
+    it("renders a 'from' label when item.from is true", async () => {
+      wrapper = await createWrapper([
+        {
+          headingtext: "Cutting & Treatment",
+          items: [{ description: "Cut & Blow Dry", price: "£45", from: true }],
+        },
+      ]);
+      expect(wrapper.find(".price-list__from").exists()).toBe(true);
+      expect(wrapper.find(".price-list__from").text()).toBe("from");
+    });
+
+    it("does not render a 'from' label when item.from is omitted", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".price-list__from").exists()).toBe(false);
+    });
+  });
+
+  // -------------------------
+  // Accessibility
+  // -------------------------
+  describe("Accessibility", () => {
+    it("uses dl elements for lists", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.findAll("dl").length).toBe(2);
+    });
+
+    it("uses dt for descriptions", async () => {
+      wrapper = await createWrapper();
+      const dts = wrapper.findAll("dt");
+      expect(dts.length).toBe(4);
+      expect(dts[0]!.text()).toBe("Cut & Blow Dry");
+    });
+
+    it("uses dd for prices", async () => {
+      wrapper = await createWrapper();
+      const dds = wrapper.findAll("dd");
+      expect(dds.length).toBe(4);
+      expect(dds[0]!.text()).toBe("£45");
+    });
+  });
+});

package/app/components/02.molecules/price-list/tests/__snapshots__/PriceList.spec.ts.snap

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PriceList > Snapshots > custom headings 1`] = `
+"<div class="price-list">
+  <div class="price-list__column">
+    <h2 class="hero-text price-list__heading subheading axis-horizontal">
+      <!--v-if--><span class="text-block-0">Cuts</span>
+    </h2>
+    <dl class="price-list__list"></dl>
+  </div>
+  <div class="price-list__column">
+    <h2 class="hero-text price-list__heading subheading axis-horizontal">
+      <!--v-if--><span class="text-block-0">Colour</span>
+    </h2>
+    <dl class="price-list__list"></dl>
+  </div>
+</div>"
+`;
+
+exports[`PriceList > Snapshots > default 1`] = `
+"<div class="price-list">
+  <div class="price-list__column">
+    <h2 class="hero-text price-list__heading subheading axis-horizontal">
+      <!--v-if--><span class="text-block-0">Cutting &amp; Treatment</span>
+    </h2>
+    <dl class="price-list__list">
+      <div class="price-list__row">
+        <dt class="price-list__description">Cut &amp; Blow Dry</dt>
+        <dd class="price-list__price">
+          <!--v-if-->
+          <h2 class="hero-text label axis-horizontal">
+            <!--v-if--><span class="text-block-0">£45</span>
+          </h2>
+        </dd>
+      </div>
+      <div class="price-list__row">
+        <dt class="price-list__description">Restyle</dt>
+        <dd class="price-list__price">
+          <!--v-if-->
+          <h2 class="hero-text label axis-horizontal">
+            <!--v-if--><span class="text-block-0">£65</span>
+          </h2>
+        </dd>
+      </div>
+    </dl>
+  </div>
+  <div class="price-list__column">
+    <h2 class="hero-text price-list__heading subheading axis-horizontal">
+      <!--v-if--><span class="text-block-0">Hair Colouring</span>
+    </h2>
+    <dl class="price-list__list">
+      <div class="price-list__row">
+        <dt class="price-list__description">Full Head Colour</dt>
+        <dd class="price-list__price">
+          <!--v-if-->
+          <h2 class="hero-text label axis-horizontal">
+            <!--v-if--><span class="text-block-0">£75</span>
+          </h2>
+        </dd>
+      </div>
+      <div class="price-list__row">
+        <dt class="price-list__description">Balayage</dt>
+        <dd class="price-list__price">
+          <!--v-if-->
+          <h2 class="hero-text label axis-horizontal">
+            <!--v-if--><span class="text-block-0">£95</span>
+          </h2>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -0,0 +1,154 @@
+<template>
+  <component
+    :is="tag"
+    class="profile-section"
+    :class="[elementClasses]"
+    :aria-labelledby="needsLabel ? headingId : undefined"
+  >
+    <header class="profile-section-header">
+      <EyebrowText tag="p" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
+      <HeroText
+        :id="headingId"
+        tag="h2"
+        axis="vertical"
+        font-size="display"
+        :text-content="[
+          { text: 'Your', styleClass: 'normal' },
+          { text: 'mobile hairdresser', styleClass: 'accent' },
+          { text: 'in Bath', styleClass: 'normal' },
+        ]"
+        :style-class-passthrough="['mb-20']"
+      />
+    </header>
+
+    <div class="profile-section-inner">
+      <div class="picture">
+        <NuxtImg :src="props.profilePicture.src" :alt="props.profilePicture.alt" class="profile-picture" />
+      </div>
+      <div class="profile-info">
+        <div class="profile-info-content">
+          <div v-for="index in props.profileInfoCount" :key="index" class="profile-info-block">
+            <slot :name="'profile-info-' + index">
+              <p>Profile info content {{ index }}</p>
+            </slot>
+          </div>
+        </div>
+
+        <div v-if="hasProfileLinksSlot" class="profile-links">
+          <slot name="profileLinks">
+            <p>Profile links content</p>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface ProfilePicture {
+  src: string;
+  alt: string;
+}
+
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  profilePicture: ProfilePicture;
+  profileInfoCount?: number;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  profileInfoCount: 3,
+  styleClassPassthrough: () => [],
+});
+
+const headingId = useId();
+const needsLabel = computed(() => props.tag === "section" || props.tag === "article");
+
+const slots = useSlots();
+const hasProfileLinksSlot = computed(() => Boolean(slots.profileLinks));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+.profile-section {
+  /* .profile-section-header {
+  } */
+  .profile-section-inner {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: 384px 1fr;
+      align-items: start;
+      gap: 4rem;
+    }
+
+    .picture {
+      aspect-ratio: 3 / 4;
+      border-radius: 8px;
+      overflow: hidden;
+
+      .profile-picture {
+        object-fit: cover;
+        width: 100%;
+      }
+    }
+
+    .profile-info {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+      height: stretch;
+
+      .profile-info-content {
+        .profile-info-block {
+          margin-block-end: 1.5rem;
+
+          /* .experience {
+          } */
+
+          .location {
+            .highlight {
+              color: var(--colour-text-accent);
+              font-weight: 600;
+              font-variation-settings: "wght" 600;
+            }
+          }
+
+          .services {
+            .highlight {
+              color: var(--colour-link-default);
+              font-weight: 600;
+              font-variation-settings: "wght" 600;
+
+              &:hover {
+                color: var(--colour-link-hover);
+              }
+            }
+          }
+        }
+      }
+
+      .profile-links {
+        display: flex;
+        flex-grow: 1;
+        gap: 1rem;
+        align-items: end;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+}
+</style>