@purpurds/promotion-card 5.21.0 → 5.22.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 +5 -5
- package/dist/promotion-card.cjs.js +15 -15
- package/dist/promotion-card.cjs.js.map +1 -1
- package/dist/promotion-card.d.ts +30 -5
- package/dist/promotion-card.d.ts.map +1 -1
- package/dist/promotion-card.es.js +418 -418
- 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 +2 -2
- package/src/promotion-card.tsx +27 -17
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-promotion-
|
|
1
|
+
._purpur-promotion-card_12rh3_1{position:relative;width:100%;height:100%;color:var(--promotion-card-color);box-sizing:border-box}._purpur-promotion-card--without-image_12rh3_8 ._purpur-promotion-card__content_12rh3_8{position:relative;z-index:1}._purpur-promotion-card--without-image_12rh3_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_12rh3_8:before{background-position:center center}}@container promotion-card (min-width: 1024px){._purpur-promotion-card--without-image_12rh3_8:before{transform:rotateY(0)}}._purpur-promotion-card--with-image_12rh3_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_12rh3_33{grid-template-areas:"body image";grid-template-columns:repeat(2,1fr)}}._purpur-promotion-card__card_12rh3_45{container:promotion-card/inline-size;height:100%}._purpur-promotion-card__image-gradient_12rh3_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_12rh3_49{left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,var(--promotion-card-background),transparent 75%)}}._purpur-promotion-card__actions_12rh3_65{display:flex;flex-wrap:wrap;gap:var(--purpur-spacing-200);padding-top:var(--purpur-spacing-400)}._purpur-promotion-card__content_12rh3_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_12rh3_81{padding:var(--purpur-spacing-600)}._purpur-promotion-card__content--without-image_12rh3_81 ._purpur-promotion-card__main-content_12rh3_84{display:flex;gap:var(--purpur-spacing-300)}._purpur-promotion-card__content--without-image_12rh3_81 ._purpur-promotion-card__heading_12rh3_88{width:100%}}@container promotion-card (min-width: 600px){._purpur-promotion-card__content--with-image_12rh3_93{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_12rh3_93{padding:var(--purpur-spacing-1200) var(--purpur-spacing-600)}}._purpur-promotion-card__badge-wrapper_12rh3_104{width:100%;padding-bottom:var(--purpur-spacing-200)}._purpur-promotion-card__heading_12rh3_88,._purpur-promotion-card__body_12rh3_108{width:100%}._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__heading_12rh3_88{margin-bottom:var(--purpur-spacing-150);color:var(--promotion-card-color)}._purpur-promotion-card__main-content_12rh3_84,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108{display:flex;flex-direction:column;flex-grow:1}._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 p,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h1,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h2,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h3,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h4,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h5,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 h6,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 ul,._purpur-promotion-card_12rh3_1 ._purpur-promotion-card__body_12rh3_108 ol{color:var(--promotion-card-color)}._purpur-promotion-card__child-content_12rh3_137{flex-grow:1}._purpur-promotion-card__image-wrapper_12rh3_140{grid-area:image}._purpur-promotion-card__image-wrapper--decorative_12rh3_143 picture,._purpur-promotion-card__image-wrapper--decorative_12rh3_143 img,._purpur-promotion-card__image-wrapper--product_12rh3_144 picture,._purpur-promotion-card__image-wrapper--product_12rh3_144 img{display:block;width:100%;height:auto}._purpur-promotion-card__image-wrapper--decorative_12rh3_143 img,._purpur-promotion-card__image-wrapper--product_12rh3_144 img{object-fit:cover}._purpur-promotion-card__image-wrapper--decorative_12rh3_143{position:relative;width:100%;aspect-ratio:3/2}@container promotion-card (min-width: 600px){._purpur-promotion-card__image-wrapper--decorative_12rh3_143{aspect-ratio:unset}._purpur-promotion-card__image-wrapper--decorative_12rh3_143 img{height:100%}}._purpur-promotion-card__image-wrapper--product_12rh3_144{display:flex;justify-content:center;align-items:center;padding:var(--purpur-spacing-400)}._purpur-promotion-card_12rh3_1 [class*=_purpur-cta-link_],._purpur-promotion-card_12rh3_1 [class*=_purpur-button_]{width:100%}@container promotion-card (min-width: 600px){._purpur-promotion-card_12rh3_1 [class*=_purpur-cta-link_],._purpur-promotion-card_12rh3_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.22.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,13 @@
|
|
|
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/icon": "5.
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/badge": "5.22.0",
|
|
20
|
+
"@purpurds/card": "5.22.0",
|
|
21
|
+
"@purpurds/heading": "5.22.0",
|
|
22
|
+
"@purpurds/cta-link": "5.22.0",
|
|
23
|
+
"@purpurds/icon": "5.22.0",
|
|
24
|
+
"@purpurds/tokens": "5.22.0",
|
|
25
|
+
"@purpurds/button": "5.22.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
"vite": "5.4.8",
|
|
48
48
|
"vitest": "^2.1.2",
|
|
49
49
|
"@purpurds/component-rig": "1.0.0",
|
|
50
|
-
"@purpurds/paragraph": "5.
|
|
51
|
-
"@purpurds/text-spacing": "5.
|
|
52
|
-
"@purpurds/grid": "5.
|
|
50
|
+
"@purpurds/paragraph": "5.22.0",
|
|
51
|
+
"@purpurds/text-spacing": "5.22.0",
|
|
52
|
+
"@purpurds/grid": "5.22.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build:dev": "vite",
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
width: 100%;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
&__heading {
|
|
125
|
+
& &__heading {
|
|
126
126
|
margin-bottom: var(--purpur-spacing-150);
|
|
127
127
|
color: var(--promotion-card-color);
|
|
128
128
|
}
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
flex-grow: 1;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
&__body {
|
|
136
|
+
& &__body {
|
|
137
137
|
display: flex;
|
|
138
138
|
flex-direction: column;
|
|
139
139
|
flex-grow: 1;
|
package/src/promotion-card.tsx
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, {
|
|
2
|
+
DetailedHTMLProps,
|
|
3
|
+
ForwardedRef,
|
|
4
|
+
forwardRef,
|
|
5
|
+
HTMLAttributes,
|
|
6
|
+
ReactNode,
|
|
7
|
+
} from "react";
|
|
2
8
|
import { Badge } from "@purpurds/badge";
|
|
3
9
|
import { Button } from "@purpurds/button";
|
|
4
10
|
import { Card } from "@purpurds/card";
|
|
@@ -55,21 +61,24 @@ export type PromotionCardProps = {
|
|
|
55
61
|
const cx = c.bind(styles);
|
|
56
62
|
const rootClassName = "purpur-promotion-card";
|
|
57
63
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
const PromotionCardComponent = (
|
|
65
|
+
{
|
|
66
|
+
["data-testid"]: dataTestid,
|
|
67
|
+
variant = "primary",
|
|
68
|
+
badgeText,
|
|
69
|
+
badgeIcon,
|
|
70
|
+
title,
|
|
71
|
+
titleTag = "h2",
|
|
72
|
+
titleVariant = "title-300",
|
|
73
|
+
enableTitleHyphenation = true,
|
|
74
|
+
className,
|
|
75
|
+
actions,
|
|
76
|
+
children,
|
|
77
|
+
style,
|
|
78
|
+
...props
|
|
79
|
+
}: PromotionCardProps & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
80
|
+
ref: ForwardedRef<HTMLDivElement>
|
|
81
|
+
) => {
|
|
73
82
|
let rest = props;
|
|
74
83
|
let image;
|
|
75
84
|
let showGradient;
|
|
@@ -97,7 +106,7 @@ export const PromotionCard = ({
|
|
|
97
106
|
} as React.CSSProperties;
|
|
98
107
|
|
|
99
108
|
return (
|
|
100
|
-
<Card className={cx(`${rootClassName}__card`)}>
|
|
109
|
+
<Card ref={ref} className={cx(`${rootClassName}__card`)}>
|
|
101
110
|
<div
|
|
102
111
|
data-testid={dataTestid}
|
|
103
112
|
style={{
|
|
@@ -197,4 +206,5 @@ export const PromotionCard = ({
|
|
|
197
206
|
);
|
|
198
207
|
};
|
|
199
208
|
|
|
209
|
+
export const PromotionCard = forwardRef(PromotionCardComponent);
|
|
200
210
|
PromotionCard.displayName = "PromotionCard";
|