@purpurds/promotion-card 5.32.0 → 5.33.0
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/dist/LICENSE.txt +12 -5
- package/dist/promotion-card.cjs.js +19 -15
- package/dist/promotion-card.cjs.js.map +1 -1
- package/dist/promotion-card.d.ts +6 -0
- package/dist/promotion-card.d.ts.map +1 -1
- package/dist/promotion-card.es.js +705 -588
- package/dist/promotion-card.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +11 -11
- package/src/promotion-card.module.scss +12 -1
- package/src/promotion-card.stories.tsx +11 -0
- package/src/promotion-card.tsx +20 -1
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-promotion-
|
|
1
|
+
._purpur-promotion-card_1cvjr_1{position:relative;width:100%;height:100%;color:var(--promotion-card-color);box-sizing:border-box}._purpur-promotion-card--without-image_1cvjr_8 ._purpur-promotion-card__content_1cvjr_8{position:relative;z-index:1}._purpur-promotion-card--without-image_1cvjr_8:before{content:"";position:absolute;width:100%;height:100%;background-color:var(--promotion-card-background);background-image:var(--promotion-card-background-image);background-position:right 50% center;background-size:cover;transform:rotateY(180deg)}@container promotion-card (min-width: 600px){._purpur-promotion-card--without-image_1cvjr_8:before{background-position:center center}}@container promotion-card (min-width: 1024px){._purpur-promotion-card--without-image_1cvjr_8:before{transform:rotateY(0)}}._purpur-promotion-card--with-image_1cvjr_33{display:grid;grid-template-areas:"image" "body";grid-template-rows:auto 1fr;background:var(--promotion-card-background)}@container promotion-card (min-width: 600px){._purpur-promotion-card--with-image_1cvjr_33{grid-template-areas:"body image";grid-template-columns:repeat(2,1fr)}}._purpur-promotion-card__card_1cvjr_45{container:promotion-card/inline-size;height:100%}._purpur-promotion-card__image-gradient_1cvjr_49{position:absolute;bottom:0;width:100%;height:100%;background:linear-gradient(0,var(--promotion-card-background),transparent 75%)}@container promotion-card (min-width: 600px){._purpur-promotion-card__image-gradient_1cvjr_49{left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,var(--promotion-card-background),transparent 75%)}}._purpur-promotion-card__actions_1cvjr_65{display:flex;flex-wrap:wrap;gap:var(--purpur-spacing-200);padding-top:var(--purpur-spacing-400)}._purpur-promotion-card__content_1cvjr_8{grid-area:body;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:var(--purpur-spacing-400);box-sizing:border-box}@container promotion-card (min-width: 1024px){._purpur-promotion-card__content--without-image_1cvjr_81{padding:var(--purpur-spacing-600)}._purpur-promotion-card__content--without-image_1cvjr_81 ._purpur-promotion-card__main-content_1cvjr_84{display:flex;flex-direction:row;gap:var(--purpur-spacing-300)}._purpur-promotion-card__content--without-image_1cvjr_81 ._purpur-promotion-card__heading_1cvjr_89{width:100%}}@container promotion-card (min-width: 600px){._purpur-promotion-card__content--with-image_1cvjr_94{flex-direction:column;justify-content:center;padding:var(--purpur-spacing-600) var(--purpur-spacing-400)}}@container promotion-card (min-width: 1024px){._purpur-promotion-card__content--with-image_1cvjr_94{padding:var(--purpur-spacing-1200) var(--purpur-spacing-600)}}._purpur-promotion-card__badge-wrapper_1cvjr_105{width:100%;padding-bottom:var(--purpur-spacing-200)}._purpur-promotion-card__heading_1cvjr_89,._purpur-promotion-card__body_1cvjr_109{width:100%}._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__heading_1cvjr_89{margin-bottom:var(--purpur-spacing-150);color:var(--promotion-card-color)}._purpur-promotion-card__main-content_1cvjr_84{display:flex;flex-direction:column}._purpur-promotion-card__main-content--space-between_1cvjr_120{flex-grow:1}._purpur-promotion-card__main-content--flex-end_1cvjr_123{flex-grow:0}._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109{display:flex;flex-direction:column;flex-grow:1}._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 p,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h1,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h2,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h3,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h4,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h5,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 h6,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 ul,._purpur-promotion-card_1cvjr_1 ._purpur-promotion-card__body_1cvjr_109 ol{color:var(--promotion-card-color)}._purpur-promotion-card__child-content_1cvjr_143{flex-grow:1}._purpur-promotion-card__additional-text_1cvjr_146{margin-top:var(--purpur-spacing-400)}._purpur-promotion-card__image-wrapper_1cvjr_149{grid-area:image}._purpur-promotion-card__image-wrapper--decorative_1cvjr_152 picture,._purpur-promotion-card__image-wrapper--decorative_1cvjr_152 img,._purpur-promotion-card__image-wrapper--product_1cvjr_153 picture,._purpur-promotion-card__image-wrapper--product_1cvjr_153 img{display:block;width:100%;height:auto}._purpur-promotion-card__image-wrapper--decorative_1cvjr_152 img,._purpur-promotion-card__image-wrapper--product_1cvjr_153 img{object-fit:cover}._purpur-promotion-card__image-wrapper--decorative_1cvjr_152{position:relative;width:100%;aspect-ratio:3/2}@container promotion-card (min-width: 600px){._purpur-promotion-card__image-wrapper--decorative_1cvjr_152{aspect-ratio:unset}._purpur-promotion-card__image-wrapper--decorative_1cvjr_152 img{height:100%}}._purpur-promotion-card__image-wrapper--product_1cvjr_153{display:flex;justify-content:center;align-items:center;padding:var(--purpur-spacing-400)}._purpur-promotion-card_1cvjr_1 [class*=_purpur-cta-link_],._purpur-promotion-card_1cvjr_1 [class*=_purpur-button_]{width:100%}@container promotion-card (min-width: 600px){._purpur-promotion-card_1cvjr_1 [class*=_purpur-cta-link_],._purpur-promotion-card_1cvjr_1 [class*=_purpur-button_]{width:auto}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/promotion-card",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.33.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/promotion-card.cjs.js",
|
|
6
6
|
"types": "./dist/promotion-card.d.ts",
|
|
@@ -16,13 +16,14 @@
|
|
|
16
16
|
"source": "src/promotion-card.tsx",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/badge": "5.
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/badge": "5.33.0",
|
|
20
|
+
"@purpurds/button": "5.33.0",
|
|
21
|
+
"@purpurds/heading": "5.33.0",
|
|
22
|
+
"@purpurds/paragraph": "5.33.0",
|
|
23
|
+
"@purpurds/cta-link": "5.33.0",
|
|
24
|
+
"@purpurds/card": "5.33.0",
|
|
25
|
+
"@purpurds/icon": "5.33.0",
|
|
26
|
+
"@purpurds/tokens": "5.33.0"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
29
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -47,9 +48,8 @@
|
|
|
47
48
|
"vite": "5.4.8",
|
|
48
49
|
"vitest": "^2.1.2",
|
|
49
50
|
"@purpurds/component-rig": "1.0.0",
|
|
50
|
-
"@purpurds/
|
|
51
|
-
"@purpurds/
|
|
52
|
-
"@purpurds/grid": "5.32.0"
|
|
51
|
+
"@purpurds/text-spacing": "5.33.0",
|
|
52
|
+
"@purpurds/grid": "5.33.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build:dev": "vite",
|
|
@@ -131,7 +131,14 @@
|
|
|
131
131
|
&__main-content {
|
|
132
132
|
display: flex;
|
|
133
133
|
flex-direction: column;
|
|
134
|
-
|
|
134
|
+
|
|
135
|
+
&--space-between {
|
|
136
|
+
flex-grow: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&--flex-end {
|
|
140
|
+
flex-grow: 0;
|
|
141
|
+
}
|
|
135
142
|
}
|
|
136
143
|
|
|
137
144
|
& &__body {
|
|
@@ -156,6 +163,10 @@
|
|
|
156
163
|
flex-grow: 1;
|
|
157
164
|
}
|
|
158
165
|
|
|
166
|
+
&__additional-text {
|
|
167
|
+
margin-top: var(--purpur-spacing-400);
|
|
168
|
+
}
|
|
169
|
+
|
|
159
170
|
&__image-wrapper {
|
|
160
171
|
grid-area: image;
|
|
161
172
|
|
|
@@ -11,6 +11,7 @@ import "@purpurds/card/styles";
|
|
|
11
11
|
import "@purpurds/cta-link/styles";
|
|
12
12
|
import "@purpurds/grid/styles";
|
|
13
13
|
import "@purpurds/heading/styles";
|
|
14
|
+
import "@purpurds/paragraph/styles";
|
|
14
15
|
import "@purpurds/icon/styles";
|
|
15
16
|
import "@purpurds/paragraph/styles";
|
|
16
17
|
import { PromotionCard, promotionCardVariants } from "./promotion-card";
|
|
@@ -42,6 +43,7 @@ const meta = {
|
|
|
42
43
|
href: "#",
|
|
43
44
|
},
|
|
44
45
|
],
|
|
46
|
+
additionalText: "Additional texts such as legal ones",
|
|
45
47
|
},
|
|
46
48
|
argTypes: {
|
|
47
49
|
variant: {
|
|
@@ -71,6 +73,15 @@ const meta = {
|
|
|
71
73
|
},
|
|
72
74
|
},
|
|
73
75
|
},
|
|
76
|
+
alignment: {
|
|
77
|
+
control: "select",
|
|
78
|
+
options: ["space-between", "flex-end"],
|
|
79
|
+
table: {
|
|
80
|
+
type: {
|
|
81
|
+
summary: ["space-between", "flex-end"].map((x) => `"${x}"`).join(" | "),
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
},
|
|
74
85
|
},
|
|
75
86
|
} satisfies Meta<typeof PromotionCard>;
|
|
76
87
|
|
package/src/promotion-card.tsx
CHANGED
|
@@ -10,6 +10,7 @@ import { type ButtonProps, Button } from "@purpurds/button";
|
|
|
10
10
|
import { Card } from "@purpurds/card";
|
|
11
11
|
import { CtaAnchorProps, CtaLink } from "@purpurds/cta-link";
|
|
12
12
|
import { Heading, HeadingTagType, TitleVariantType } from "@purpurds/heading";
|
|
13
|
+
import { Paragraph } from "@purpurds/paragraph";
|
|
13
14
|
import c from "classnames/bind";
|
|
14
15
|
|
|
15
16
|
import styles from "./promotion-card.module.scss";
|
|
@@ -58,6 +59,8 @@ export type PromotionCardProps = {
|
|
|
58
59
|
className?: string;
|
|
59
60
|
actions?: Action[];
|
|
60
61
|
children: ReactNode;
|
|
62
|
+
alignment?: "space-between" | "flex-end";
|
|
63
|
+
additionalText?: ReactNode;
|
|
61
64
|
} & (DecorativeImage | ProductImage);
|
|
62
65
|
|
|
63
66
|
const cx = c.bind(styles);
|
|
@@ -77,6 +80,8 @@ const PromotionCardComponent = (
|
|
|
77
80
|
actions,
|
|
78
81
|
children,
|
|
79
82
|
style,
|
|
83
|
+
alignment = "space-between",
|
|
84
|
+
additionalText,
|
|
80
85
|
...props
|
|
81
86
|
}: PromotionCardProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
82
87
|
ref: ForwardedRef<HTMLDivElement>
|
|
@@ -144,7 +149,12 @@ const PromotionCardComponent = (
|
|
|
144
149
|
</div>
|
|
145
150
|
)}
|
|
146
151
|
|
|
147
|
-
<div
|
|
152
|
+
<div
|
|
153
|
+
className={cx(
|
|
154
|
+
`${rootClassName}__main-content`,
|
|
155
|
+
`${rootClassName}__main-content--${alignment}`
|
|
156
|
+
)}
|
|
157
|
+
>
|
|
148
158
|
<Heading
|
|
149
159
|
tag={titleTag}
|
|
150
160
|
variant={titleVariant}
|
|
@@ -175,6 +185,15 @@ const PromotionCardComponent = (
|
|
|
175
185
|
})}
|
|
176
186
|
</div>
|
|
177
187
|
)}
|
|
188
|
+
{additionalText && (
|
|
189
|
+
<Paragraph
|
|
190
|
+
negative
|
|
191
|
+
variant="additional-100"
|
|
192
|
+
className={cx(`${rootClassName}__additional-text`)}
|
|
193
|
+
>
|
|
194
|
+
{additionalText}
|
|
195
|
+
</Paragraph>
|
|
196
|
+
)}
|
|
178
197
|
</div>
|
|
179
198
|
</div>
|
|
180
199
|
</div>
|