srcdev-nuxt-components 9.1.18 → 9.1.20

package/.claude/settings.json

@@ -21,7 +21,12 @@
       "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
       "Bash(npx vue-tsc:*)",
       "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)"
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
+      "Bash(npm install:*)",
+      "Bash(npm run:*)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/.claude/skills/component-export-types.md

@@ -48,10 +48,19 @@ import type { NavItem, NavItemData } from "~/types/components/navigation-horizon
 
 ## Consuming app usage
 
-Once published, consumers import from the package barrel:
+The chain that makes this work:
+
+```text
+app/types/components/<component>.d.ts
+  → app/types/components/index.ts   (export * from "./<component>.d")
+  → types.d.ts                      (export * from "./app/types/components")
+  → consumer import
+```
+
+`types.d.ts` is the `"types"` entry point in `package.json`, so once a type is added to the barrel it is importable directly from the package name:
 
 ```ts
-import type { NavItem, NavItemData } from "nuxt-components/app/types/components";
+import type { NavItem, NavItemData } from "srcdev-nuxt-components";
 ```
 
 ## Notes

package/.claude/skills/components/site-navigation.md

@@ -20,9 +20,19 @@ Both the horizontal list and the panel include animated active/hover indicator d
 
 ## NavItemData type
 
+**Within the layer:**
+
 ```ts
 import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+```
 
+**In a consuming app:**
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components";
+```
+
+```ts
 const navItemData: NavItemData = {
   main: [
     { text: "Home",     href: "/" },

package/.claude/skills/components/social-icons-list.md

@@ -0,0 +1,120 @@
+# SocialIconsList Component
+
+## Overview
+
+`SocialIconsList` renders a horizontal list of social network icon links. Each item is data-driven via the `items` prop — the component composes the full href from `baseHref + profileId` at render time. Icons are sourced from the `logos:*` Iconify collection (`@iconify-json/logos`), which uses brand colours baked into the SVG.
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `ISocialIcon[]` | — | **Required.** Array of social network items. |
+| `label` | `string` | `"Social media profiles"` | `aria-label` applied to the `<ul>` element. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `<ul>`. |
+
+---
+
+## ISocialIcon type
+
+```ts
+interface ISocialIcon {
+  networkName: string; // Used as aria-label: "{networkName} profile"
+  iconName: string;    // Iconify icon name, e.g. "logos:instagram-icon"
+  baseHref: string;    // Base URL including trailing slash, e.g. "https://www.instagram.com/"
+  profileId: string;   // Profile identifier appended to baseHref
+}
+```
+
+The rendered `href` is `${baseHref}${profileId}`.
+
+### Importing the type
+
+**Within the layer** (e.g. in another layer component or composable):
+
+```ts
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+```
+
+**In a consuming app** — exported via the package barrel (`types.d.ts` → `app/types/components/index.ts`):
+
+```ts
+import type { ISocialIcon } from "srcdev-nuxt-components";
+```
+
+---
+
+## Standard social network values
+
+| Network | `iconName` | `baseHref` |
+|---------|-----------|-----------|
+| Facebook | `logos:facebook` | `https://www.facebook.com/` |
+| X (Twitter) | `logos:x` | `https://x.com/` |
+| Instagram | `logos:instagram-icon` | `https://www.instagram.com/` |
+| YouTube | `logos:youtube-icon` | `https://www.youtube.com/@` |
+| TikTok | `logos:tiktok-icon` | `https://www.tiktok.com/@` |
+
+---
+
+## Usage example
+
+```vue
+<SocialIconsList
+  :items="[
+    {
+      networkName: 'Instagram',
+      iconName: 'logos:instagram-icon',
+      baseHref: 'https://www.instagram.com/',
+      profileId: 'yourbrand',
+    },
+    {
+      networkName: 'TikTok',
+      iconName: 'logos:tiktok-icon',
+      baseHref: 'https://www.tiktok.com/@',
+      profileId: 'yourbrand',
+    },
+  ]"
+/>
+```
+
+---
+
+## CSS custom properties
+
+| Property | Default | Notes |
+|----------|---------|-------|
+| `--theme-social-icon-size` | `2.4rem` | Width and height of each icon |
+| `--theme-social-icon-gap` | `1.2rem` | Gap between icons in the flex row |
+
+> **Note:** Iconify's `logos:*` styles are injected outside any CSS `@layer`, which means they override layered component styles. Icon sizing is applied via an inline `style` attribute on the `<Icon>` element so it takes precedence.
+
+---
+
+## Local style override scaffold
+
+```vue
+<SocialIconsList :style-class-passthrough="['my-social-icons']" :items="items" />
+
+<style>
+/* ─── SocialIconsList local overrides ──────────────────────────────
+   Geometry and size only — brand colours are baked into logos: SVGs.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.social-icons-list {
+  &.my-social-icons {
+    /* --theme-social-icon-size: 3.2rem; */
+    /* --theme-social-icon-gap: 2rem; */
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- All links open in a new tab with `rel="noopener noreferrer"`.
+- Each link carries `aria-label="{networkName} profile"` for screen reader accessibility.
+- The `logos:*` Iconify collection requires `@iconify-json/logos` to be installed in the consumer app. Without it, icons will fall back to a CDN fetch (causing FOUC). See [icon-sets.md](../icon-sets.md).
+- Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/index.md

@@ -59,7 +59,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── glass-panel.md          — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
     ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
-    └── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
+    ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
+    └── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
 ```
 
 ## Skill file template

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

@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    class="profile-section"
-    :class="[elementClasses]"
-    :aria-labelledby="ariaLabelledby"
-  >
+  <component :is="tag" class="profile-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
     <header class="profile-section-header">
       <slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
       <slot v-if="hasHeroTextSlot" name="heroText" :heading-id="headingId"></slot>
@@ -16,9 +11,9 @@
       </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>
+          <div v-for="slotName in profileInfoSlots" :key="slotName" class="profile-info-block">
+            <slot :name="slotName">
+              <p>Profile info content {{ slotName }}</p>
             </slot>
           </div>
         </div>
@@ -58,6 +53,15 @@ const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));
 const hasHeroTextSlot = computed(() => Boolean(slots.heroText));
 const hasProfileLinksSlot = computed(() => Boolean(slots.profileLinks));
 
+const profileInfoSlots = computed(() => {
+  const provided = Object.keys(slots)
+    .filter((key) => /^profile-info-\d+$/.test(key))
+    .sort((a, b) => parseInt(a.split("-")[2] ?? "0") - parseInt(b.split("-")[2] ?? "0"));
+  return provided.length > 0
+    ? provided
+    : Array.from({ length: props.profileInfoCount }, (_, i) => `profile-info-${i + 1}`);
+});
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(

package/app/components/02.molecules/social-icons-list/SocialIconsList.vue

@@ -0,0 +1,90 @@
+<template>
+  <ul class="social-icons-list" :class="[elementClasses]" :aria-label="label">
+    <li v-for="item in items" :key="item.networkName" class="social-icon-item">
+      <a
+        :href="`${item.baseHref}${item.profileId}`"
+        class="social-icon-link"
+        :aria-label="`${item.networkName} profile`"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <Icon
+          :name="item.iconName"
+          class="social-icon"
+          :style="{ width: 'var(--_icon-size)', height: 'var(--_icon-size)' }"
+        />
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+interface Props {
+  items: ISocialIcon[];
+  label?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "Social media profiles",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .social-icons-list {
+    --_icon-size: var(--theme-social-icon-size, 2.4rem);
+    --_gap: var(--theme-social-icon-gap, 1.2rem);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    .social-icon-item {
+      display: flex;
+
+      .social-icon-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        transition:
+          transform 200ms ease,
+          opacity 200ms ease;
+
+        &:hover,
+        &:focus-visible {
+          transform: scale(1.15);
+          opacity: 0.85;
+        }
+
+        &:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 3px;
+          border-radius: 2px;
+        }
+
+        .social-icon {
+          /* width: var(--_icon-size); */
+          /* height: var(--_icon-size); */
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/social-icons-list/stories/SocialIconsList.stories.ts

@@ -0,0 +1,111 @@
+import SocialIconsList from "../SocialIconsList.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+const sampleItems: ISocialIcon[] = [
+  {
+    networkName: "Facebook",
+    iconName: "logos:facebook",
+    baseHref: "https://www.facebook.com/",
+    profileId: "yourprofile",
+  },
+  {
+    networkName: "X (Twitter)",
+    iconName: "logos:x",
+    baseHref: "https://x.com/",
+    profileId: "yourhandle",
+  },
+  {
+    networkName: "Instagram",
+    iconName: "logos:instagram-icon",
+    baseHref: "https://www.instagram.com/",
+    profileId: "yourprofile",
+  },
+  {
+    networkName: "YouTube",
+    iconName: "logos:youtube-icon",
+    baseHref: "https://www.youtube.com/@",
+    profileId: "yourchannel",
+  },
+  {
+    networkName: "TikTok",
+    iconName: "logos:tiktok-icon",
+    baseHref: "https://www.tiktok.com/@",
+    profileId: "yourprofile",
+  },
+];
+
+const meta: Meta<typeof SocialIconsList> = {
+  title: "Molecules/SocialIconsList",
+  component: SocialIconsList,
+  argTypes: {
+    items: {
+      control: "object",
+      description:
+        "Array of social network items. Each item requires networkName, iconName (Iconify logos: collection), baseHref, and profileId.",
+    },
+    label: {
+      control: "text",
+      description: "aria-label for the list element",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    items: sampleItems,
+    label: "Social media profiles",
+    styleClassPassthrough: ["m-40"],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SocialIconsList>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+/** Default — all five networks at the standard icon size. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" />`,
+  }),
+};
+
+/** Large icons — override icon size via CSS token. */
+export const LargeIcons: Story = {
+  name: "Large Icons",
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" style="--theme-social-icon-size: 4rem;" />`,
+  }),
+};
+
+/** Single network — only one item in the list. */
+export const SingleNetwork: Story = {
+  name: "Single Network",
+  args: {
+    items: [
+      {
+        networkName: "Instagram",
+        iconName: "logos:instagram-icon",
+        baseHref: "https://www.instagram.com/",
+        profileId: "luxurylocs",
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { SocialIconsList },
+    setup() {
+      return { args };
+    },
+    template: `<SocialIconsList v-bind="args" />`,
+  }),
+};

package/app/components/02.molecules/social-icons-list/tests/SocialIconsList.spec.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import SocialIconsList from "../SocialIconsList.vue";
+import type { ISocialIcon } from "~/types/components/social-icons-list.d";
+
+const defaultItems: ISocialIcon[] = [
+  {
+    networkName: "Facebook",
+    iconName: "logos:facebook",
+    baseHref: "https://www.facebook.com/",
+    profileId: "testprofile",
+  },
+  {
+    networkName: "Instagram",
+    iconName: "logos:instagram-icon",
+    baseHref: "https://www.instagram.com/",
+    profileId: "testhandle",
+  },
+  {
+    networkName: "YouTube",
+    iconName: "logos:youtube-icon",
+    baseHref: "https://www.youtube.com/@",
+    profileId: "testchannel",
+  },
+];
+
+describe("SocialIconsList", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders as a ul element", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("ul");
+  });
+
+  it("renders the correct number of list items", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.findAll(".social-icon-item").length).toBe(defaultItems.length);
+  });
+
+  it("renders the correct href for each item", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    defaultItems.forEach((item, i) => {
+      expect(links[i]!.attributes("href")).toBe(`${item.baseHref}${item.profileId}`);
+    });
+  });
+
+  it("renders aria-label on each link using networkName", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    defaultItems.forEach((item, i) => {
+      expect(links[i]!.attributes("aria-label")).toBe(`${item.networkName} profile`);
+    });
+  });
+
+  it("adds rel='noopener noreferrer' to each link", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    links.forEach((link) => {
+      expect(link.attributes("rel")).toBe("noopener noreferrer");
+    });
+  });
+
+  it("opens each link in a new tab", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    const links = wrapper.findAll(".social-icon-link");
+    links.forEach((link) => {
+      expect(link.attributes("target")).toBe("_blank");
+    });
+  });
+
+  it("uses the default aria-label on the list", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Social media profiles");
+  });
+
+  it("uses a custom label prop as aria-label on the list", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems, label: "Follow us" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Follow us");
+  });
+
+  it("renders an empty list when items is empty", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: [] },
+    });
+    expect(wrapper.findAll(".social-icon-item").length).toBe(0);
+  });
+
+  it("applies styleClassPassthrough classes to the root element", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems, styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+    expect(wrapper.classes()).toContain("another-class");
+  });
+
+  it("renders the correct HTML structure", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/02.molecules/social-icons-list/tests/__snapshots__/SocialIconsList.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SocialIconsList > renders the correct HTML structure 1`] = `
+"<ul class="social-icons-list" aria-label="Social media profiles">
+  <li class="social-icon-item"><a href="https://www.facebook.com/testprofile" class="social-icon-link" aria-label="Facebook profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:facebook social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.instagram.com/testhandle" class="social-icon-link" aria-label="Instagram profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:instagram-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.youtube.com/@testchannel" class="social-icon-link" aria-label="YouTube profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:youtube-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+</ul>"
+`;

package/app/composables/useWhatsApp.ts

@@ -1,5 +1,3 @@
-// composables/useWhatsApp.ts
-
 export const useWhatsApp = () => {
   const config = useRuntimeConfig();
 

package/app/pages/ui/profile-section.vue

@@ -12,7 +12,6 @@
               src: '/images/services/service-balayage.jpg',
               alt: 'Profile picture of Natasha, the mobile hairdresser in Bath',
             }"
-            :profile-info-count="3"
           >
             <template #eyebrowText>
               <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
@@ -66,6 +65,35 @@
               </p>
             </template>
 
+            <template #profile-info-4>
+              <HeroText
+                tag="h3"
+                axis="horizontal"
+                font-size="heading"
+                :text-content="[
+                  { text: 'Follow me on', styleClass: 'normal' },
+                  { text: 'social media', styleClass: 'accent' },
+                ]"
+                :style-class-passthrough="['mb-20']"
+              />
+              <SocialIconsList
+                :items="[
+                  {
+                    networkName: 'Facebook',
+                    iconName: 'logos:facebook',
+                    baseHref: 'https://www.facebook.com/',
+                    profileId: 'luxurylocsbynatasha',
+                  },
+                  {
+                    networkName: 'Instagram',
+                    iconName: 'skill-icons:instagram',
+                    baseHref: 'https://www.instagram.com/',
+                    profileId: 'luxurylocsbynatasha',
+                  },
+                ]"
+              />
+            </template>
+
             <template #profileLinks>
               <InputButtonCore
                 variant="secondary"

package/app/types/components/index.ts

@@ -10,3 +10,4 @@ export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
 export * from "./hero-text"
 export * from "./navigation-horizontal.d"
+export * from "./social-icons-list.d"

package/app/types/components/social-icons-list.d.ts

@@ -0,0 +1,6 @@
+export interface ISocialIcon {
+  networkName: string;
+  iconName: string;
+  baseHref: string;
+  profileId: string;
+}

package/modules/icon-sets.ts

@@ -12,6 +12,7 @@ const ICON_SETS = [
   "@iconify-json/bitcoin-icons",
   "@iconify-json/gravity-ui",
   "@iconify-json/ic",
+  "@iconify-json/logos",
   "@iconify-json/lucide",
   "@iconify-json/material-symbols",
   "@iconify-json/mdi",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.18",
+  "version": "9.1.20",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -45,6 +45,7 @@
     "@iconify-json/bitcoin-icons": "*",
     "@iconify-json/gravity-ui": "*",
     "@iconify-json/ic": "*",
+    "@iconify-json/logos": "*",
     "@iconify-json/lucide": "*",
     "@iconify-json/material-symbols": "*",
     "@iconify-json/mdi": "*",
@@ -66,6 +67,9 @@
     "@iconify-json/ic": {
       "optional": true
     },
+    "@iconify-json/logos": {
+      "optional": true
+    },
     "@iconify-json/lucide": {
       "optional": true
     },
@@ -86,6 +90,7 @@
     "@iconify-json/bitcoin-icons": "1.2.4",
     "@iconify-json/gravity-ui": "1.2.12",
     "@iconify-json/ic": "*",
+    "@iconify-json/logos": "1.2.11",
     "@iconify-json/lucide": "*",
     "@iconify-json/material-symbols": "1.2.64",
     "@iconify-json/mdi": "1.2.3",