@purpurds/promotion-card 7.13.1 → 8.0.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 +11 -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 +513 -491
- package/dist/promotion-card.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +14 -13
- package/src/promotion-card.module.scss +34 -34
- package/src/promotion-card.stories.tsx +14 -14
- package/src/promotion-card.test.tsx +53 -88
- package/src/promotion-card.tsx +28 -12
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-promotion-
|
|
1
|
+
._purpur-promotion-card_w866l_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--without-image_w866l_9 ._purpur-promotion-card__content_w866l_9{position:relative;z-index:1}._purpur-promotion-card__inner--without-image_w866l_9: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_w866l_9:before{background-position:center center}}@container promotion-card (min-width: 1024px){._purpur-promotion-card__inner--without-image_w866l_9:before{transform:rotateY(0)}}._purpur-promotion-card__inner--with-image_w866l_34{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_w866l_34{grid-template-areas:"body image";grid-template-columns:repeat(2,1fr)}}._purpur-promotion-card__image-gradient_w866l_46{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_w866l_46{left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,var(--promotion-card-background),transparent 75%)}}._purpur-promotion-card__actions_w866l_62{display:flex;flex-wrap:wrap;gap:var(--purpur-spacing-200);padding-top:var(--purpur-spacing-400)}._purpur-promotion-card__content_w866l_9{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_w866l_78{padding:var(--purpur-spacing-600)}._purpur-promotion-card__content--without-image_w866l_78 ._purpur-promotion-card__main-content_w866l_81{display:flex;flex-direction:row;gap:var(--purpur-spacing-300)}._purpur-promotion-card__content--without-image_w866l_78 ._purpur-promotion-card__heading_w866l_86{width:100%}}@container promotion-card (min-width: 600px){._purpur-promotion-card__content--with-image_w866l_91{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_w866l_91{padding:var(--purpur-spacing-1200) var(--purpur-spacing-600)}}._purpur-promotion-card__badge-wrapper_w866l_102{width:100%;padding-bottom:var(--purpur-spacing-200)}._purpur-promotion-card__heading_w866l_86,._purpur-promotion-card__body_w866l_106{width:100%}._purpur-promotion-card_w866l_1 ._purpur-promotion-card__heading_w866l_86{margin-bottom:var(--purpur-spacing-150);color:var(--promotion-card-color)}._purpur-promotion-card__main-content_w866l_81{display:flex;flex-direction:column}._purpur-promotion-card__main-content--space-between_w866l_117{flex-grow:1}._purpur-promotion-card__main-content--flex-end_w866l_120{flex-grow:0}._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106{display:flex;flex-direction:column;flex-grow:1}._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 p,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h1,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h2,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h3,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h4,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h5,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 h6,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 ul,._purpur-promotion-card_w866l_1 ._purpur-promotion-card__body_w866l_106 ol{color:var(--promotion-card-color)}._purpur-promotion-card__child-content_w866l_140{flex-grow:1}._purpur-promotion-card__additional-text_w866l_143{margin-top:var(--purpur-spacing-400)}._purpur-promotion-card__image-wrapper_w866l_146{grid-area:image}._purpur-promotion-card__image-wrapper--decorative_w866l_149 picture,._purpur-promotion-card__image-wrapper--decorative_w866l_149 img,._purpur-promotion-card__image-wrapper--product_w866l_150 picture,._purpur-promotion-card__image-wrapper--product_w866l_150 img{display:block;width:100%;height:auto}._purpur-promotion-card__image-wrapper--decorative_w866l_149 img,._purpur-promotion-card__image-wrapper--product_w866l_150 img{object-fit:cover}._purpur-promotion-card__image-wrapper--decorative_w866l_149{position:relative;width:100%;aspect-ratio:3/2}@container promotion-card (min-width: 600px){._purpur-promotion-card__image-wrapper--decorative_w866l_149{aspect-ratio:unset}._purpur-promotion-card__image-wrapper--decorative_w866l_149 img{height:100%}}._purpur-promotion-card__image-wrapper--product_w866l_150{display:flex;justify-content:center;align-items:center;padding:var(--purpur-spacing-400)}._purpur-promotion-card_w866l_1 [class*=_purpur-cta-link_],._purpur-promotion-card_w866l_1 [class*=_purpur-button_]{width:100%}@container promotion-card (min-width: 600px){._purpur-promotion-card_w866l_1 [class*=_purpur-cta-link_],._purpur-promotion-card_w866l_1 [class*=_purpur-button_]{width:auto}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/promotion-card",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
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,16 @@
|
|
|
17
17
|
"source": "src/promotion-card.tsx",
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/card": "
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
26
|
-
"@purpurds/paragraph": "
|
|
27
|
-
"@purpurds/
|
|
28
|
-
"@purpurds/
|
|
20
|
+
"@purpurds/button": "8.0.0",
|
|
21
|
+
"@purpurds/heading": "8.0.0",
|
|
22
|
+
"@purpurds/card": "8.0.0",
|
|
23
|
+
"@purpurds/cta-link": "8.0.0",
|
|
24
|
+
"@purpurds/badge": "8.0.0",
|
|
25
|
+
"@purpurds/icon": "8.0.0",
|
|
26
|
+
"@purpurds/paragraph": "8.0.0",
|
|
27
|
+
"@purpurds/common-types": "8.0.0",
|
|
28
|
+
"@purpurds/theme": "8.0.0",
|
|
29
|
+
"@purpurds/tokens": "8.0.0"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
32
|
"@storybook/react-vite": "^9.0.18",
|
|
@@ -45,9 +46,9 @@
|
|
|
45
46
|
"typescript": "^5.6.3",
|
|
46
47
|
"vite": "^6.2.1",
|
|
47
48
|
"vitest": "^3.1.2",
|
|
48
|
-
"@purpurds/
|
|
49
|
-
"@purpurds/
|
|
50
|
-
"@purpurds/
|
|
49
|
+
"@purpurds/grid": "8.0.0",
|
|
50
|
+
"@purpurds/text-spacing": "8.0.0",
|
|
51
|
+
"@purpurds/component-rig": "1.0.0"
|
|
51
52
|
},
|
|
52
53
|
"peerDependencies": {
|
|
53
54
|
"@types/react": "^18 || ^19",
|
|
@@ -3,55 +3,54 @@
|
|
|
3
3
|
.purpur-promotion-card {
|
|
4
4
|
$root: &;
|
|
5
5
|
|
|
6
|
+
container: promotion-card / inline-size;
|
|
6
7
|
position: relative;
|
|
7
8
|
width: 100%;
|
|
8
9
|
height: 100%;
|
|
9
10
|
color: var(--promotion-card-color);
|
|
10
11
|
box-sizing: border-box;
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
&::before {
|
|
19
|
-
content: "";
|
|
20
|
-
position: absolute;
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
background-color: var(--promotion-card-background);
|
|
24
|
-
background-image: var(--promotion-card-background-image);
|
|
25
|
-
background-position: right 50% center;
|
|
26
|
-
background-size: cover;
|
|
27
|
-
transform: rotateY(180deg);
|
|
28
|
-
|
|
29
|
-
@container promotion-card (min-width: #{$purpur-breakpoint-md}) {
|
|
30
|
-
background-position: center center;
|
|
13
|
+
&__inner {
|
|
14
|
+
&--without-image {
|
|
15
|
+
#{$root}__content {
|
|
16
|
+
position: relative;
|
|
17
|
+
z-index: 1;
|
|
31
18
|
}
|
|
32
19
|
|
|
33
|
-
|
|
34
|
-
|
|
20
|
+
&::before {
|
|
21
|
+
content: "";
|
|
22
|
+
position: absolute;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
background-color: var(--promotion-card-background);
|
|
26
|
+
background-image: var(--promotion-card-background-image);
|
|
27
|
+
background-position: right 50% center;
|
|
28
|
+
background-size: cover;
|
|
29
|
+
transform: rotateY(180deg);
|
|
30
|
+
|
|
31
|
+
@container promotion-card (min-width: #{$purpur-breakpoint-md}) {
|
|
32
|
+
background-position: center center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@container promotion-card (min-width: #{$purpur-breakpoint-lg}) {
|
|
36
|
+
transform: rotateY(0);
|
|
37
|
+
}
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
|
-
}
|
|
38
40
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
&--with-image {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-areas: "image" "body";
|
|
44
|
+
grid-template-rows: auto 1fr;
|
|
45
|
+
background: var(--promotion-card-background);
|
|
44
46
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
@container promotion-card (min-width: #{$purpur-breakpoint-md}) {
|
|
48
|
+
grid-template-areas: "body image";
|
|
49
|
+
grid-template-columns: repeat(2, 1fr);
|
|
50
|
+
}
|
|
48
51
|
}
|
|
49
52
|
}
|
|
50
53
|
|
|
51
|
-
&__card {
|
|
52
|
-
container: promotion-card / inline-size;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
54
|
&__image-gradient {
|
|
56
55
|
position: absolute;
|
|
57
56
|
bottom: 0;
|
|
@@ -67,6 +66,7 @@
|
|
|
67
66
|
background: linear-gradient(90deg, var(--promotion-card-background), transparent 75%);
|
|
68
67
|
}
|
|
69
68
|
}
|
|
69
|
+
|
|
70
70
|
&__actions {
|
|
71
71
|
display: flex;
|
|
72
72
|
flex-wrap: wrap;
|
|
@@ -124,6 +124,17 @@ const Children = () => (
|
|
|
124
124
|
</>
|
|
125
125
|
);
|
|
126
126
|
|
|
127
|
+
export const Showcase: Story = {
|
|
128
|
+
render: (args) => {
|
|
129
|
+
return (
|
|
130
|
+
<PromotionCard actions={getActions(args.variant)} {...args}>
|
|
131
|
+
<Children />
|
|
132
|
+
</PromotionCard>
|
|
133
|
+
);
|
|
134
|
+
},
|
|
135
|
+
tags: ["visual:check"],
|
|
136
|
+
};
|
|
137
|
+
|
|
127
138
|
export const WithDecorativeImage: Story = {
|
|
128
139
|
args: {
|
|
129
140
|
hasGradient: true,
|
|
@@ -154,11 +165,11 @@ export const WithProductImage: Story = {
|
|
|
154
165
|
>
|
|
155
166
|
<source
|
|
156
167
|
type="image/webp"
|
|
157
|
-
srcSet="https://www.telia.se/images/j6b4qnxw7ufu/
|
|
168
|
+
srcSet="https://www.telia.se/images/j6b4qnxw7ufu/5yX3YQD1hi6koWo9u5CTJu/c664c85a29036a1df7f2cf53656c28a9/127001__160_800ffc8c-0bf0-40f0-91bf-7695f9cfcea5.png?fit=scale&w=250&fm=webp&q=90"
|
|
158
169
|
/>
|
|
159
170
|
<img
|
|
160
|
-
src="https://www.telia.se/images/j6b4qnxw7ufu/
|
|
161
|
-
alt="Iphone
|
|
171
|
+
src="https://www.telia.se/images/j6b4qnxw7ufu/5yX3YQD1hi6koWo9u5CTJu/c664c85a29036a1df7f2cf53656c28a9/127001__160_800ffc8c-0bf0-40f0-91bf-7695f9cfcea5.png?fit=scale&w=250&fm=png&q=90"
|
|
172
|
+
alt="Iphone 17"
|
|
162
173
|
/>
|
|
163
174
|
</picture>
|
|
164
175
|
),
|
|
@@ -214,17 +225,6 @@ export const CardGroup: Story = {
|
|
|
214
225
|
tags: ["visual:check"],
|
|
215
226
|
};
|
|
216
227
|
|
|
217
|
-
export const Showcase: Story = {
|
|
218
|
-
render: (args) => {
|
|
219
|
-
return (
|
|
220
|
-
<PromotionCard actions={getActions(args.variant)} {...args}>
|
|
221
|
-
<Children />
|
|
222
|
-
</PromotionCard>
|
|
223
|
-
);
|
|
224
|
-
},
|
|
225
|
-
tags: ["visual:check"],
|
|
226
|
-
};
|
|
227
|
-
|
|
228
228
|
export const ActionButtons: Story = {
|
|
229
229
|
args: {
|
|
230
230
|
actions: (
|
|
@@ -1,15 +1,36 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { ThemeProvider } from "@purpurds/theme";
|
|
2
3
|
import * as matchers from "@testing-library/jest-dom/matchers";
|
|
3
4
|
import { cleanup, render, screen } from "@testing-library/react";
|
|
4
|
-
import { afterEach, describe, expect, it } from "vitest";
|
|
5
|
+
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
5
6
|
|
|
6
7
|
import { PromotionCard } from "./promotion-card";
|
|
7
8
|
|
|
8
9
|
expect.extend(matchers);
|
|
9
10
|
|
|
11
|
+
Object.defineProperty(window, "matchMedia", {
|
|
12
|
+
writable: true,
|
|
13
|
+
value: vi.fn().mockImplementation((query) => ({
|
|
14
|
+
matches: false,
|
|
15
|
+
media: query,
|
|
16
|
+
onchange: null,
|
|
17
|
+
addEventListener: vi.fn(),
|
|
18
|
+
removeEventListener: vi.fn(),
|
|
19
|
+
})),
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
const renderPromotionCard = (props: React.ComponentProps<typeof PromotionCard>) => {
|
|
23
|
+
return render(
|
|
24
|
+
<ThemeProvider>
|
|
25
|
+
<PromotionCard {...props} />
|
|
26
|
+
</ThemeProvider>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
10
30
|
const props = {
|
|
11
31
|
title: "Promotion card title",
|
|
12
32
|
"data-testid": "promotion-id",
|
|
33
|
+
children: <div />,
|
|
13
34
|
} as const;
|
|
14
35
|
|
|
15
36
|
describe("PromotionCard", () => {
|
|
@@ -18,21 +39,13 @@ describe("PromotionCard", () => {
|
|
|
18
39
|
});
|
|
19
40
|
|
|
20
41
|
it("should render a PromotionCard", () => {
|
|
21
|
-
|
|
22
|
-
<PromotionCard {...props}>
|
|
23
|
-
<div />
|
|
24
|
-
</PromotionCard>
|
|
25
|
-
);
|
|
42
|
+
renderPromotionCard(props);
|
|
26
43
|
|
|
27
44
|
expect(screen.getByTestId("promotion-id")).toBeInTheDocument();
|
|
28
45
|
});
|
|
29
46
|
|
|
30
47
|
it("should set default custom properties", () => {
|
|
31
|
-
|
|
32
|
-
<PromotionCard {...props}>
|
|
33
|
-
<div />
|
|
34
|
-
</PromotionCard>
|
|
35
|
-
);
|
|
48
|
+
renderPromotionCard(props);
|
|
36
49
|
|
|
37
50
|
expect(screen.getByTestId("promotion-id")).toHaveStyle({
|
|
38
51
|
"--promotion-card-background": "var(--purpur-color-background-tone-on-tone-primary)",
|
|
@@ -41,11 +54,7 @@ describe("PromotionCard", () => {
|
|
|
41
54
|
});
|
|
42
55
|
|
|
43
56
|
it("should set custom properties depending on variant", () => {
|
|
44
|
-
|
|
45
|
-
<PromotionCard {...props} variant="secondary">
|
|
46
|
-
<div />
|
|
47
|
-
</PromotionCard>
|
|
48
|
-
);
|
|
57
|
+
renderPromotionCard({ ...props, variant: "secondary" });
|
|
49
58
|
|
|
50
59
|
expect(screen.getByTestId("promotion-id")).toHaveStyle({
|
|
51
60
|
"--promotion-card-background": "var(--purpur-color-background-tone-on-tone-secondary)",
|
|
@@ -54,129 +63,85 @@ describe("PromotionCard", () => {
|
|
|
54
63
|
});
|
|
55
64
|
|
|
56
65
|
it("should render a title", () => {
|
|
57
|
-
|
|
58
|
-
<PromotionCard {...props}>
|
|
59
|
-
<div />
|
|
60
|
-
</PromotionCard>
|
|
61
|
-
);
|
|
66
|
+
renderPromotionCard(props);
|
|
62
67
|
|
|
63
68
|
expect(screen.getByText(props.title)).toBeInTheDocument();
|
|
64
69
|
});
|
|
65
70
|
|
|
66
71
|
it("should set 'h2' as default tag", () => {
|
|
67
|
-
|
|
68
|
-
<PromotionCard {...props}>
|
|
69
|
-
<div />
|
|
70
|
-
</PromotionCard>
|
|
71
|
-
);
|
|
72
|
+
renderPromotionCard(props);
|
|
72
73
|
|
|
73
74
|
expect(screen.getByText(props.title).tagName).toEqual("H2");
|
|
74
75
|
});
|
|
75
76
|
|
|
76
77
|
it("should change heading tag depending on 'titleTag' prop", () => {
|
|
77
|
-
|
|
78
|
-
<PromotionCard {...props} titleTag="h3">
|
|
79
|
-
<div />
|
|
80
|
-
</PromotionCard>
|
|
81
|
-
);
|
|
78
|
+
renderPromotionCard({ ...props, titleTag: "h3" });
|
|
82
79
|
|
|
83
80
|
expect(screen.getByText(props.title).tagName).toEqual("H3");
|
|
84
81
|
});
|
|
85
82
|
|
|
86
83
|
it("should render a badge", () => {
|
|
87
|
-
|
|
88
|
-
<PromotionCard {...props} badgeText="Campaign">
|
|
89
|
-
<div />
|
|
90
|
-
</PromotionCard>
|
|
91
|
-
);
|
|
84
|
+
renderPromotionCard({ ...props, badgeText: "Campaign" });
|
|
92
85
|
|
|
93
86
|
expect(screen.getByTestId("badgeWrapper")).toBeInTheDocument();
|
|
94
87
|
});
|
|
95
88
|
|
|
96
89
|
it("should render without badge", () => {
|
|
97
|
-
|
|
98
|
-
<PromotionCard {...props}>
|
|
99
|
-
<div />
|
|
100
|
-
</PromotionCard>
|
|
101
|
-
);
|
|
90
|
+
renderPromotionCard(props);
|
|
102
91
|
|
|
103
92
|
expect(screen.queryByTestId("badgeWrapper")).not.toBeInTheDocument();
|
|
104
93
|
});
|
|
105
94
|
|
|
106
95
|
it("should render with an image and an alt text", () => {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
>
|
|
112
|
-
<div />
|
|
113
|
-
</PromotionCard>
|
|
114
|
-
);
|
|
96
|
+
renderPromotionCard({
|
|
97
|
+
...props,
|
|
98
|
+
productImage: <img alt="nice placeholder" src="https://via.placeholder.com/150" />,
|
|
99
|
+
});
|
|
115
100
|
|
|
116
101
|
expect(screen.getByAltText("nice placeholder")).toBeInTheDocument();
|
|
117
102
|
expect(screen.getByRole("img")).toBeInTheDocument();
|
|
118
103
|
});
|
|
119
104
|
|
|
120
105
|
it("should render without image", () => {
|
|
121
|
-
|
|
122
|
-
<PromotionCard {...props}>
|
|
123
|
-
<div />
|
|
124
|
-
</PromotionCard>
|
|
125
|
-
);
|
|
106
|
+
renderPromotionCard(props);
|
|
126
107
|
|
|
127
108
|
expect(screen.queryByRole("img")).not.toBeInTheDocument();
|
|
128
109
|
});
|
|
129
110
|
|
|
130
111
|
it("should render with image gradient", () => {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
>
|
|
137
|
-
<div />
|
|
138
|
-
</PromotionCard>
|
|
139
|
-
);
|
|
112
|
+
renderPromotionCard({
|
|
113
|
+
...props,
|
|
114
|
+
decorativeImage: <img alt="fin placeholder bild" src="https://via.placeholder.com/150" />,
|
|
115
|
+
hasGradient: true,
|
|
116
|
+
});
|
|
140
117
|
|
|
141
118
|
expect(screen.getByTestId("promotion-card-gradient")).toBeInTheDocument();
|
|
142
119
|
});
|
|
143
120
|
|
|
144
121
|
it("should render without image gradient if it doesn't have an image", () => {
|
|
145
|
-
|
|
146
|
-
<PromotionCard {...props} hasGradient>
|
|
147
|
-
<div />
|
|
148
|
-
</PromotionCard>
|
|
149
|
-
);
|
|
122
|
+
renderPromotionCard(props);
|
|
150
123
|
|
|
151
124
|
expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
|
|
152
125
|
});
|
|
153
126
|
|
|
154
127
|
it("should render without image gradient if 'hasGradient' isn't set", () => {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
>
|
|
160
|
-
<div />
|
|
161
|
-
</PromotionCard>
|
|
162
|
-
);
|
|
128
|
+
renderPromotionCard({
|
|
129
|
+
...props,
|
|
130
|
+
decorativeImage: <img alt="fin placeholder bild" src="https://via.placeholder.com/150" />,
|
|
131
|
+
});
|
|
163
132
|
|
|
164
133
|
expect(screen.queryByTestId("promotion-card-gradient")).not.toBeInTheDocument();
|
|
165
134
|
});
|
|
166
135
|
|
|
167
136
|
it("should render action elements", async () => {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
>
|
|
177
|
-
<div />
|
|
178
|
-
</PromotionCard>
|
|
179
|
-
);
|
|
137
|
+
renderPromotionCard({
|
|
138
|
+
...props,
|
|
139
|
+
actions: (
|
|
140
|
+
<button type="button" data-testid="action">
|
|
141
|
+
Action
|
|
142
|
+
</button>
|
|
143
|
+
),
|
|
144
|
+
});
|
|
180
145
|
|
|
181
146
|
const actionElement = await screen.findByTestId("action");
|
|
182
147
|
expect(actionElement).toBeInTheDocument();
|
package/src/promotion-card.tsx
CHANGED
|
@@ -2,8 +2,9 @@ import React, { forwardRef, type ReactNode } from "react";
|
|
|
2
2
|
import { Badge } from "@purpurds/badge";
|
|
3
3
|
import { Card } from "@purpurds/card";
|
|
4
4
|
import type { BaseProps } from "@purpurds/common-types";
|
|
5
|
-
import { Heading, type HeadingTagType,type HeadingVariant } from "@purpurds/heading";
|
|
5
|
+
import { Heading, type HeadingTagType, type HeadingVariant } from "@purpurds/heading";
|
|
6
6
|
import { Paragraph } from "@purpurds/paragraph";
|
|
7
|
+
import { useColorScheme } from "@purpurds/theme";
|
|
7
8
|
import c from "classnames/bind";
|
|
8
9
|
|
|
9
10
|
import styles from "./promotion-card.module.scss";
|
|
@@ -26,6 +27,12 @@ const backgroundImages: StyleRecord = {
|
|
|
26
27
|
quaternary: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1125" viewBox="0 0 2000 1125" fill="none"><g clip-path="url(%23clip0_16_50)"><rect width="2000" height="1125" fill="url(%23paint0_linear_16_50)"/><rect x="-145.375" y="247.444" width="435.932" height="128.9" transform="rotate(-66.9915 -145.375 247.444)" fill="url(%23paint1_linear_16_50)"/><g filter="url(%23filter0_d_16_50)"><path d="M480.784 -336.718L483.018 -338.805C2086.53 -1722.59 2447.86 284.242 2322.13 1089.91C2196.4 1895.57 1114.05 1663.85 598.008 1169.98C188.829 778.383 94.9071 433.168 84.5809 306.459C63.8953 52.6354 248.918 -120.167 480.784 -336.718Z" fill="%23EFE5DF"/></g><g filter="url(%23filter1_d_16_50)"><path d="M478.235 -337.757L480.469 -339.844C2083.98 -1723.63 2445.31 283.203 2319.58 1088.87C2193.85 1894.53 1111.5 1662.81 595.459 1168.95C186.279 777.344 91.9002 426.514 82.0316 305.42C61.346 51.5961 246.369 -121.206 478.235 -337.757Z" fill="url(%23paint2_linear_16_50)"/></g><path d="M478.35 -359.804L480.585 -361.891C2084.1 -1745.68 2445.43 261.156 2319.7 1066.82C2193.96 1872.48 1111.61 1640.77 595.575 1146.9C186.395 755.297 91.9025 403.076 82.1473 283.373C61.4618 29.5494 246.484 -143.253 478.35 -359.804Z" fill="url(%23paint3_linear_16_50)" stroke="url(%23paint4_linear_16_50)" stroke-width="0.488281"/><g filter="url(%23filter2_d_16_50)"><path d="M895.095 -81.1636L897.087 -83.483C2339.2 -1634.76 2918.4 320.353 2881.77 1134.95C2845.14 1949.54 1743.91 1837.9 1176.83 1403.6C727.176 1059.23 595.967 726.393 571.809 601.58C523.415 351.555 688.373 159.507 895.095 -81.1636Z" fill="%23EFE5DF"/></g><g filter="url(%23filter3_d_16_50)"><path d="M892.877 -81.1463L894.869 -83.4656C2336.98 -1634.74 2916.18 320.371 2879.55 1134.96C2842.92 1949.56 1741.69 1837.92 1174.61 1403.62C724.958 1059.24 592.677 720.879 569.59 601.597C521.196 351.573 686.155 159.524 892.877 -81.1463Z" fill="url(%23paint5_linear_16_50)"/></g><path d="M899.248 -92.3297L901.24 -94.6491C2343.35 -1645.93 2922.56 309.187 2885.93 1123.78C2849.3 1938.37 1748.06 1826.74 1180.98 1392.43C731.329 1048.06 598.784 708.325 575.961 590.414C527.568 340.389 692.526 148.341 899.248 -92.3297Z" fill="url(%23paint6_linear_16_50)" stroke="url(%23paint7_linear_16_50)" stroke-width="0.488281"/></g><defs><filter id="filter0_d_16_50" x="67" y="-812.852" width="2294.05" height="2463.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="16"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.607843 0 0 0 0 0.568627 0 0 0 0 0.545098 0 0 0 0.9 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_50"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_50" result="shape"/></filter><filter id="filter1_d_16_50" x="0.450684" y="-861.891" width="2422.05" height="2591.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="32"/><feGaussianBlur stdDeviation="40"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.607843 0 0 0 0 0.568627 0 0 0 0 0.545098 0 0 0 0.5 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_50"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_50" result="shape"/></filter><filter id="filter2_d_16_50" x="547.307" y="-664.639" width="2352.09" height="2436.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="16"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.607843 0 0 0 0 0.568627 0 0 0 0 0.545098 0 0 0 0.9 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_50"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_50" result="shape"/></filter><filter id="filter3_d_16_50" x="381.088" y="-844.621" width="2680.09" height="2764.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="90"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.607843 0 0 0 0 0.568627 0 0 0 0 0.545098 0 0 0 0.55 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_50"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_50" result="shape"/></filter><linearGradient id="paint0_linear_16_50" x1="48.3398" y1="4.80196e-07" x2="58.1053" y2="1125" gradientUnits="userSpaceOnUse"><stop stop-color="%23FDF3EE"/><stop offset="0.625484" stop-color="%23F8EEE8"/><stop offset="1" stop-color="%23F0E5DF"/><stop offset="1" stop-color="%23F0E5E0"/></linearGradient><linearGradient id="paint1_linear_16_50" x1="72.5912" y1="247.444" x2="72.5912" y2="376.344" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFFEFD"/><stop offset="0.0001" stop-color="%23FFFEFD"/><stop offset="1" stop-color="%23FFFDFD" stop-opacity="0"/></linearGradient><linearGradient id="paint2_linear_16_50" x1="80.5666" y1="233.643" x2="606.544" y2="1094.45" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.265" stop-color="white"/><stop offset="0.385" stop-color="%23F5ECE6"/><stop offset="0.720829" stop-color="%23CFC4BE"/><stop offset="1" stop-color="%23C9BDB6"/></linearGradient><linearGradient id="paint3_linear_16_50" x1="138.672" y1="41.2598" x2="702.487" y2="1106.9" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFFAF8"/><stop offset="0.19574" stop-color="%23FEF5EF"/><stop offset="1" stop-color="%23E8DED8"/></linearGradient><linearGradient id="paint4_linear_16_50" x1="163.5" y1="527.148" x2="390.5" y2="902.648" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.0001" stop-color="white"/><stop offset="1" stop-color="%23E5DBD5"/></linearGradient><linearGradient id="paint5_linear_16_50" x1="560.263" y1="530.414" x2="910.742" y2="1118.56" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.340552" stop-color="%23FCF2EC"/><stop offset="0.616738" stop-color="%23D8CEC8"/><stop offset="1" stop-color="%23ACA19C"/></linearGradient><linearGradient id="paint6_linear_16_50" x1="781.494" y1="72.6501" x2="2048.67" y2="1066.94" gradientUnits="userSpaceOnUse"><stop stop-color="%23F8EEE8"/><stop offset="0.51248" stop-color="%23E8DED8"/><stop offset="1" stop-color="%23DDD3CE"/></linearGradient><linearGradient id="paint7_linear_16_50" x1="580.804" y1="451.174" x2="906.975" y2="1110.35" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.0001" stop-color="white"/><stop offset="1" stop-color="%23E5DBD5"/></linearGradient><clipPath id="clip0_16_50"><rect width="2000" height="1125" fill="white"/></clipPath></defs></svg>')`,
|
|
27
28
|
} as const;
|
|
28
29
|
|
|
30
|
+
const backgroundImagesDark: StyleRecord = {
|
|
31
|
+
primary: backgroundImages.secondary,
|
|
32
|
+
secondary: backgroundImages.primary,
|
|
33
|
+
quaternary: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1125" viewBox="0 0 2000 1125" fill="none"><g clip-path="url(%23clip0_24984_14652)"><rect width="2000" height="1125" fill="url(%23paint0_linear_24984_14652)"/><g filter="url(%23filter0_d_24984_14652)"><path d="M480.784 -336.718L483.018 -338.805C2086.53 -1722.59 2447.86 284.242 2322.13 1089.91C2196.4 1895.57 1114.05 1663.85 598.008 1169.98C188.829 778.383 94.9071 433.168 84.5808 306.459C63.8953 52.6354 248.918 -120.167 480.784 -336.718Z" fill="%23FFF0E5"/></g><g filter="url(%23filter1_d_24984_14652)"><path d="M478.235 -337.757L480.469 -339.844C2083.98 -1723.63 2445.31 283.203 2319.58 1088.87C2193.85 1894.53 1111.5 1662.81 595.459 1168.95C186.28 777.344 91.9004 426.514 82.0318 305.42C61.3462 51.596 246.369 -121.206 478.235 -337.757Z" fill="url(%23paint1_linear_24984_14652)"/></g><path d="M478.351 -359.804L480.585 -361.891C2084.1 -1745.68 2445.43 261.156 2319.7 1066.82C2193.96 1872.48 1111.61 1640.77 595.575 1146.9C186.396 755.297 91.9029 403.076 82.1476 283.373C61.4621 29.5494 246.485 -143.253 478.351 -359.804Z" fill="url(%23paint2_linear_24984_14652)" stroke="url(%23paint3_linear_24984_14652)" stroke-width="0.488281"/><g filter="url(%23filter2_d_24984_14652)"><path d="M895.095 -81.1636L897.087 -83.483C2339.19 -1634.76 2918.4 320.353 2881.77 1134.95C2845.14 1949.54 1743.91 1837.9 1176.83 1403.6C727.176 1059.23 595.967 726.393 571.808 601.58C523.415 351.555 688.373 159.507 895.095 -81.1636Z" fill="%23FFF0E5"/></g><g filter="url(%23filter3_d_24984_14652)"><path d="M892.877 -81.1462L894.869 -83.4656C2336.98 -1634.74 2916.18 320.371 2879.55 1134.96C2842.92 1949.56 1741.69 1837.92 1174.61 1403.62C724.958 1059.24 592.677 720.879 569.59 601.598C521.196 351.573 686.155 159.524 892.877 -81.1462Z" fill="url(%23paint4_linear_24984_14652)"/></g><path d="M899.248 -92.33L901.24 -94.6492C2343.35 -1645.93 2922.56 309.187 2885.93 1123.78C2849.3 1938.37 1748.06 1826.74 1180.98 1392.43C731.329 1048.06 598.784 708.325 575.961 590.414C527.568 340.389 692.526 148.34 899.248 -92.33Z" fill="url(%23paint5_linear_24984_14652)" stroke="url(%23paint6_linear_24984_14652)" stroke-width="0.488281"/></g><defs><filter id="filter0_d_24984_14652" x="67" y="-812.852" width="2294.05" height="2463.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="16"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0750588 0 0 0 0 0.0633255 0 0 0 0 0.0543529 0 0 0 0.95 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24984_14652"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24984_14652" result="shape"/></filter><filter id="filter1_d_24984_14652" x="-69.5491" y="-947.891" width="2562.05" height="2731.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="16"/><feGaussianBlur stdDeviation="75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0750588 0 0 0 0 0.0633255 0 0 0 0 0.0543529 0 0 0 0.6 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24984_14652"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24984_14652" result="shape"/></filter><filter id="filter2_d_24984_14652" x="547.307" y="-664.639" width="2352.09" height="2436.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="16"/><feGaussianBlur stdDeviation="8"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0750588 0 0 0 0 0.0633255 0 0 0 0 0.0543529 0 0 0 0.95 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24984_14652"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24984_14652" result="shape"/></filter><filter id="filter3_d_24984_14652" x="361.088" y="-864.621" width="2720.09" height="2804.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="100"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0750588 0 0 0 0 0.0633255 0 0 0 0 0.0543529 0 0 0 0.65 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24984_14652"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_24984_14652" result="shape"/></filter><linearGradient id="paint0_linear_24984_14652" x1="48.3398" y1="4.80196e-07" x2="58.1053" y2="1125" gradientUnits="userSpaceOnUse"><stop stop-color="%232C2520"/><stop offset="0.576094" stop-color="%2329221D"/><stop offset="1" stop-color="%2327211C"/></linearGradient><linearGradient id="paint1_linear_24984_14652" x1="80.5668" y1="233.643" x2="606.544" y2="1094.45" gradientUnits="userSpaceOnUse"><stop stop-color="%2340362E"/><stop offset="0.265" stop-color="%23372E27"/><stop offset="0.385" stop-color="%232D2621"/><stop offset="0.720829" stop-color="%231E1916"/><stop offset="1" stop-color="%23161310"/></linearGradient><linearGradient id="paint2_linear_24984_14652" x1="138.672" y1="41.2598" x2="702.488" y2="1106.9" gradientUnits="userSpaceOnUse"><stop stop-color="%232F2822"/><stop offset="0.19574" stop-color="%232C2520"/><stop offset="1" stop-color="%23221D19"/></linearGradient><linearGradient id="paint3_linear_24984_14652" x1="133.5" y1="60.5" x2="546" y2="1048" gradientUnits="userSpaceOnUse"><stop stop-color="%23887363"/><stop offset="0.506509" stop-color="%233E342D"/><stop offset="1" stop-color="%23251F1A"/></linearGradient><linearGradient id="paint4_linear_24984_14652" x1="560.263" y1="530.414" x2="910.742" y2="1118.56" gradientUnits="userSpaceOnUse"><stop stop-color="%233B312A"/><stop offset="0.340552" stop-color="%232D2621"/><stop offset="0.616738" stop-color="%231F1A17"/><stop offset="1" stop-color="%23161310"/></linearGradient><linearGradient id="paint5_linear_24984_14652" x1="781.493" y1="72.65" x2="2048.67" y2="1066.94" gradientUnits="userSpaceOnUse"><stop stop-color="%232F2822"/><stop offset="0.51248" stop-color="%2326201C"/><stop offset="1" stop-color="%23201B17"/></linearGradient><linearGradient id="paint6_linear_24984_14652" x1="820.5" y1="32.5" x2="906.975" y2="1110.35" gradientUnits="userSpaceOnUse"><stop stop-color="%23645549"/><stop offset="0.425" stop-color="%23594B41"/><stop offset="1" stop-color="%23221C18"/></linearGradient><clipPath id="clip0_24984_14652"><rect width="2000" height="1125" fill="white"/></clipPath></defs></svg>')`,
|
|
34
|
+
} as const;
|
|
35
|
+
|
|
29
36
|
const colors: StyleRecord = {
|
|
30
37
|
primary: "var(--purpur-color-text-tone-on-tone-primary)",
|
|
31
38
|
secondary: "var(--purpur-color-text-tone-on-tone-secondary)",
|
|
@@ -73,6 +80,7 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
|
|
|
73
80
|
},
|
|
74
81
|
ref
|
|
75
82
|
) => {
|
|
83
|
+
const [colorScheme] = useColorScheme();
|
|
76
84
|
let rest = props;
|
|
77
85
|
let image;
|
|
78
86
|
let showGradient;
|
|
@@ -96,22 +104,30 @@ export const PromotionCard = forwardRef<HTMLDivElement, PromotionCardProps>(
|
|
|
96
104
|
const customProperties = {
|
|
97
105
|
"--promotion-card-background": backgrounds[variant],
|
|
98
106
|
"--promotion-card-color": colors[variant],
|
|
99
|
-
"--promotion-card-background-image":
|
|
107
|
+
"--promotion-card-background-image": image
|
|
108
|
+
? "none"
|
|
109
|
+
: colorScheme === "dark"
|
|
110
|
+
? backgroundImagesDark[variant]
|
|
111
|
+
: backgroundImages[variant],
|
|
100
112
|
} as React.CSSProperties;
|
|
101
113
|
|
|
102
114
|
return (
|
|
103
|
-
<Card
|
|
115
|
+
<Card
|
|
116
|
+
data-testid={dataTestid}
|
|
117
|
+
ref={ref}
|
|
118
|
+
fullHeight
|
|
119
|
+
className={cx(className, rootClassName, `${rootClassName}--${variant}`)}
|
|
120
|
+
style={{
|
|
121
|
+
...customProperties,
|
|
122
|
+
...style,
|
|
123
|
+
}}
|
|
124
|
+
{...rest}
|
|
125
|
+
>
|
|
104
126
|
<div
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
...style,
|
|
109
|
-
}}
|
|
110
|
-
className={cx(className, rootClassName, `${rootClassName}--${variant}`, {
|
|
111
|
-
[`${rootClassName}--with-image`]: image,
|
|
112
|
-
[`${rootClassName}--without-image`]: !image,
|
|
127
|
+
className={cx(`${rootClassName}__inner`, {
|
|
128
|
+
[`${rootClassName}__inner--with-image`]: image,
|
|
129
|
+
[`${rootClassName}__inner--without-image`]: !image,
|
|
113
130
|
})}
|
|
114
|
-
{...rest}
|
|
115
131
|
>
|
|
116
132
|
<div
|
|
117
133
|
className={cx(`${rootClassName}__content`, {
|