@universityofmaryland/web-elements-library 1.4.1 → 1.4.2
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/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -104,7 +104,7 @@ const createTextLockupMedium = (props) => medium({
|
|
|
104
104
|
compositeStats: createCompositeStat(props)
|
|
105
105
|
});
|
|
106
106
|
const createAssetContent = (props) => {
|
|
107
|
-
const { dateSign, image, video, isImageScaled } = props;
|
|
107
|
+
const { dateSign, image, video, isImageScaled = true } = props;
|
|
108
108
|
const children = [];
|
|
109
109
|
if (video) {
|
|
110
110
|
children.push(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,0BAA0B,CAAC;AAAA,EAAA,UACtCA;AAAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,QAAM,iBAAiBA,YAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAACA,WAAU,QAAO;AAEtB,QAAM,gBAAgB;AAAA,IACpB,CAAC,eAAeC,kBAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAC1D,GAAI,uBAAuB;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAGF,SAAOC,qBAAkC;AAAA,IACvC,SAASF;AAAAA,IACT,aAAa,eAAe;AAAA,IAC5B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAOC,kBAAO,MAAM,MAAM;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,MAEL,cAAc;AAAA,QACZ,WAAWA,kBAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,EACF,CACD;AACH;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,MAA6C;AAC3C,QAAM,aAAa;AAEnB,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,cAAcE,MAAAA,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAWF,kBAAO,MAAM,QAAQ;AAAA,QAEhC,CAAC,yBAAyB,GAAG;AAAA,UAC3B,SAAS;AAAA,UACT,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGrC,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAChC,YAAYA,kBAAO,MAAM,QAAQ;AAAA,UACjC,WAAW,aAAaA,kBAAO,MAAM,MAAM,KAAK,KAAK;AAAA,QAAA;AAAA,QAGvD,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,WAAWA,kBAAO,MAAM,QAAQ,KAAK;AAAA,UAErC,CAAC,yBAAyB,GAAG;AAAA,YAC3B,SAAS,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,YACnC,qBAAqB;AAAA,UAAA;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,cAAY,QAAQ,YAAY,MAAM;AAEtC,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,UAaAG,OAAyB;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,MAAM;AAAA,EACd,mBAAmB,wBAAwB,KAAK;AAAA,EAChD,gBAAgB,oBAAoB,KAAK;AAC3C,CAAC;AAEI,MAAM,qBAAqB,CAChC,UAIG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,
|
|
1
|
+
{"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["headline","Styles","ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
|
|
@@ -85,7 +85,7 @@ const createTextLockupMedium = (props) => medium({
|
|
|
85
85
|
compositeStats: createCompositeStat(props)
|
|
86
86
|
});
|
|
87
87
|
const createAssetContent = (props) => {
|
|
88
|
-
const { dateSign, image, video, isImageScaled } = props;
|
|
88
|
+
const { dateSign, image, video, isImageScaled = true } = props;
|
|
89
89
|
const children = [];
|
|
90
90
|
if (video) {
|
|
91
91
|
children.push(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":";;;;;;;;;;;;;;;;AAKO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAGM;AACJ,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,gBAAgB;AAAA,IACpB,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAC1D,GAAI,uBAAuB;AAAA,QACzB,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF;AAGF,SAAOA,YAAkC;AAAA,IACvC,SAAS;AAAA,IACT,aAAa,eAAe;AAAA,IAC5B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,OAAO,OAAO,MAAM,MAAM;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,MAEL,cAAc;AAAA,QACZ,WAAW,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,EACF,CACD;AACH;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,MAA6C;AAC3C,QAAM,aAAa;AAEnB,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,cAAcC,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW,OAAO,MAAM,QAAQ;AAAA,QAEhC,CAAC,yBAAyB,GAAG;AAAA,UAC3B,SAAS;AAAA,UACT,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAGrC,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,WAAW,OAAO,MAAM,QAAQ;AAAA,UAChC,YAAY,OAAO,MAAM,QAAQ;AAAA,UACjC,WAAW,aAAa,OAAO,MAAM,MAAM,KAAK,KAAK;AAAA,QAAA;AAAA,QAGvD,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,WAAW,OAAO,MAAM,QAAQ,KAAK;AAAA,UAErC,CAAC,yBAAyB,GAAG;AAAA,YAC3B,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,YACnC,qBAAqB;AAAA,UAAA;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,cAAY,QAAQ,YAAY,MAAM;AAEtC,SAAO;AACT;AAEO,MAAM,yBAAyB,CACpC,UAaAC,OAAyB;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,MAAM;AAAA,EACd,mBAAmB,wBAAwB,KAAK;AAAA,EAChD,gBAAgB,oBAAoB,KAAK;AAC3C,CAAC;AAEI,MAAM,qBAAqB,CAChC,UAIG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,
|
|
1
|
+
{"version":3,"file":"_common.mjs","sources":["../../../source/composite/pathway/_common.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n headline,\n isThemeDark,\n isThemeMaryland,\n}: Pick<\n PathwayTextLockupProps,\n 'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n const characterCount = headline?.textContent?.trim().length || 0;\n const isOverwriteHeadline = characterCount > 30;\n\n if (!headline) return null;\n\n const desktopStyles = {\n [`@container (${Styles.token.media.queries.desktop.min})`]: {\n ...(isOverwriteHeadline && {\n fontSize: '40px',\n }),\n },\n };\n\n return ElementModel.headline.sansLargest({\n element: headline,\n isThemeDark: isThemeDark || isThemeMaryland,\n elementStyles: {\n element: {\n fontWeight: 800,\n textTransform: 'uppercase',\n textWrap: 'balance',\n color: Styles.token.color.black,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: Styles.token.spacing.md,\n },\n },\n });\n};\n\nexport const createCompositeStat = ({\n stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n const mediumSize = 800;\n\n if (!stats) return null;\n\n const statWrapper = ElementModel.createDiv({\n className: 'text-lockup-medium-stats',\n elementStyles: {\n element: {\n marginTop: Styles.token.spacing.lg,\n\n [`&:has(> *:nth-child(2))`]: {\n display: `grid`,\n gridGap: `${Styles.token.spacing.md}`,\n },\n\n [`@container (max-width: ${mediumSize - 1}px)`]: {\n marginTop: Styles.token.spacing.lg,\n paddingTop: Styles.token.spacing.md,\n borderTop: `1px solid ${Styles.token.color.gray.light}`,\n },\n\n [`@container (min-width: ${mediumSize}px)`]: {\n marginTop: Styles.token.spacing['2xl'],\n\n [`&:has(> *:nth-child(2))`]: {\n gridGap: `${Styles.token.spacing.lg}`,\n gridTemplateColumns: `repeat(2, 1fr)`,\n },\n },\n },\n },\n });\n\n statWrapper.element.innerHTML = stats.innerHTML;\n\n return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n props: Pick<\n PathwayTextLockupProps,\n | 'stats'\n | 'actions'\n | 'eventDetails'\n | 'eyebrow'\n | 'headline'\n | 'stats'\n | 'text'\n | 'isThemeDark'\n | 'isThemeMaryland'\n >,\n) =>\n Atomic.textLockup.medium({\n ...props,\n ribbon: props.eyebrow,\n compositeHeadline: createCompositeHeadline(props),\n compositeStats: createCompositeStat(props),\n });\n\nexport const createAssetContent = (\n props: Pick<\n PathwayAssetProps,\n 'dateSign' | 'image' | 'video' | 'isImageScaled'\n >,\n) => {\n const { dateSign, image, video, isImageScaled = true } = props;\n const children = [];\n\n if (video) {\n children.push(\n Atomic.assets.video.observedAutoPlay({\n video,\n isScaled: isImageScaled,\n additionalElementStyles: {\n [`& video`]: {\n objectFit: 'cover',\n width: '100%',\n height: '100%',\n },\n },\n }),\n );\n }\n\n if (!video && image) {\n children.push(\n Atomic.assets.image.background({\n element: image,\n isScaled: isImageScaled,\n isShowCaption: true,\n isGifAllowed: true,\n dateSign,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-image-container-wrapper',\n children,\n elementStyles: {\n element: {\n position: 'relative',\n overflow: 'hidden',\n height: '100%',\n width: '100%',\n display: 'grid',\n\n [`&:has(.image-container)`]: {\n alignItems: 'center',\n },\n },\n },\n });\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.createDiv","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
|