@universityofmaryland/web-elements-library 1.4.3 → 1.4.4
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
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;yBA+Re,OAAO,gBAAgB;;;;;AAAvC,wBAgBE"}
|
|
@@ -114,8 +114,7 @@ const createAssetColumn = ({
|
|
|
114
114
|
overflow: "hidden",
|
|
115
115
|
position: "relative",
|
|
116
116
|
[`@container (max-width: ${BREAK_SMALL}px)`]: {
|
|
117
|
-
aspectRatio: "16 / 9"
|
|
118
|
-
maxHeight: "50vh"
|
|
117
|
+
aspectRatio: "16 / 9"
|
|
119
118
|
},
|
|
120
119
|
[`@container (min-width: ${BREAK_MEDIUM}px)`]: {
|
|
121
120
|
width: "50%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../_types';\n\ninterface PathwayHeroProps {\n actions: HTMLElement | null;\n eyebrow: HTMLElement | null;\n headline: HTMLElement | null;\n image: HTMLImageElement | null;\n includesAnimation?: boolean;\n isImagePositionLeft?: boolean;\n isThemeDark?: boolean;\n text: HTMLElement | null;\n video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n RESIZE: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n SLIDE_UP: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n @keyframes pathway-hero-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFramePathwaySlideUp = `\n @keyframes pathway-hero-slide-up {\n from { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n }\n to { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n }\n }\n`;\n\nconst createAssetColumn = ({\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n}: Pick<\n PathwayHeroProps,\n 'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n const children: ElementVisual[] = [];\n\n if (!image && !video) return;\n\n if (video) {\n children.push(\n assets.video.observedAutoPlay({\n video,\n isScaled: true,\n additionalElementStyles: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n }),\n );\n }\n\n if (image && !video) {\n children.push(\n assets.image.background({\n element: image,\n isScaled: true,\n isShowCaption: true,\n isGifAllowed: true,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-asset-wrapper',\n children,\n elementStyles: {\n element: {\n overflow: 'hidden',\n position: 'relative',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n aspectRatio: '16 / 9',\n maxHeight: '50vh',\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n width: '50%',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n height: '100%',\n\n ...(!isImagePositionLeft && {\n left: 'inherit',\n right: 0,\n }),\n },\n\n [`& img, & video`]: {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n }),\n }),\n },\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n const { headline } = props;\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: '80px',\n }),\n },\n };\n\n const elementStyles = {\n element: {\n color: Styles.token.color.black,\n margin: '0 auto',\n textTransform: 'uppercase',\n marginTop: `${Styles.token.spacing.sm}`,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: `${Styles.token.spacing.md}`,\n },\n };\n\n return ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles,\n });\n};\n\nconst createTextColumn = (\n props: Pick<\n PathwayHeroProps,\n 'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n >,\n) => {\n const { headline, eyebrow, text, ...rest } = props;\n\n return textLockup.large({\n ...rest,\n ribbon: eyebrow,\n textLargest: text,\n headlineComposite: createHeadline({ headline }),\n additionalStyles: {\n maxWidth: '720px',\n },\n });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n ElementModel.createDiv({\n className: 'pathway-hero-container-lock-wrapper',\n children: [createTextColumn(props)],\n elementStyles: {\n element: {\n width: '100%',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n padding: `${Styles.token.spacing.md} 0`,\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n padding: `${Styles.token.spacing['4xl']} 0`,\n\n ...(props.isImagePositionLeft && {\n paddingRight: 0,\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: 0,\n }),\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n padding: `${Styles.token.spacing['8xl']} 0`,\n },\n },\n },\n });\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [createTextWrapper(props)],\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '720px',\n\n ...(props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['2xl'],\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['2xl'],\n order: 1,\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n ...(!props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['4xl'],\n }),\n\n ...(props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['4xl'],\n }),\n },\n },\n },\n });\n\nconst createWrapper = (props: PathwayHeroProps) => {\n const { isImagePositionLeft = false } = props;\n const imageColumn = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (imageColumn) {\n children.push(imageColumn);\n }\n\n children.push(createLockColumn(props));\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-wrapper',\n elementStyles: {\n element: {\n position: 'relative',\n\n ...(isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingLeft: '50%',\n },\n }),\n\n ...(!isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingRight: '50%',\n },\n }),\n },\n },\n children,\n });\n};\n\nexport default (props: PathwayHeroProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-hero-container',\n children: [createWrapper(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n position: 'relative',\n },\n },\n });\n\n composite.styles += keyFramePathwayResize;\n composite.styles += keyFramePathwaySlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","headline","Styles","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../_types';\n\ninterface PathwayHeroProps {\n actions: HTMLElement | null;\n eyebrow: HTMLElement | null;\n headline: HTMLElement | null;\n image: HTMLImageElement | null;\n includesAnimation?: boolean;\n isImagePositionLeft?: boolean;\n isThemeDark?: boolean;\n text: HTMLElement | null;\n video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n RESIZE: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n SLIDE_UP: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n @keyframes pathway-hero-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFramePathwaySlideUp = `\n @keyframes pathway-hero-slide-up {\n from { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n }\n to { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n }\n }\n`;\n\nconst createAssetColumn = ({\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n}: Pick<\n PathwayHeroProps,\n 'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n const children: ElementVisual[] = [];\n\n if (!image && !video) return;\n\n if (video) {\n children.push(\n assets.video.observedAutoPlay({\n video,\n isScaled: true,\n additionalElementStyles: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n }),\n );\n }\n\n if (image && !video) {\n children.push(\n assets.image.background({\n element: image,\n isScaled: true,\n isShowCaption: true,\n isGifAllowed: true,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-asset-wrapper',\n children,\n elementStyles: {\n element: {\n overflow: 'hidden',\n position: 'relative',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n width: '50%',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n height: '100%',\n\n ...(!isImagePositionLeft && {\n left: 'inherit',\n right: 0,\n }),\n },\n\n [`& img, & video`]: {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n }),\n }),\n },\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n const { headline } = props;\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: '80px',\n }),\n },\n };\n\n const elementStyles = {\n element: {\n color: Styles.token.color.black,\n margin: '0 auto',\n textTransform: 'uppercase',\n marginTop: `${Styles.token.spacing.sm}`,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: `${Styles.token.spacing.md}`,\n },\n };\n\n return ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles,\n });\n};\n\nconst createTextColumn = (\n props: Pick<\n PathwayHeroProps,\n 'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n >,\n) => {\n const { headline, eyebrow, text, ...rest } = props;\n\n return textLockup.large({\n ...rest,\n ribbon: eyebrow,\n textLargest: text,\n headlineComposite: createHeadline({ headline }),\n additionalStyles: {\n maxWidth: '720px',\n },\n });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n ElementModel.createDiv({\n className: 'pathway-hero-container-lock-wrapper',\n children: [createTextColumn(props)],\n elementStyles: {\n element: {\n width: '100%',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n padding: `${Styles.token.spacing.md} 0`,\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n padding: `${Styles.token.spacing['4xl']} 0`,\n\n ...(props.isImagePositionLeft && {\n paddingRight: 0,\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: 0,\n }),\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n padding: `${Styles.token.spacing['8xl']} 0`,\n },\n },\n },\n });\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [createTextWrapper(props)],\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '720px',\n\n ...(props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['2xl'],\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['2xl'],\n order: 1,\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n ...(!props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['4xl'],\n }),\n\n ...(props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['4xl'],\n }),\n },\n },\n },\n });\n\nconst createWrapper = (props: PathwayHeroProps) => {\n const { isImagePositionLeft = false } = props;\n const imageColumn = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (imageColumn) {\n children.push(imageColumn);\n }\n\n children.push(createLockColumn(props));\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-wrapper',\n elementStyles: {\n element: {\n position: 'relative',\n\n ...(isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingLeft: '50%',\n },\n }),\n\n ...(!isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingRight: '50%',\n },\n }),\n },\n },\n children,\n });\n};\n\nexport default (props: PathwayHeroProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-hero-container',\n children: [createWrapper(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n position: 'relative',\n },\n },\n });\n\n composite.styles += keyFramePathwayResize;\n composite.styles += keyFramePathwaySlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","headline","Styles","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
@@ -96,8 +96,7 @@ const createAssetColumn = ({
|
|
|
96
96
|
overflow: "hidden",
|
|
97
97
|
position: "relative",
|
|
98
98
|
[`@container (max-width: ${BREAK_SMALL}px)`]: {
|
|
99
|
-
aspectRatio: "16 / 9"
|
|
100
|
-
maxHeight: "50vh"
|
|
99
|
+
aspectRatio: "16 / 9"
|
|
101
100
|
},
|
|
102
101
|
[`@container (min-width: ${BREAK_MEDIUM}px)`]: {
|
|
103
102
|
width: "50%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.mjs","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../_types';\n\ninterface PathwayHeroProps {\n actions: HTMLElement | null;\n eyebrow: HTMLElement | null;\n headline: HTMLElement | null;\n image: HTMLImageElement | null;\n includesAnimation?: boolean;\n isImagePositionLeft?: boolean;\n isThemeDark?: boolean;\n text: HTMLElement | null;\n video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n RESIZE: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n SLIDE_UP: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n @keyframes pathway-hero-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFramePathwaySlideUp = `\n @keyframes pathway-hero-slide-up {\n from { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n }\n to { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n }\n }\n`;\n\nconst createAssetColumn = ({\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n}: Pick<\n PathwayHeroProps,\n 'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n const children: ElementVisual[] = [];\n\n if (!image && !video) return;\n\n if (video) {\n children.push(\n assets.video.observedAutoPlay({\n video,\n isScaled: true,\n additionalElementStyles: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n }),\n );\n }\n\n if (image && !video) {\n children.push(\n assets.image.background({\n element: image,\n isScaled: true,\n isShowCaption: true,\n isGifAllowed: true,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-asset-wrapper',\n children,\n elementStyles: {\n element: {\n overflow: 'hidden',\n position: 'relative',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n aspectRatio: '16 / 9',\n maxHeight: '50vh',\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n width: '50%',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n height: '100%',\n\n ...(!isImagePositionLeft && {\n left: 'inherit',\n right: 0,\n }),\n },\n\n [`& img, & video`]: {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n }),\n }),\n },\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n const { headline } = props;\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: '80px',\n }),\n },\n };\n\n const elementStyles = {\n element: {\n color: Styles.token.color.black,\n margin: '0 auto',\n textTransform: 'uppercase',\n marginTop: `${Styles.token.spacing.sm}`,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: `${Styles.token.spacing.md}`,\n },\n };\n\n return ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles,\n });\n};\n\nconst createTextColumn = (\n props: Pick<\n PathwayHeroProps,\n 'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n >,\n) => {\n const { headline, eyebrow, text, ...rest } = props;\n\n return textLockup.large({\n ...rest,\n ribbon: eyebrow,\n textLargest: text,\n headlineComposite: createHeadline({ headline }),\n additionalStyles: {\n maxWidth: '720px',\n },\n });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n ElementModel.createDiv({\n className: 'pathway-hero-container-lock-wrapper',\n children: [createTextColumn(props)],\n elementStyles: {\n element: {\n width: '100%',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n padding: `${Styles.token.spacing.md} 0`,\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n padding: `${Styles.token.spacing['4xl']} 0`,\n\n ...(props.isImagePositionLeft && {\n paddingRight: 0,\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: 0,\n }),\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n padding: `${Styles.token.spacing['8xl']} 0`,\n },\n },\n },\n });\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [createTextWrapper(props)],\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '720px',\n\n ...(props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['2xl'],\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['2xl'],\n order: 1,\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n ...(!props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['4xl'],\n }),\n\n ...(props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['4xl'],\n }),\n },\n },\n },\n });\n\nconst createWrapper = (props: PathwayHeroProps) => {\n const { isImagePositionLeft = false } = props;\n const imageColumn = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (imageColumn) {\n children.push(imageColumn);\n }\n\n children.push(createLockColumn(props));\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-wrapper',\n elementStyles: {\n element: {\n position: 'relative',\n\n ...(isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingLeft: '50%',\n },\n }),\n\n ...(!isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingRight: '50%',\n },\n }),\n },\n },\n children,\n });\n};\n\nexport default (props: PathwayHeroProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-hero-container',\n children: [createWrapper(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n position: 'relative',\n },\n },\n });\n\n composite.styles += keyFramePathwayResize;\n composite.styles += keyFramePathwaySlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"hero.mjs","sources":["../../../source/composite/pathway/hero.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { type ElementVisual } from '../../_types';\n\ninterface PathwayHeroProps {\n actions: HTMLElement | null;\n eyebrow: HTMLElement | null;\n headline: HTMLElement | null;\n image: HTMLImageElement | null;\n includesAnimation?: boolean;\n isImagePositionLeft?: boolean;\n isThemeDark?: boolean;\n text: HTMLElement | null;\n video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n RESIZE: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'scale(1.1)',\n TO: 'scale(1)',\n },\n },\n SLIDE_UP: {\n DURATION: '1.5s',\n TRANSFORM: {\n FROM: 'translateY(25px)',\n TO: 'translateY(0)',\n },\n OPACITY: {\n FROM: 0.2,\n TO: 1,\n },\n },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n @keyframes pathway-hero-resize {\n from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n }\n`;\n\nconst keyFramePathwaySlideUp = `\n @keyframes pathway-hero-slide-up {\n from { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n }\n to { \n transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n }\n }\n`;\n\nconst createAssetColumn = ({\n image,\n video,\n includesAnimation,\n isImagePositionLeft,\n}: Pick<\n PathwayHeroProps,\n 'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n const children: ElementVisual[] = [];\n\n if (!image && !video) return;\n\n if (video) {\n children.push(\n assets.video.observedAutoPlay({\n video,\n isScaled: true,\n additionalElementStyles: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n }),\n );\n }\n\n if (image && !video) {\n children.push(\n assets.image.background({\n element: image,\n isScaled: true,\n isShowCaption: true,\n isGifAllowed: true,\n }),\n );\n }\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-asset-wrapper',\n children,\n elementStyles: {\n element: {\n overflow: 'hidden',\n position: 'relative',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n aspectRatio: '16 / 9',\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n width: '50%',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n height: '100%',\n\n ...(!isImagePositionLeft && {\n left: 'inherit',\n right: 0,\n }),\n },\n\n [`& img, & video`]: {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n ...(includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n }),\n }),\n },\n },\n },\n },\n });\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n const { headline } = props;\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: '80px',\n }),\n },\n };\n\n const elementStyles = {\n element: {\n color: Styles.token.color.black,\n margin: '0 auto',\n textTransform: 'uppercase',\n marginTop: `${Styles.token.spacing.sm}`,\n ...desktopStyles,\n },\n siblingAfter: {\n marginTop: `${Styles.token.spacing.md}`,\n },\n };\n\n return ElementModel.headline.campaignExtraLarge({\n element: headline,\n elementStyles,\n });\n};\n\nconst createTextColumn = (\n props: Pick<\n PathwayHeroProps,\n 'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n >,\n) => {\n const { headline, eyebrow, text, ...rest } = props;\n\n return textLockup.large({\n ...rest,\n ribbon: eyebrow,\n textLargest: text,\n headlineComposite: createHeadline({ headline }),\n additionalStyles: {\n maxWidth: '720px',\n },\n });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n ElementModel.createDiv({\n className: 'pathway-hero-container-lock-wrapper',\n children: [createTextColumn(props)],\n elementStyles: {\n element: {\n width: '100%',\n\n [`@container (max-width: ${BREAK_SMALL}px)`]: {\n padding: `${Styles.token.spacing.md} 0`,\n },\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n padding: `${Styles.token.spacing['4xl']} 0`,\n\n ...(props.isImagePositionLeft && {\n paddingRight: 0,\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: 0,\n }),\n\n ...(props.includesAnimation && {\n ...theme.media.withViewTimelineAnimation({\n animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n }),\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n padding: `${Styles.token.spacing['8xl']} 0`,\n },\n },\n },\n });\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n ElementModel.layout.spaceHorizontalLarger({\n element: document.createElement('div'),\n children: [createTextWrapper(props)],\n elementStyles: {\n element: {\n position: 'relative',\n\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '720px',\n\n ...(props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['2xl'],\n }),\n\n ...(!props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['2xl'],\n order: 1,\n }),\n },\n\n [`@container (min-width: ${BREAK_LARGE}px)`]: {\n ...(!props.isImagePositionLeft && {\n paddingRight: Styles.token.spacing['4xl'],\n }),\n\n ...(props.isImagePositionLeft && {\n paddingLeft: Styles.token.spacing['4xl'],\n }),\n },\n },\n },\n });\n\nconst createWrapper = (props: PathwayHeroProps) => {\n const { isImagePositionLeft = false } = props;\n const imageColumn = createAssetColumn(props);\n const children: ElementVisual[] = [];\n\n if (imageColumn) {\n children.push(imageColumn);\n }\n\n children.push(createLockColumn(props));\n\n return ElementModel.createDiv({\n className: 'pathway-hero-container-wrapper',\n elementStyles: {\n element: {\n position: 'relative',\n\n ...(isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingLeft: '50%',\n },\n }),\n\n ...(!isImagePositionLeft && {\n [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n paddingRight: '50%',\n },\n }),\n },\n },\n children,\n });\n};\n\nexport default (props: PathwayHeroProps) => {\n const composite = ElementModel.createDiv({\n className: 'pathway-hero-container',\n children: [createWrapper(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n position: 'relative',\n },\n },\n });\n\n composite.styles += keyFramePathwayResize;\n composite.styles += keyFramePathwaySlideUp;\n\n return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}
|