@purpurds/promotion-card 8.2.4 → 8.2.5
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 +4 -4
- package/dist/promotion-card.cjs.js +13 -13
- package/dist/promotion-card.cjs.js.map +1 -1
- package/dist/promotion-card.d.ts.map +1 -1
- package/dist/promotion-card.es.js +354 -366
- package/dist/promotion-card.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +13 -13
- package/src/promotion-card.module.scss +1 -16
- package/src/promotion-card.test.tsx +0 -25
- package/src/promotion-card.tsx +3 -14
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-promotion-
|
|
1
|
+
._purpur-promotion-card_1hj0f_1{container:promotion-card/inline-size;position:relative;width:100%;height:100%;color:var(--promotion-card-color);box-sizing:border-box}._purpur-promotion-card__inner_1hj0f_9{height:100%}._purpur-promotion-card__inner--without-image_1hj0f_12 ._purpur-promotion-card__content_1hj0f_12{position:relative;z-index:1}._purpur-promotion-card__inner--without-image_1hj0f_12: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__inner--without-image_1hj0f_12:before{background-position:center center}}@container promotion-card (min-width: 1024px){._purpur-promotion-card__inner--without-image_1hj0f_12:before{transform:rotateY(0)}}._purpur-promotion-card__inner--with-image_1hj0f_37{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__inner--with-image_1hj0f_37{grid-template-areas:"body image";grid-template-columns:repeat(2,1fr)}}._purpur-promotion-card__actions_1hj0f_49{display:flex;flex-wrap:wrap;gap:var(--purpur-spacing-200);padding-top:var(--purpur-spacing-400)}._purpur-promotion-card__content_1hj0f_12{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_1hj0f_65{padding:var(--purpur-spacing-600)}._purpur-promotion-card__content--without-image_1hj0f_65 ._purpur-promotion-card__main-content_1hj0f_68{display:flex;flex-direction:row;gap:var(--purpur-spacing-300)}._purpur-promotion-card__content--without-image_1hj0f_65 ._purpur-promotion-card__heading_1hj0f_73{width:100%}}@container promotion-card (min-width: 600px){._purpur-promotion-card__content--with-image_1hj0f_78{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_1hj0f_78{padding:var(--purpur-spacing-1200) var(--purpur-spacing-600)}}._purpur-promotion-card__badge-wrapper_1hj0f_89{width:100%;padding-bottom:var(--purpur-spacing-200)}._purpur-promotion-card__heading_1hj0f_73,._purpur-promotion-card__body_1hj0f_93{width:100%}._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__heading_1hj0f_73{margin-bottom:var(--purpur-spacing-150);color:var(--promotion-card-color)}._purpur-promotion-card__main-content_1hj0f_68{display:flex;flex-direction:column}._purpur-promotion-card__main-content--space-between_1hj0f_104{flex-grow:1}._purpur-promotion-card__main-content--flex-end_1hj0f_107{flex-grow:0}._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93{display:flex;flex-direction:column;flex-grow:1}._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 p,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h1,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h2,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h3,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h4,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h5,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 h6,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 ul,._purpur-promotion-card_1hj0f_1 ._purpur-promotion-card__body_1hj0f_93 ol{color:var(--promotion-card-color)}._purpur-promotion-card__child-content_1hj0f_127{flex-grow:1}._purpur-promotion-card__additional-text_1hj0f_130{margin-top:var(--purpur-spacing-400)}._purpur-promotion-card__image-wrapper_1hj0f_133{grid-area:image}._purpur-promotion-card__image-wrapper--decorative_1hj0f_136 picture,._purpur-promotion-card__image-wrapper--decorative_1hj0f_136 img,._purpur-promotion-card__image-wrapper--product_1hj0f_137 picture,._purpur-promotion-card__image-wrapper--product_1hj0f_137 img{display:block;width:100%;height:auto}._purpur-promotion-card__image-wrapper--decorative_1hj0f_136 img,._purpur-promotion-card__image-wrapper--product_1hj0f_137 img{object-fit:cover}._purpur-promotion-card__image-wrapper--decorative_1hj0f_136{position:relative;width:100%;aspect-ratio:3/2}@container promotion-card (min-width: 600px){._purpur-promotion-card__image-wrapper--decorative_1hj0f_136{aspect-ratio:unset}._purpur-promotion-card__image-wrapper--decorative_1hj0f_136 img{height:100%}}._purpur-promotion-card__image-wrapper--product_1hj0f_137{display:flex;justify-content:center;align-items:center;padding:var(--purpur-spacing-400)}._purpur-promotion-card_1hj0f_1 [class*=_purpur-cta-link_],._purpur-promotion-card_1hj0f_1 [class*=_purpur-button_]{width:100%}@container promotion-card (min-width: 600px){._purpur-promotion-card_1hj0f_1 [class*=_purpur-cta-link_],._purpur-promotion-card_1hj0f_1 [class*=_purpur-button_]{width:auto}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/promotion-card",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.5",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/promotion-card.cjs.js",
|
|
6
6
|
"types": "./dist/promotion-card.d.ts",
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
"source": "src/promotion-card.tsx",
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/card": "8.2.
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/common-types": "8.2.
|
|
24
|
-
"@purpurds/cta-link": "8.2.
|
|
25
|
-
"@purpurds/
|
|
26
|
-
"@purpurds/
|
|
27
|
-
"@purpurds/paragraph": "8.2.
|
|
28
|
-
"@purpurds/
|
|
20
|
+
"@purpurds/badge": "8.2.5",
|
|
21
|
+
"@purpurds/card": "8.2.5",
|
|
22
|
+
"@purpurds/button": "8.2.5",
|
|
23
|
+
"@purpurds/common-types": "8.2.5",
|
|
24
|
+
"@purpurds/cta-link": "8.2.5",
|
|
25
|
+
"@purpurds/heading": "8.2.5",
|
|
26
|
+
"@purpurds/icon": "8.2.5",
|
|
27
|
+
"@purpurds/paragraph": "8.2.5",
|
|
28
|
+
"@purpurds/tokens": "8.2.5"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@storybook/react-vite": "^9.0.18",
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"vite": "^6.2.1",
|
|
47
47
|
"vitest": "^3.1.2",
|
|
48
48
|
"@purpurds/component-rig": "1.0.0",
|
|
49
|
-
"@purpurds/
|
|
50
|
-
"@purpurds/
|
|
51
|
-
"@purpurds/theme": "8.2.
|
|
49
|
+
"@purpurds/text-spacing": "8.2.5",
|
|
50
|
+
"@purpurds/grid": "8.2.5",
|
|
51
|
+
"@purpurds/theme": "8.2.5"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@types/react": "^18 || ^19",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
|
|
13
13
|
&__inner {
|
|
14
|
+
height: 100%;
|
|
14
15
|
&--without-image {
|
|
15
16
|
#{$root}__content {
|
|
16
17
|
position: relative;
|
|
@@ -51,22 +52,6 @@
|
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
|
|
54
|
-
&__image-gradient {
|
|
55
|
-
position: absolute;
|
|
56
|
-
bottom: 0;
|
|
57
|
-
width: 100%;
|
|
58
|
-
height: 100%;
|
|
59
|
-
background: linear-gradient(0, var(--promotion-card-background), transparent 75%);
|
|
60
|
-
|
|
61
|
-
@container promotion-card (min-width: #{$purpur-breakpoint-md}) {
|
|
62
|
-
left: 0;
|
|
63
|
-
top: 0;
|
|
64
|
-
width: 100%;
|
|
65
|
-
height: 100%;
|
|
66
|
-
background: linear-gradient(90deg, var(--promotion-card-background), transparent 75%);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
55
|
&__actions {
|
|
71
56
|
display: flex;
|
|
72
57
|
flex-wrap: wrap;
|
|
@@ -108,31 +108,6 @@ describe("PromotionCard", () => {
|
|
|
108
108
|
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
|
109
109
|
});
|
|
110
110
|
|
|
111
|
-
it("should render with image gradient", () => {
|
|
112
|
-
renderPromotionCard({
|
|
113
|
-
...props,
|
|
114
|
-
decorativeImage: <img alt="fin placeholder bild" src="https://via.placeholder.com/150" />,
|
|
115
|
-
hasGradient: true,
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
expect(screen.getByTestId("promotion-card-gradient")).toBeInTheDocument();
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
it("should render without image gradient if it doesn't have an image", () => {
|
|
122
|
-
renderPromotionCard(props);
|
|
123
|
-
|
|
124
|
-
expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
it("should render without image gradient if 'hasGradient' isn't set", () => {
|
|
128
|
-
renderPromotionCard({
|
|
129
|
-
...props,
|
|
130
|
-
decorativeImage: <img alt="fin placeholder bild" src="https://via.placeholder.com/150" />,
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
|
|
134
|
-
});
|
|
135
|
-
|
|
136
111
|
it("should render action elements", async () => {
|
|
137
112
|
renderPromotionCard({
|
|
138
113
|
...props,
|
package/src/promotion-card.tsx
CHANGED
|
@@ -83,22 +83,17 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
|
|
|
83
83
|
const [colorScheme] = useColorScheme();
|
|
84
84
|
let rest = props;
|
|
85
85
|
let image;
|
|
86
|
-
let showGradient;
|
|
87
86
|
|
|
88
87
|
if ("decorativeImage" in props) {
|
|
89
|
-
const {
|
|
88
|
+
const { decorativeImage, ...spread } = props;
|
|
90
89
|
image = decorativeImage;
|
|
91
|
-
showGradient = hasGradient;
|
|
92
90
|
rest = spread;
|
|
93
91
|
} else if ("productImage" in props) {
|
|
94
|
-
const {
|
|
92
|
+
const { productImage, ...spread } = props;
|
|
95
93
|
image = productImage;
|
|
96
|
-
showGradient = hasGradient;
|
|
97
94
|
rest = spread;
|
|
98
95
|
} else if ("hasGradient" in props) {
|
|
99
|
-
|
|
100
|
-
showGradient = hasGradient;
|
|
101
|
-
rest = spread;
|
|
96
|
+
rest = props;
|
|
102
97
|
}
|
|
103
98
|
|
|
104
99
|
const customProperties = {
|
|
@@ -182,12 +177,6 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
|
|
|
182
177
|
})}
|
|
183
178
|
>
|
|
184
179
|
{image}
|
|
185
|
-
{showGradient && (
|
|
186
|
-
<div
|
|
187
|
-
className={cx(`${rootClassName}__image-gradient`)}
|
|
188
|
-
data-testid="promotion-card-gradient"
|
|
189
|
-
/>
|
|
190
|
-
)}
|
|
191
180
|
</div>
|
|
192
181
|
)}
|
|
193
182
|
</div>
|