@phillips/seldon 1.264.0 → 1.265.1
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/components/ExitGateCard/ExitGateCard.cjs +1 -1
- package/dist/components/ExitGateCard/ExitGateCard.d.ts +5 -0
- package/dist/components/ExitGateCard/ExitGateCard.js +30 -22
- package/dist/scss/components/Accordion/_accordion.scss +6 -21
- package/dist/scss/components/Card/_card.scss +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),$=require("../../_virtual/index.cjs"),v=require("react"),y=require("../../utils/index.cjs"),b=require("../Button/Button.cjs"),C=require("../Button/types.cjs");require("../Link/types.cjs");const E=require("../Link/Link.cjs"),G=require("../SeldonImage/SeldonImage.cjs"),d=require("../Text/types.cjs"),a=require("../Text/Text.cjs"),m=v.forwardRef(({className:x,imageSrc:s,label:n,header:r,description:l,linkLabel:i,linkHref:c,linkElement:o=E.default,variant:_=C.ButtonVariants.secondary,altText:f="Exit Gate Card Image",imageSrcSet:j,imageSizes:q,imageLoading:N,imageFetchPriority:h,...u},g)=>{const{className:t,...p}=y.getCommonProps(u,"ExitGateCard");return e.jsxs("article",{...p,className:$.default(t,x),...u,ref:g,children:[s?e.jsx(G.default,{objectFit:"cover",aspectRatio:"16/9",src:s,alt:f,srcSet:j,sizes:q,loading:N,fetchPriority:h,className:`${t}__desktop_image`}):null,e.jsxs("div",{className:`${t}__content`,children:[n?e.jsx(a.default,{variant:d.TextVariants.labelMedium,element:"span",className:`${t}__content-label`,children:n}):null,r?e.jsx(a.default,{variant:d.TextVariants.headingLarge,element:"span",className:`${t}__content-title`,children:r}):null,l?e.jsx(a.default,{element:"span",className:`${t}__content-description`,children:l}):null,(i||o)&&c?e.jsx(o,{href:c,children:e.jsx(b.default,{variant:_,tabIndex:-1,className:`${t}__content-link`,children:i})}):null]})]})});m.displayName="ExitGateCard";exports.default=m;
|
|
@@ -5,6 +5,11 @@ export interface ExitGateCardProps extends ComponentProps<'div'> {
|
|
|
5
5
|
* Image src to display at the right side of the article.
|
|
6
6
|
*/
|
|
7
7
|
imageSrc?: string;
|
|
8
|
+
/** Responsive image attributes forwarded to `SeldonImage` (`srcSet`, `sizes`, `loading`, `fetchPriority`). */
|
|
9
|
+
imageSrcSet?: string;
|
|
10
|
+
imageSizes?: string;
|
|
11
|
+
imageLoading?: ComponentProps<'img'>['loading'];
|
|
12
|
+
imageFetchPriority?: ComponentProps<'img'>['fetchPriority'];
|
|
8
13
|
/**
|
|
9
14
|
* Top label for the article.
|
|
10
15
|
*/
|
|
@@ -1,50 +1,58 @@
|
|
|
1
1
|
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { getCommonProps as
|
|
5
|
-
import
|
|
6
|
-
import { ButtonVariants as
|
|
2
|
+
import E from "../../_virtual/index.js";
|
|
3
|
+
import { forwardRef as v } from "react";
|
|
4
|
+
import { getCommonProps as G } from "../../utils/index.js";
|
|
5
|
+
import b from "../Button/Button.js";
|
|
6
|
+
import { ButtonVariants as j } from "../Button/types.js";
|
|
7
7
|
import "../Link/types.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
8
|
+
import y from "../Link/Link.js";
|
|
9
|
+
import I from "../SeldonImage/SeldonImage.js";
|
|
10
10
|
import { TextVariants as p } from "../Text/types.js";
|
|
11
11
|
import a from "../Text/Text.js";
|
|
12
|
-
const
|
|
12
|
+
const P = v(
|
|
13
13
|
({
|
|
14
14
|
className: f,
|
|
15
15
|
imageSrc: r,
|
|
16
16
|
label: n,
|
|
17
|
-
header:
|
|
18
|
-
description:
|
|
17
|
+
header: o,
|
|
18
|
+
description: m,
|
|
19
19
|
linkLabel: s,
|
|
20
|
-
linkHref:
|
|
21
|
-
linkElement:
|
|
22
|
-
variant: _ =
|
|
20
|
+
linkHref: i,
|
|
21
|
+
linkElement: l = y,
|
|
22
|
+
variant: _ = j.secondary,
|
|
23
23
|
altText: u = "Exit Gate Card Image",
|
|
24
|
+
imageSrcSet: x,
|
|
25
|
+
imageSizes: N,
|
|
26
|
+
imageLoading: h,
|
|
27
|
+
imageFetchPriority: g,
|
|
24
28
|
...c
|
|
25
|
-
},
|
|
26
|
-
const { className: t, ...
|
|
27
|
-
return /* @__PURE__ */ d("article", { ...
|
|
29
|
+
}, $) => {
|
|
30
|
+
const { className: t, ...C } = G(c, "ExitGateCard");
|
|
31
|
+
return /* @__PURE__ */ d("article", { ...C, className: E(t, f), ...c, ref: $, children: [
|
|
28
32
|
r ? /* @__PURE__ */ e(
|
|
29
|
-
|
|
33
|
+
I,
|
|
30
34
|
{
|
|
31
35
|
objectFit: "cover",
|
|
32
36
|
aspectRatio: "16/9",
|
|
33
37
|
src: r,
|
|
34
38
|
alt: u,
|
|
39
|
+
srcSet: x,
|
|
40
|
+
sizes: N,
|
|
41
|
+
loading: h,
|
|
42
|
+
fetchPriority: g,
|
|
35
43
|
className: `${t}__desktop_image`
|
|
36
44
|
}
|
|
37
45
|
) : null,
|
|
38
46
|
/* @__PURE__ */ d("div", { className: `${t}__content`, children: [
|
|
39
47
|
n ? /* @__PURE__ */ e(a, { variant: p.labelMedium, element: "span", className: `${t}__content-label`, children: n }) : null,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
(s ||
|
|
48
|
+
o ? /* @__PURE__ */ e(a, { variant: p.headingLarge, element: "span", className: `${t}__content-title`, children: o }) : null,
|
|
49
|
+
m ? /* @__PURE__ */ e(a, { element: "span", className: `${t}__content-description`, children: m }) : null,
|
|
50
|
+
(s || l) && i ? /* @__PURE__ */ e(l, { href: i, children: /* @__PURE__ */ e(b, { variant: _, tabIndex: -1, className: `${t}__content-link`, children: s }) }) : null
|
|
43
51
|
] })
|
|
44
52
|
] });
|
|
45
53
|
}
|
|
46
54
|
);
|
|
47
|
-
|
|
55
|
+
P.displayName = "ExitGateCard";
|
|
48
56
|
export {
|
|
49
|
-
|
|
57
|
+
P as default
|
|
50
58
|
};
|
|
@@ -16,38 +16,28 @@
|
|
|
16
16
|
border-bottom: 1px solid $light-gray;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
&
|
|
19
|
+
&__content {
|
|
20
20
|
display: block;
|
|
21
|
-
height: auto;
|
|
22
|
-
padding-bottom: $spacing-sm;
|
|
23
|
-
}
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
.radix-accordion-content {
|
|
23
|
+
padding-bottom: $spacing-sm;
|
|
24
|
+
}
|
|
27
25
|
|
|
28
26
|
&--locked {
|
|
29
27
|
padding-bottom: $spacing-sm;
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
30
|
|
|
33
|
-
&--transition[data-state='open'] {
|
|
34
|
-
animation: slide-down var(--seldon-accordion-transition-time) ease-in-out;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&--transition[data-state='closed'] {
|
|
38
|
-
animation: slide-up var(--seldon-accordion-transition-time) ease-in-out;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
31
|
&--transition {
|
|
42
32
|
overflow: hidden;
|
|
43
33
|
}
|
|
44
34
|
|
|
45
35
|
&--transition[data-state='open'] {
|
|
46
|
-
animation: slide-down var(--seldon-accordion-transition-time) ease-
|
|
36
|
+
animation: slide-down var(--seldon-accordion-transition-time) ease-out;
|
|
47
37
|
}
|
|
48
38
|
|
|
49
39
|
&--transition[data-state='closed'] {
|
|
50
|
-
animation: slide-up var(--seldon-accordion-transition-time) ease-
|
|
40
|
+
animation: slide-up var(--seldon-accordion-transition-time) ease-out forwards;
|
|
51
41
|
}
|
|
52
42
|
|
|
53
43
|
&[data-state='open'] {
|
|
@@ -73,25 +63,20 @@
|
|
|
73
63
|
@keyframes slide-down {
|
|
74
64
|
from {
|
|
75
65
|
height: 0;
|
|
76
|
-
opacity: 0;
|
|
77
66
|
}
|
|
78
67
|
|
|
79
68
|
to {
|
|
80
69
|
height: var(--radix-accordion-content-height);
|
|
81
|
-
opacity: 1;
|
|
82
70
|
}
|
|
83
71
|
}
|
|
84
72
|
|
|
85
73
|
@keyframes slide-up {
|
|
86
74
|
from {
|
|
87
75
|
height: var(--radix-accordion-content-height);
|
|
88
|
-
opacity: 1;
|
|
89
76
|
}
|
|
90
77
|
|
|
91
78
|
to {
|
|
92
79
|
height: 0;
|
|
93
|
-
opacity: 0;
|
|
94
|
-
padding: 0;
|
|
95
80
|
}
|
|
96
81
|
}
|
|
97
82
|
}
|