@purpurds/promotion-card 8.2.4 → 8.2.6
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 +0 -2
- package/dist/promotion-card.d.ts.map +1 -1
- package/dist/promotion-card.es.js +396 -408
- 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.stories.tsx +0 -2
- package/src/promotion-card.test.tsx +0 -25
- package/src/promotion-card.tsx +4 -17
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.6",
|
|
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/button": "8.2.
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/icon": "8.2.
|
|
26
|
-
"@purpurds/tokens": "8.2.
|
|
27
|
-
"@purpurds/
|
|
28
|
-
"@purpurds/badge": "8.2.
|
|
20
|
+
"@purpurds/button": "8.2.6",
|
|
21
|
+
"@purpurds/cta-link": "8.2.6",
|
|
22
|
+
"@purpurds/card": "8.2.6",
|
|
23
|
+
"@purpurds/heading": "8.2.6",
|
|
24
|
+
"@purpurds/paragraph": "8.2.6",
|
|
25
|
+
"@purpurds/icon": "8.2.6",
|
|
26
|
+
"@purpurds/tokens": "8.2.6",
|
|
27
|
+
"@purpurds/common-types": "8.2.6",
|
|
28
|
+
"@purpurds/badge": "8.2.6"
|
|
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/grid": "8.2.
|
|
50
|
-
"@purpurds/
|
|
51
|
-
"@purpurds/
|
|
49
|
+
"@purpurds/grid": "8.2.6",
|
|
50
|
+
"@purpurds/theme": "8.2.6",
|
|
51
|
+
"@purpurds/text-spacing": "8.2.6"
|
|
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;
|
|
@@ -137,7 +137,6 @@ export const Showcase: Story = {
|
|
|
137
137
|
|
|
138
138
|
export const WithDecorativeImage: Story = {
|
|
139
139
|
args: {
|
|
140
|
-
hasGradient: true,
|
|
141
140
|
decorativeImage: (
|
|
142
141
|
<img
|
|
143
142
|
src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
|
|
@@ -186,7 +185,6 @@ export const WithProductImage: Story = {
|
|
|
186
185
|
|
|
187
186
|
export const CardGroup: Story = {
|
|
188
187
|
args: {
|
|
189
|
-
hasGradient: true,
|
|
190
188
|
decorativeImage: (
|
|
191
189
|
<img
|
|
192
190
|
src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
|
|
@@ -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
|
@@ -39,8 +39,8 @@ const colors: StyleRecord = {
|
|
|
39
39
|
quaternary: "var(--purpur-color-text-tone-on-tone-tertiary)",
|
|
40
40
|
} as const;
|
|
41
41
|
|
|
42
|
-
type DecorativeImage = { decorativeImage?: ReactNode
|
|
43
|
-
type ProductImage = { productImage?: ReactNode
|
|
42
|
+
type DecorativeImage = { decorativeImage?: ReactNode };
|
|
43
|
+
type ProductImage = { productImage?: ReactNode };
|
|
44
44
|
|
|
45
45
|
export type PromotionCardProps = Omit<BaseProps, "children"> & {
|
|
46
46
|
variant?: PromotionCardVariant;
|
|
@@ -83,21 +83,14 @@ 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
|
-
rest = spread;
|
|
98
|
-
} else if ("hasGradient" in props) {
|
|
99
|
-
const { hasGradient, ...spread } = props;
|
|
100
|
-
showGradient = hasGradient;
|
|
101
94
|
rest = spread;
|
|
102
95
|
}
|
|
103
96
|
|
|
@@ -182,12 +175,6 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
|
|
|
182
175
|
})}
|
|
183
176
|
>
|
|
184
177
|
{image}
|
|
185
|
-
{showGradient && (
|
|
186
|
-
<div
|
|
187
|
-
className={cx(`${rootClassName}__image-gradient`)}
|
|
188
|
-
data-testid="promotion-card-gradient"
|
|
189
|
-
/>
|
|
190
|
-
)}
|
|
191
178
|
</div>
|
|
192
179
|
)}
|
|
193
180
|
</div>
|