srcdev-nuxt-components 9.6.13 → 9.6.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/.claude/rules/consumer/story-register-components.md +1 -1
  2. package/.claude/skills/component-compliance-checklist.md +5 -0
  3. package/.claude/skills/components/display-qr-code.md +22 -4
  4. package/.claude/skills/components/eyebrow-text.md +9 -5
  5. package/.claude/skills/components/header-block.md +13 -5
  6. package/.claude/skills/components/hero-text.md +13 -9
  7. package/.claude/skills/components/link-text.md +8 -5
  8. package/.claude/skills/components/pop-over.md +17 -3
  9. package/.claude/skills/storybook-add-story.md +5 -2
  10. package/.claude/skills/testing-add-playwright.md +12 -7
  11. package/.vscode/srcdev-component-display-qr-code.code-snippets +12 -1
  12. package/.vscode/srcdev-component-hero-text.code-snippets +21 -5
  13. package/.vscode/srcdev-component-link-text.code-snippets +3 -3
  14. package/.vscode/srcdev-component-pop-over.code-snippets +28 -0
  15. package/app/components/01.atoms/pop-over/CONSUMER-STYLING.md +42 -9
  16. package/app/components/01.atoms/pop-over/PopOver.vue +28 -12
  17. package/app/components/01.atoms/pop-over/stories/PopOver.stories.ts +114 -2
  18. package/app/components/01.atoms/pop-over/tests/PopOver.spec.ts +35 -0
  19. package/app/components/01.atoms/pop-over/tests/__snapshots__/PopOver.spec.ts.snap +5 -1
  20. package/app/components/01.atoms/qr-code/CONSUMER-STYLING.md +16 -3
  21. package/app/components/01.atoms/qr-code/DisplayQrCode.vue +31 -0
  22. package/app/components/01.atoms/qr-code/stories/DisplayQrCode.stories.ts +190 -157
  23. package/app/components/01.atoms/qr-code/tests/DisplayQrCode.spec.ts +58 -0
  24. package/app/components/01.atoms/text-blocks/eyebrow-text/CONSUMER-STYLING.md +9 -1
  25. package/app/components/01.atoms/text-blocks/eyebrow-text/EyebrowText.vue +5 -4
  26. package/app/components/01.atoms/text-blocks/eyebrow-text/playwright/eyebrow-text.playwright.ts +1 -1
  27. package/app/components/01.atoms/text-blocks/eyebrow-text/stories/EyebrowText.stories.ts +104 -17
  28. package/app/components/01.atoms/text-blocks/eyebrow-text/tests/EyebrowText.spec.ts +68 -118
  29. package/app/components/01.atoms/text-blocks/eyebrow-text/tests/__snapshots__/EyebrowText.spec.ts.snap +8 -8
  30. package/app/components/01.atoms/text-blocks/header-block/CONSUMER-STYLING.md +49 -24
  31. package/app/components/01.atoms/text-blocks/header-block/HeaderBlock.vue +9 -1
  32. package/app/components/01.atoms/text-blocks/header-block/stories/HeaderBlock.stories.ts +96 -26
  33. package/app/components/01.atoms/text-blocks/header-block/tests/HeaderBlock.spec.ts +64 -48
  34. package/app/components/01.atoms/text-blocks/header-block/tests/__snapshots__/HeaderBlock.spec.ts.snap +2 -2
  35. package/app/components/01.atoms/text-blocks/hero-text/CONSUMER-STYLING.md +22 -6
  36. package/app/components/01.atoms/text-blocks/hero-text/HeroText.vue +32 -23
  37. package/app/components/01.atoms/text-blocks/hero-text/playwright/hero-text.playwright.ts +1 -1
  38. package/app/components/01.atoms/text-blocks/hero-text/stories/HeroText.stories.ts +176 -23
  39. package/app/components/01.atoms/text-blocks/hero-text/tests/HeroText.spec.ts +129 -123
  40. package/app/components/01.atoms/text-blocks/hero-text/tests/__snapshots__/HeroText.spec.ts.snap +2 -2
  41. package/app/components/01.atoms/text-blocks/link-text/CONSUMER-STYLING.md +17 -0
  42. package/app/components/01.atoms/text-blocks/link-text/LinkText.vue +9 -3
  43. package/app/components/01.atoms/text-blocks/link-text/stories/LinkText.stories.ts +96 -99
  44. package/app/components/01.atoms/text-blocks/link-text/tests/LinkText.spec.ts +84 -93
  45. package/app/components/02.molecules/price-list/tests/__snapshots__/PriceList.spec.ts.snap +8 -8
  46. package/app/components/03.organisms/services/service-detail/tests/__snapshots__/ServiceDetail.spec.ts.snap +15 -15
  47. package/app/components/03.organisms/services/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap +3 -3
  48. package/app/components/03.organisms/services/services-card/tests/ServicesCard.spec.ts +3 -3
  49. package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap +3 -3
  50. package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts +1 -1
  51. package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServiceSummaryGrid.spec.ts.snap +9 -9
  52. package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap +9 -9
  53. package/package.json +1 -1
package/app/components/03.organisms/services/services-card/tests/__snapshots__/ServicesCard.spec.ts.snap CHANGED
@@ -7,9 +7,9 @@ exports[`ServicesCard > renders correct HTML structure 1`] = `
7
7
  <div class="grid-stack__layer"></div>
8
8
  </div>
9
9
  <div class="services-card-details">
10
- <div class="eyebrow-text large">A subtitle</div>
11
- <h2 class="hero-text heading axis-horizontal">
12
- <!--v-if--><span class="text-block-0 normal">Test Service</span>
10
+ <div class="eyebrow-text" data-font-size="large">A subtitle</div>
11
+ <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
12
+ <!--v-if--><span class="hero-text-segment normal">Test Service</span>
13
13
  </h2>
14
14
  <div class="services-card-description">A short description of the service.</div>
15
15
  <div class="services-card-footer">
package/app/components/03.organisms/services/services-grids/tests/ServicesCardGrid.spec.ts CHANGED
@@ -139,7 +139,7 @@ describe("ServicesCardGrid", () => {
139
139
  props: { servicesData: mockServices, eyebrowConfig: { fontSize: "small" } },
140
140
  });
141
141
  wrapper.findAll(".eyebrow-text").forEach((el) => {
142
- expect(el.classes()).toContain("small");
142
+ expect(el.attributes("data-font-size")).toBe("small");
143
143
  });
144
144
  });
145
145
 
package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServiceSummaryGrid.spec.ts.snap CHANGED
@@ -6,9 +6,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
6
6
  <div class="service-summary__grid">
7
7
  <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-installation.jpg 1x, /_ipx/s_2160x2160/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-installation.jpg"></div>
8
8
  <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
9
- <div class="eyebrow-text large">Subtitle for Locs Installation</div>
10
- <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
11
- <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
9
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
10
+ <h2 id="v-0-0-0" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
11
+ <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
12
12
  </h2>
13
13
  <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
14
14
  <p class="page-body-normal">What this service is.</p>
@@ -19,9 +19,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
19
19
  <div class="service-summary__grid">
20
20
  <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/locs-retwist.jpg 1x, /_ipx/s_2160x2160/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/locs-retwist.jpg"></div>
21
21
  <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
22
- <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
23
- <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
24
- <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
22
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
23
+ <h2 id="v-0-0-1" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
24
+ <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
25
25
  </h2>
26
26
  <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
27
27
  <p class="page-body-normal">What this service is.</p>
@@ -32,9 +32,9 @@ exports[`ServiceSummaryGrid > renders correct HTML structure 1`] = `
32
32
  <div class="service-summary__grid">
33
33
  <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/colour-treatment.jpg 1x, /_ipx/s_2160x2160/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="service-summary__image" src="/_ipx/s_1080x1080/images/colour-treatment.jpg"></div>
34
34
  <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
35
- <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
36
- <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
37
- <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
35
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
36
+ <h2 id="v-0-0-2" class="hero-text mb-20" data-font-size="title" data-axis="horizontal">
37
+ <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
38
38
  </h2>
39
39
  <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
40
40
  <p class="page-body-normal">What this service is.</p>
package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap CHANGED
@@ -8,9 +8,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
8
8
  <div class="grid-stack__layer"></div>
9
9
  </div>
10
10
  <div class="services-card-details">
11
- <div class="eyebrow-text large">Subtitle for Locs Installation</div>
12
- <h2 class="hero-text heading axis-horizontal">
13
- <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
11
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Installation</div>
12
+ <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
13
+ <!--v-if--><span class="hero-text-segment normal">Locs Installation</span>
14
14
  </h2>
15
15
  <div class="services-card-description">Short description for Locs Installation.</div>
16
16
  <div class="services-card-footer">
@@ -31,9 +31,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
31
31
  <div class="grid-stack__layer"></div>
32
32
  </div>
33
33
  <div class="services-card-details">
34
- <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
35
- <h2 class="hero-text heading axis-horizontal">
36
- <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
34
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Locs Retwist</div>
35
+ <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
36
+ <!--v-if--><span class="hero-text-segment normal">Locs Retwist</span>
37
37
  </h2>
38
38
  <div class="services-card-description">Short description for Locs Retwist.</div>
39
39
  <div class="services-card-footer">
@@ -54,9 +54,9 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
54
54
  <div class="grid-stack__layer"></div>
55
55
  </div>
56
56
  <div class="services-card-details">
57
- <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
58
- <h2 class="hero-text heading axis-horizontal">
59
- <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
57
+ <div class="eyebrow-text" data-font-size="large">Subtitle for Colour Treatment</div>
58
+ <h2 class="hero-text" data-font-size="heading" data-axis="horizontal">
59
+ <!--v-if--><span class="hero-text-segment normal">Colour Treatment</span>
60
60
  </h2>
61
61
  <div class="services-card-description">Short description for Colour Treatment.</div>
62
62
  <div class="services-card-footer">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "9.6.13",
4
+ "version": "9.6.14",
5
5
  "main": "nuxt.config.ts",
6
6
  "types": "types.d.ts",
7
7
  "license": "MIT",