srcdev-nuxt-components 9.4.11 → 9.4.12
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.
- package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md +11 -0
- package/app/components/02.molecules/pricing-card/PricingCard.vue +3 -1
- package/app/components/02.molecules/pricing-card/stories/PricingCard.stories.ts +2 -0
- package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts +13 -0
- package/package.json +1 -1
|
@@ -131,6 +131,17 @@ When displaying multiple cards side-by-side (common in pricing pages), wrap in a
|
|
|
131
131
|
|
|
132
132
|
---
|
|
133
133
|
|
|
134
|
+
## Highlight badge text
|
|
135
|
+
|
|
136
|
+
`isHighlighted` shows a top-centred badge reading "Most Popular". Pass `badge-text` to change it,
|
|
137
|
+
e.g. for localisation:
|
|
138
|
+
|
|
139
|
+
```vue
|
|
140
|
+
<PricingCard planName="Standard" :price="99" is-highlighted :badge-text="t('pricing.mostPopular')" />
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
134
145
|
## Discount ribbon
|
|
135
146
|
|
|
136
147
|
Pass `ribbon-text` to render a diagonal corner ribbon (top-right, 45°) for marketing callouts —
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
|
|
3
|
-
<div v-if="isHighlighted" class="pricing-card__badge">
|
|
3
|
+
<div v-if="isHighlighted" class="pricing-card__badge">{{ badgeText }}</div>
|
|
4
4
|
|
|
5
5
|
<div v-if="ribbonText" class="pricing-card__ribbon-clip">
|
|
6
6
|
<span class="pricing-card__ribbon">{{ ribbonText }}</span>
|
|
@@ -41,6 +41,7 @@ interface Props {
|
|
|
41
41
|
description?: string;
|
|
42
42
|
features?: string[];
|
|
43
43
|
isHighlighted?: boolean;
|
|
44
|
+
badgeText?: string;
|
|
44
45
|
ctaText?: string;
|
|
45
46
|
ctaDisabled?: boolean;
|
|
46
47
|
ribbonText?: string;
|
|
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
54
55
|
description: undefined,
|
|
55
56
|
features: () => [],
|
|
56
57
|
isHighlighted: false,
|
|
58
|
+
badgeText: "Most Popular",
|
|
57
59
|
ctaText: "Get started",
|
|
58
60
|
ctaDisabled: false,
|
|
59
61
|
ribbonText: undefined,
|
|
@@ -11,6 +11,7 @@ const meta: Meta<typeof PricingCard> = {
|
|
|
11
11
|
billingPeriod: { control: "text" },
|
|
12
12
|
description: { control: "text" },
|
|
13
13
|
isHighlighted: { control: "boolean" },
|
|
14
|
+
badgeText: { control: "text" },
|
|
14
15
|
ctaText: { control: "text" },
|
|
15
16
|
ctaDisabled: { control: "boolean" },
|
|
16
17
|
ribbonText: { control: "text" },
|
|
@@ -22,6 +23,7 @@ const meta: Meta<typeof PricingCard> = {
|
|
|
22
23
|
description: "Perfect for freelancers and solo practitioners.",
|
|
23
24
|
features: ["Embed on one domain", "Unlimited consultations", "Email support", "Monthly updates"],
|
|
24
25
|
isHighlighted: false,
|
|
26
|
+
badgeText: "Most Popular",
|
|
25
27
|
ctaText: "Get started",
|
|
26
28
|
ctaDisabled: false,
|
|
27
29
|
ribbonText: undefined,
|
|
@@ -84,6 +84,19 @@ describe("PricingCard", () => {
|
|
|
84
84
|
expect(wrapper.text()).toContain("Most Popular");
|
|
85
85
|
});
|
|
86
86
|
|
|
87
|
+
it("renders custom badge text when highlighted", () => {
|
|
88
|
+
const wrapper = mount(PricingCard, {
|
|
89
|
+
props: {
|
|
90
|
+
planName: "Test Plan",
|
|
91
|
+
price: 100,
|
|
92
|
+
isHighlighted: true,
|
|
93
|
+
badgeText: "Le plus populaire",
|
|
94
|
+
},
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
expect(wrapper.find(".pricing-card__badge").text()).toBe("Le plus populaire");
|
|
98
|
+
});
|
|
99
|
+
|
|
87
100
|
it("emits select event with plan name on CTA click", async () => {
|
|
88
101
|
const wrapper = mount(PricingCard, {
|
|
89
102
|
props: {
|